はじめに
未来電子テクノロジーでインターンをしている＠reies1204です。
今回は自分が以前に学んだ際に、案外分かっていそうでよく理解しなかったまま、とりあえずスルーしていた「要素」について復習も兼ねてまとめてみようと思います。
ただし、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
ブロック要素とは
まずブロック要素とは、要素の前後に改行が入り、ブロックのように積み上がっていくような表示になる要素です。
例えば<p><div><ul><h1~h6><header><main><footer>など、、、
具体的にはこんな感じ。
ブロック要素とは
ブロック要素とは
ちょっとわかりにくいですが、今これはブロック要素で表示されています。
ブロック要素の特徴
- 縦に表示されていく
- 幅(width)と高さ(height)が指定できる
- marginとpaddingを指定できる
- textーalignが要素の真ん中に適用される
- 要素のボリュームに関わらず、横いっぱいに広げられる
インライン要素とは
一方でインライン要素とは、ブロック要素のように改行が入らず、テキストの一部としてブロック要素の途中に差し込むことができる要素です。
例えば<a><b><span><font>など、、、
具体的にはこんな感じ。
ブロック要素の中にインライン要素が入ります
これはインライン要素として
<b>を使ってます
インライン要素の特徴
- 横に表示されていく
- 幅(width)と高さ(height)が指定できない
- marginとpaddingを左右だけ指定できる
- text-alignは親要素につけることで指定できる
インラインブロック要素とは
インラインブロック要素とは、要素の並び方がインライン、要素の中身がブロック要素のような特徴を持つ、ブロック要素とインライン要素のいいとこをとったような要素です。
基本的にボタンなど要素を横に並べたいときに便利です。
インラインブロック要素の特徴
- 横に表示される
- 幅(width)と高さ(height)を指定できる
- marginとpaddingを指定できる
- text-alignは親要素につけることで指定できる
これらはCSSで変更可
以上まとめてきた要素については、CSSで「display」プロパティによって指定し直すことで、それぞれ変更することができます。
さいごに
以上基本的な部分である「要素」についてまとめてきました。
言葉の意味やコードの意味などを理解できていないうちは、基本的な部分であってもとりあえずスルーしがちになってしまうので、これからの学習においてそういった場面に出くわした際にはしっかり理解まで持って行こうと思います。
これからも学習を継続して頑張っていきます。