関連記事もどうぞ

125 プログラミング学習日記

5.<input>って書くだけで、テキスト入力エリアが現れるとは!

投稿日:

プログラミング学習を始めて昨日で11日目。

ようやく初級を終えました。

今日から中級になります。中級の途中からは有料になります。

月々980円かかります。

スクールに入ったらそんなもんじゃないので、980円で全部の講座を学べるのは安すぎます。

僕は迷わず有料プランに入りました。

 

有料プランは月々払いなので、だらだらやっているとそれだけ課金せねばなりません。

だから、少しピッチを上げなければならないなと思っています。

 

さて、初級編を終えるまでに学んだことから「目からウロコ」だったことを選んでお話しします。

ページデザインは、最初に<div >でざっくりエリア分けをする

<div>という何がなんだかわけがわからない呪文にながらく悩まされて私は,<div>と仲直りしました。

それは,「こことここをグループ化して分けるよ」という実に簡単な意味しかない,ということを学んだからです。

では,どんな風に使うのかと言うと,ページをデザインするときに,

 

🍏メニューがついたり,説明がついたりする「ヘッダー部分」

🍏コンテンツを表示する「メイン部分」

🍏お問い合わせなどを表示する「フッター部分」

 

というようにざっくりと3つに分けておき,ページデザインの土台を作ります。

3つの部分を作る

<div >ヘッダー部分のコード</div>

<div >メイン部分のコード</div>

<div >フッター部分のコード</div>

上のように書いておくわけですね。

こうして、最初に部分を作っておくことで、レイアウトのアウトラインができるので、あとは、それぞれの中身を作ることに集中すればいいわけです。

 

最初にアウトラインを作るための <div >という考え方は目からウロコでした。

あんなに見たくなかった<div >ですが、いまでは良いお友達です。

marginは外向け、paddingは内向けの余白

余白を決めるこの二つも、20年間きちんと覚えようとしないまま使っていました。

stylesheetの中のこの二つの値を、適当にいじっては確かめ、いじっては確かめ、を繰り返してきました。

 

本で調べればなんということもないことなんですが、ただただそれが面倒くさかった。

考えてみれば、めんどくさいだけで20年間よく持ったな、という気持ちです。

 

文字の周りを線で囲み、ボックスの中に字を書いているように見せたいとき、

 

🍏線から文字までの内側の余白をpaddingで決める

🍏線の外側の、他の文字との余白をmarginで決める

 

ただ、それだけのことだったのに。

<input>は、テキスト入力ボックスを出現させる

サイトを見ていると、アドレスや質問などを入力させるテキストボックスがあるじゃないですか。

普通に使っていますけど、自分で作れと言われたら途方もなく困ると思っていました。

かといって、あれを作ることがものすごいことだという感覚はあまりありませんでした。

ものすごい腕を持ったプログラマーがちょいちょいと作るんだろうと思っていたからです。

ロケットが月まで行くようなとんでもないことが、自分ごとではないからそんなにすごいことだとは思わなくなっているというのと似てます。

世の中にはすごい人がたくさんいますからね。

 

そういう領分の話であって,僕たちにはあまり関係のないものだと思ってました。

こういう入力ボックスを作るためのコードのパッケージがあり,どこからかそれを落としてきて使わせてもらうんだろう,と思ってました。

 

ところが!!!

 

なんと! 

 

<input>と書くだけで,プレビュー画面にはボックスが出現している!

 

<input>と書くだけ

<input>



 

なんだこれ!

自分で簡単に作れるものだった!

<h2>と書くだけで,その後の文字列が見出し2になる,とか

<a>と書くだけで,その後の文字列がリンクになるとか,

考えてみたらそれもすごいことですよね。

それと同じように,<input>と書くだけで文字入力ボックスが出現するわけです。

 

これは,Webデザイナーの腕がどうとか,ということではなく

このHTMLのしくみをプログラムした人たちがすごいんですね。

考えてみれば当たり前のことですが,そんな妙なことに感動してしまいました。

 

ちなみに

<textarea>

と書くだけで,複数行入力ボックスがあらわれます。(</textarea>の終了タグは必要

textareaで複数行入力ボックス

<textarea></textarea>



いや,もうあきれますね。

あきれますね,というより,これまで20年間何してたんだと。

ますますこれからの学習にわくわくしています。

メルマガ講座「10年ブログによるブランディング講座」

登録

10年ブログによるブランディング講座は30通のメールによる講座です。
また,2018年7月現在,週1回金曜日に「Lyustyleの読書」をはじめとする「知的迷走通信」を配信しています。
皆さんと一緒に楽しく成長できたらと思っています。

lyustyle
無料です。解除も自由です。下のリンクよりご登録ください。Lyustyleの設置した安全なページです。


登録するとすぐに第1回目のメールが届き,その後,30通のメール講座が始まります。

Lyustyleメルマガ「知的迷走通信」

 



よろしければ、購読の登録をしていただければ幸いです。


follow us in feedly

にほんブログ村 PC家電ブログ デジモノ・ガジェットへ

にほんブログ村


-125 プログラミング学習日記
-,

Copyright© 知的生活ネットワーク , 2019 All Rights Reserved.