プログラミングを学ぶ上での3つの知識「HTML・CSS」
この記事では、将来プログラミングをできるようになるために、HTMLとCSSの今日学んだ基礎知識を解説していく記事です。
今日学んだこと。
ブロックレベル要素。
インライン要素。
CSSのdisplayでボックスの種類を切り替える。
ブロックレベル要素。
<body>〜<body>の中で使われる<h1>や<div>のようなタグの多くは、ブロックレベル要素かインライン要素に分類できます。ブロックレベル要素は、親要素の領域全体に広がって「ブロック」を生成します。
例えば<div>はブロックレベル要素になります。ブロックレベル要素で囲われた要素は縦に積まれていきます。
ブロックレベル要素はCSSで横幅や高さを指定したり、「margin・padding」などの余白を4方向につけることができます。
これらのHTMLはブロックレベル要素に分類されます。「header, footer」「main, aside」「article, section」「ul,ol, li,」「dl, dt, dd」「tableh」「h1〜h6」「p」「div」「form」
インライン要素。
インライン要素は、要素を定義するタグで囲われた領域だけを占有します。
例えば、ハイパーリンクを指定する<a>はインライン要素になります。
インライン要素で囲われた要素は横に並んでいきます、ブロックレベル要素と違って、要素が切り替わると行が切り替わらず続けて横に並んでいきます。
インライン要素はCSSで横幅や高さを指定することができません。
また、marginやpaddingなどの余白も、左右の方向にしかつけることが出来ません。
これらのHTMLはインライン要素に分類されます。
「a」「strong」「br」「img」「label, input, button, textarea」
CSSのdisplayでボックスの種類を切り替える。
displayというCSSプロパティを使うことによって、ブロックレベル要素をインライン化したり、インライン要素をブロック化することができます。
displayで指定できる値は「block」「inline」「flex」「inline-block」「none」などがあります。
まとめ
今回の記事ではHTMLをもっと詳しく知るために学んだことを書きました。このように理解度を深めることは、これからHTMLをもっと勉強する上でとても大切になってくると思うので、こういう細かいところもしっかり詳しくしていけたらなと思いました。
ブロックレベル要素とインライン要素をしっかりと使い分けることでプログラミングの幅も広がると考えました。