JavaScript中級の学習をしながらも、HTMLやCSSについて新たな学びがたくさんあります。
今日は、HTML/CSSでたまに耳にするインライン要素について少し理解ができました。
セットでブロックレベル要素についても勉強したので、ここに記しておきます。
結論から言うと、CSSが上手く反映されない理由はこれらの要素のルールについて理解が足りないためだと思われます。
「インライン要素」とは
HTMLで使われるタグは、インライン要素とブロックレベル要素に分けられます。
インライン要素は文章の一部として使われる要素で、主に次のタグが該当します。
br、img、input、label、select、span、strong、textarea、u
インライン要素のルールはこちらです。
・改行が入らず要素同士で横に並ぶ
・文字データや他のインライン要素の配置が可能
・ブロックレベル要素を配置できない
・一部の要素をのぞき、高さと横幅の指定ができない
・余白の設定ができない
・文字データや他のインライン要素の配置が可能
・ブロックレベル要素を配置できない
・一部の要素をのぞき、高さと横幅の指定ができない
・余白の設定ができない
けっこう制限が多いイメージです。
「ブロックレベル要素」とは
ブロックレベル要素は、見出しや段落、表などを作る基本的な要素です。
代表的なものでは、次のタグが該当します。
div、dl、form、h1-h6、hr、ol、p、table、ul
ブロックレベル要素のルールは、こちらになります。
・改行が入り、要素同士で縦に並ぶ
・他のブロックレベル要素やインライン要素の配置が可能
・高さ、横幅を指定できる
・余白の指定が可能
・他のブロックレベル要素やインライン要素の配置が可能
・高さ、横幅を指定できる
・余白の指定が可能
おわりに
今までこれらのルールを理解していないため、CSSが思うように反映されない現象によく悩まされてきました。
少しずつ知識が増えると、プログラミングにも1つ1つ意味が存在していることに気づかされます。
プログラミングは都度検索ができるため、基本的に覚える必要はありません。
しかし、このような知識があるのと無いのとでは、かなりスキルに差がつきます。
あまり成長が感じられないプログラミングですが、続けていると少しずつ理解出来ることが増えてきました。
これからも頑張って学習を継続していきます。