勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS初級編（８）

今回は、HTML&CSS初級編の復習その8となります。

内容は【コンテンツの枠組みを作る、枠線をつける、内側の余白と下側の余白、ボック

スモデル、<input>と<textarea>、ボタンを作る、複数のセレクタに同じCSSを指定す

る】です。

　コンテンツの枠組みはそのタイトル要素<h3>と「contents-item」というクラスを持

　ったdiv要素で構成される。「contents-item」というクラスを持ったdiv要素は、必要

　な画像<img>とコメント<p>のまとまり毎に作成する。

　見出し要素の下にボーダーを指定する（＝枠線をつける）には、borderプロパティを

　使用する。「border: *px solid red;」の様に、枠線の太さ・酒類・色の順に指定して使

　用する。上下左右すべてに線をつけたい場合はborderで指定し、特定の場所にのみつ

　けたい場合には、「border-bottom」の様に「border+方向」とする。

　他に「border-top」「borde-right」「border-left」などがある。

　これまで余白を作るにはpaddingを使用してきたが、paddingはborderの内側の余白を

　作るために使用するプロパティである。

　borderの外側に余白を作りたい場合には、「margin」を用いる。

　値の指定方法はpaddingと同じで、「margin: 20px;」なら上下左右に、「margin: 20px

　10px;」なら上下が20pxで左右が20pxに、「margin: 20px 10px 5px 2px」なら上→右→

　下→左」の順に指定される。

　これまで学習してきたborder・padding・marginは、ボックスモデルという概念に基

　づいている。HTMLの全ての要素には、border（初期状態では表示されない）があ

　り、その外側の余白はmargin、内側の余白はpaddingである。

　<imput>要素は1行のテキスト入力を受けるための要素である。

　<textarea＞要素は複数行のテキスト入力を受けるための要素である。

　<imput＞要素は終了タグ</～>が不要な点に注意。

　ボタンを作る際にも、<imput>要素を用いる。

　<imput>要素にはtype属性を指定することができ、type属性にsubmitを指定すると、

　入力欄ではなくボタンとなる。

　ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」にな

　る。

　ボタンに表示されるテキストは、type属性にsubmitを指定し、その後でvalue属性に任

　意の値を指定することで、ボタンに表示されるテキストを変更することができる。

　「h1, p { 」の様に、複数のセレクタをコンマ「 , 」で区切ることで、それらに同じ

　CSSを適用することができる。

ということで、本日はここまで。

「HTML&CSS初級編」の復習記録は本日で終了。

次回からは「HTML&CSS中級編」の復習を記録していこうと思います。

ご一読を頂きまして、有り難うございました。