【CSS】displayプロパティの種類をわかりやすくまとめたよ。
displayプロパティについて詳しく知りたい。
こんな悩みを解決していきますね。
displayプロパティは要素の表示や、幅や高さを変化させるんじゃ。
要素の並び方を変える時はもちろんプロパティによってはdisplayの値によって効かなくなったりする場合があるから、エラーが起きた時はここの設定を変えてみたら治ったりするケースもあるぞい。
なんだか、難しくなってきましたねぇ。
大丈夫じゃ。これからプログラミングを学びたい人向けに分かり易いように説明するように心がけておる。
displayプロパティとは?
① display: block
要素が横に広がって縦に並んでいくイメージです。width(幅)やheight(高さ)も効いていますね。
p、div、ul、h1〜h6などのタグの初期値はこちらになります。
② display: inline-block
blockとinlineの要素を両方持ちます。要素は横並びになりますが、その他はblock要素と同じになります。width(幅)やheight(高さ)も効いていますね。
➂ display: inline
要素は横並びになり、width(幅)やheight(高さ)は変更できません。
a、span、imgなどのタグの初期値はこちらになります。
④ display: none
要素が消えます。跡形もなく。
便利なプロパティなので覚えておくと良いです。
See the Pen rNxVXMG by kazuto1027 (@kazuto1027) on CodePen.dark
displayの値をそれぞれ2つずつ並べてみました。blockでは縦並び、
inline-blockとinlineでは横並び、noneでは表示が消えていることがわかりますね。
またinlineでは幅や高さが適用されていないのが分かるかと思います。
displayプロパティとmarginやpaddingとの関係
マージンとパディングを使う時の注意点をあげていくぞい。
displayの値によって効かない場合があるんじゃ。
marginとpaddingが分からない方はこちらも閲覧ください。
① display: blockの場合
マージンとパディングは両方、上下左右問題なく使えます。
② display: inline-block
マージンとパディングは両方、上下左右問題なく使えます。
➂ display: inline
上下のマージンが指定できません。上下のパディングは指定できますが、改行をした場合に前後が被ってしまいます。 基本的に左右の余白のみ調整できると思ってください。実際に見てみましょう。
See the Pen GRopKoj by kazuto1027 (@kazuto1027) on CodePen.dark
上下のmarginは効いてませんが、左右のmarginは効いている事がわかりますね!
displayプロパティと文字の位置決めとの関係(text-align、vertical-align)
続いて、text-alignとvertical-alignとの関係も説明するぞい。text-alignは文字の水平方向、vertical-alignは垂直方向の配置を決めるプロパティじゃ。オワタ君はついていけてるかの?
(-。-)y-゜゜゜・・・・・・・・・・・・( ﾟдﾟ)ﾊｯ!
・・・・・。 見なかったことにしようかの。
このプロパティは両方とも親要素に記載し、子要素のインライン要素(※)、インラインブロック(※)に作用します。 若干難しいので詳しくみてみましょう。
最初はtext-alignから。
See the Pen PoZPYBJ by kazuto1027 (@kazuto1027) on CodePen.dark
箱とブロックという文字をまとめて中央に移そうとした結果です。
pタグはブロック要素(※)なので、中央寄せ出来ませんが、display: inline-blockにさせた場合は中央に来ていますね。
※・・・厳密に言えばHTML5でブロック、インライン要素は廃止されましたが、ここでは便宜上この呼び方にしています。
続いて、vertical-alignの動作も確認しましょう。値はmiddle(中央)を指定しています。
See the Pen YzwWWKz by kazuto1027 (@kazuto1027) on CodePen.dark
見てみるとわかるんじゃが、vertical-alignはインライン要素の隣同士の位置を決めるプロパティという事がわかるな。
displayプロパティのまとめ
いかがでしたでしょうか? 少し難しいですよね。使いこなせるようになればデザインの幅が広がりますので、是非覚えて頂ければと思います。
合わせて読みたい記事はこちら
Prev→→→未経験向けに徹底解説!WEBデザイン BEM編
Next→→→レスポンシブWEBデザインとは?【スマホ対応】
-
前の記事
WEBデザインのレイアウトのパターンを学ぼう【すぐわかる】 2020.06.18
-
次の記事
WEBデザインのレイアウトのヘッダー部分を分かりやすく解説するよ 2020.06.21