こんにちは、マツダです。
今日は、「ふたば図書館」のCSSをひたすら書きました。
4時間半かかりましたが、どうにか上から下まで形にはなってくれましたーーー！
ですがまだまだ、限られた時間の中では一苦労ですね！
今日は、コーディングを進める中で、「あーここは就職する前にもう一度復習しないといけないな」とおもったdisplayについて書きたいと思います。なんとなく理解できてる風だと、それが本来必要なときに自分の引き出しになっていないので、もう一度振り返ってみたいと思います。
■ displayプロパティ
displayとは、要素の表示形式を指定する際に使用するプロパティのことです。
普段よく使うものは、インラインやブロックの指定のものが多いですね。
では、昨日書いた記事と一部重複しますが、話の延長線ということで、それらの指定の意味をもう一度おさらいしたいと思います。
◇display:inline
・インラインボックスを生成する
・インライン要素であるa img spanなどの初期値
･イメージ：高さなどはなく、改行されず横に並んでいる、文章、平ら
◇display:block
・ブロックボックスを生成する
・ブロックレベル要素であるp div ul h1〜h6などの初期値
･イメージ：幅や高さを決めた要素が縦に改行されて並んでいるかんじ、かたまり、
◇display:inline-block
・インラインレベルのブロックコンテナの生成。
・要素全体はインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。
・イメージ：インラインっぽい雰囲気だけど、実は中身ブロック。
◆(その他重要なdisplayプロパティ)display:flex
・一定の規則で並べたいブロック要素の一つ上の階層に指定することで、flexboxの指示ができる
・イメージ：flex開始の魔法の呪文
ざっくり（過ぎますけど）言うとこんな感じですよね。笑
ではそれぞれのできること出来ないことについて見ていきます。（以下display:flex除く）
1.改行は？
display:inline → しない
display:block → する
display:inline-block → しない
2.幅と高さはつけられる？
display:inline → 不可
display:block → 可
display:inline-block → 可
3.marginやpaddingなどの余白の指定は？
display:inline → 左右のみできる。上下不可
display:block → 上下左右できる
display:inline-block → 上下左右できる
4.text-align等で位置指定はできる？
display:inline → 可
display:block → 不可
display:inline-block → 可
それでは、この知識をもって、こんな場合どうするか、ということについて考えてみます。
「pタグ内の一連の文章の中でspanを使って一部太字にして強調して、そのあと改行したい。余白もつけたい。」
となった時です。
spanだけだと初期値はdisplay:inlineなので、改行ができませんね。かといってdivのマトリョーシカみたいになるのもな･･･。
ということは、このspanをブロックレベル要素に変身させてあげて改行する必要があります。
つまり、spanに対してdisplay:blockを設定してあげれば、改行もできて、幅や大きさも指定する事ができるのです。
span自体が、ブロックレベル要素になったわけではありませんが、ブロック扱いをすることで指定する事が出来ます。
このように、コーディングのなかの些細なことの中にも、基本の理解がないと適当なことをしてしまう恐れがあることが沢山あります。
なんとなく自分のパソコンで見たら表面ができてるから・・・、とフワッとつくっていくと、バグが生じたとき何が原因なのか、
自分でも管理しきれなくなります。
とにかく教科書を詰め込んできたことについて、少し慣れてきた今だからこそ、見直してみることが大切だなと感じた日でした。
