50代からのHTML / CSS / Java Script チャレンジNo.21 罫線を引く
今日はborderプロパティを使って罫線を引く学習をします。まずはこれまでの状態を確認。ブラウザーも開いて見え方も確認。
そしたら、borderプロパティはcssファイルのdiv.contentの中に書きます。marginの下に次のように書く。
border: 1px solid #d1d1d1;のように入力する。そしたら、保存して、ブラウザーをリロードして確認。
ボーダーが設定せれたのが分かる。ちなみにこのborderプロパティもショートハンドプロパティになってる。実際に書くと次のようになるらしい。
border-width: 1px;
border-style: solid;
border-color: #d1d1d:
これを,1行にまとめて表記したみたい。
ちなみに、border-style: solid; solidは実線って意味で、他にも種類があるみたい。mdn web docsでちょっと確認してみる。
ちなみに、罫線を引いたのはいいけど、中身のテキストとボーダーに隙間がないのは見にくいので、これをなんとかしたい。
内側の余白を設定するにはどうするかっていうと、paddingっていうプロパティがあるので、それを使う。cssのdiv.contentの中にborderの下に次のように書く。padding: 8px;
そしたら、保存してブラウザーをリロードしてみる。
ボーダーの中身の間に少し余白ができたのが分かる。なんか個人的には、もう少しあってもいいかなぁと思うので、15pxくらいにしてみようかな。
marginもpaddingもどちらを使ってもいいんだけど、今回みたいに、div.contentみたいにブロック分けされてるなら、paddingの方が便利かもね～ようは中の要素全体を調整できるしね。逆にある要素がもうあって、その外側に余白をつけたいなら、marginを使うイメージから。まぁ簡単に外側はmargin, 内側はpadding?ってくらいのイメージでも大丈夫かな
それじゃ今日はここまで、お疲れ様です。