5.昔話と侮るなかれ ～HTMLの要素には「かたさ」が存在した！？～
ブロックレベルとインライン
昔々のお話です。
HTMLの「要素※」には「ブロックレベル」と「インライン」という
2種類の「分け方」が存在しました。
しかし、現在は使われていません。
(※要素が何かについては前回の記事を御覧いただければと思います。)
じゃあ、何故こんな話を？
要素の「分け方」の基になっていた「性質」自体は今も残っています。
この「性質」はwebページを表示する上で、
要素の「配置や位置関係・大きさ」に関わります。
俗に言う「レイアウト」ですね。
昔も、そしてこれからもwebページを作る上で、
レイアウトが不要になることはありません。
それ故、この２つの「性質」を理解することが、
レイアウトに関する躓きを減らすことに繋がるのです。
なぜなら、私が躓いていたから。
それでは早速本題に入っていきましょう。
その性質は何の為に？
既に述べました通り、配置や位置関係・大きさを決める為にあります。
具体的には、
- 要素の大きさを決めたら、その通りになるか
- 他の要素との位置関係
- 要素の中に要素を入れられるか
などが、あげられます。
注意すべき！
この「性質」は、web製作者が設定をしなくても、
最初から！勝手に！設定されているのです。(悪意のある言い方)
所謂、デフォルト値が存在するのです。(これを知らなかった、私。)
つまり、知らずにいると
思わぬ所でレイアウトが上手くいかず
右往左往する事態が発生するのです。(私のことです。)
ブロックレベルとインライン？その上、性質？
何ともわかりにくいですよね。
語弊を恐れずにイメージしやすくすると、
「おかたい性質」と「やわらかい性質」
くらいの理解でよいと思います。
もちろんレイアウトに関しての性質ですよ。
では、それぞれどのような性質なのかを確認します。
ブロックレベル要素の性質（おかたい性質)
ブロックレベル要素はレイアウトにおいて
- 横幅と高さが指定できる (指示した通りの形になってくれる)
- 横幅の初期値は親要素の横幅と同じになる (親に付き従う)
- 同じ親を持つ他の子要素とは縦に並ぶ (上下関係が存在する兄弟のよう)
この様な性質があります。
おかたいイメージが湧いてきませんか？
インライン要素の性質(やわらかい性質)
インライン要素はレイアウトにおいて
- 横幅と高さが指定できない(指示した通りの形にならない)
- 横幅の初期値は内容で決まる(変幻自在なわがままボディ)
- 他の要素と横に並ぶ(フレンドリーで上下関係をつくらない)
このような性質があります。
やわらかいイメージがわいてきませか？
性質を変えることはできるの？
ここで疑問に思うのが、性質を変えることができるかということだと思います。
レイアウトをする上で当然不都合が生じるケースもあるはずです。
答えは
イエス
CSSで、要素に対して、ある設定をするだけで実現可能です。
その設定項目が「display」です。(設定項目のことをプロパティといいます)
このdisplayがブロックレベルとインラインの性質を決めているのです。
つまり、「display」の設定次第でレイアウトに影響が出るということです。
今日のまとめ
- ブロックレベルとインラインはレイアウトに関わる性質
- ブロックレベルとインラインは初期値が存在する
- ブロックレベルとインラインは後から変更できる
- 変更はCSSでdisplayを設定することで可能
ということで、本日はブロックレベルとインラインについて整理しました。
細かい使い方などは他のキレイで優秀なページにお譲りします。
あくまで、私が理解する過程・学習の記録のアウトプットですので。
それでは、また。
