こんにちは、すぐるです
入門３では、htmlのボックスモデルについて学びました。htmlタグで囲われた要素の周りには、目には見えない枠線があって、その枠線の内側と外側の余白を自由に指定できるということでした
入門４では、htmlタグで囲われた要素の特徴をさらに掘り下げて話していきます。今回の記事を読むことで、ブロック要素、インライン要素、インライン・ブロック要素が理解できます
ーーーーーーーーーーーーーーー
HTML&CSS入門４で学べること
♢ブロック要素がわかる
♢インライン要素がわかる
♢インラインブロック要素がわかる
ーーーーーーーーーーーーーーー
ブロック要素とインライン要素とは
htmlタグで囲われた要素は、タグに種類に応じてブロック要素かインライン要素かのどちらかに分けられます。また、cssのプロパティを指定することで、インラインブロック要素にすることもできます
ブロック要素とインライン要素を理解する前に、よく使うブロック要素になるタグとインライン要素になるタグを紹介します。実践では、ほとんど次のようなタグしか使いません
ブロック要素になるタグ <h1>〜<h6>タグ・・・見出しタグ、<p>タグ・・・パラグラフタグ、<div>タグ・・・ディブタグ、<header>タグ・・・ヘッダータグ、<footer>タグ・・・フッタータグ、<form>タグ・・・フォームタグ
インライン要素になるタグ <a>タグ・・・アンカータグ、<span>タグ・・・スパンタグ、<strong>タグ・・・強調タグ、<small>タグ・・・スモールタグ
上のタグを覚えておけば、一応すべて大丈夫だと思います。次にブロック要素とインライン要素の特徴を見ていきます
ブロック要素の特徴
・要素を囲むボックスが、要素の大きさに関係なくブラウザの横一杯に広がる・縦に並んでいく・要素の高さを指定できる
インライン要素の特徴
・要素を囲むボックスは要素の大きさ分だけ広がる・横に並んでいく・要素の高さは指定できない
これを読んだだけでは、ブロック要素とインライン要素の全体像を把握することは難しいと思います。大切なことは実践だと思いますので、今日も早速実践を通して学んでいきましょう
ブロック要素を理解する
①htmlファイルとcssファイルに次の記述を追加してください
htmlファイルに追加する記述
cssファイルに追加する記述
今、htmlファイルにはボックス要素になるタグだけを追加しました。ボックス要素のタグの特徴をも一回見返してみて、ブラウザを確認してみてください。ボックス要素の特徴が反映されていることがわかります
上の図をよくみてみると、確かに要素の大きさに関係なく、ボックスが横いっぱいに広がっていて、要素は縦に並んでいます
次に、ここにマージン（外側の余白）とハイト（要素の高さ）を設定するcssを付け足して、しっかりと反映されることを確認します
②ボックス要素のマージンとハイトを変更する
htmlファイルはそのままで、cssファイルに次の記述を追加してください
それぞれのブロック要素に、マージンとハイトを設定する記述を追加しました。margin: 0px 80px; の意味は、要素の上下に０pxの余白と、要素の左右に80pxの余白を設定するという意味です
そして、それぞれのブロック要素の高さをheightプロパティを使って100pxに設定しました。ブラウザを確認してみて、しっかりと変更が反映されていることを確認してみましょう
図をよく見てみると、上下の余白がなくなり、左右にしっかりと80px分の余白ができています。そして要素の高さも100pxに変更されています
もう一度ブロック要素の特徴をまとめて見ます。ブロック要素は、ブラウザの横いっぱいに広がり、縦に並びます。そして要素の高さを指定することができます
インライン要素を理解する
①htmlファイルとcssファイルに次の記述を追加してください
htmlファイルに追加する記述
cssファイルに追加する記述
今、htmlファイルにはインライン要素になるタグを追加しました。そして、cssでインライン要素の背景をピンクに設定しました
インライン要素の特徴は、要素のボックスの大きさが、要素の大きさ分だけ広がり、要素どうしが横に並ぶことでした。ブラウザを確認して反映を確認して見ましょう
上の図をよく見てみると、しっかりとインライン要素の特徴が反映されていることがわかります
次に、インライン要はハイトの指定ができないことを確認するために、cssファイルに記述を追加して確認してみましょう
②インライン要素のマージンとハイトを変更する
htmlファイルはそのままで、cssファイルに次の記述を追加してみてください
今、マージンとハイトを変更するcssを記述しました。今一度インライン要素の特徴を思い出してからブラウザを確認してみましょう
上の画像をよく確認してみると、マージンはしっかりと変更されていますが、高さは変更されていません。しっかりとインライン要素の特徴を確認することができます。成功です
インライン・ブロック要素とは
結論から言いますと、インライン・ブロック要素とは、ブロック要素とインライン要素の両方の特徴を持つ要素のことです。大切なことは、最初からインライン・ブロック要素になるタグは存在しません
インライン・ブロック要素の特徴を持たせるためには、cssのdisplayプロパティを使うことによって設定できます。具体的には次のように書きます
h1 { display: inline-block; }
このように指定した場合、ブロック要素の特徴を持つ＜h１＞タグはインライン要素の特徴をもつインライン・ブロック要素になります
インライン・ブロック要素の特徴
・要素を囲むボックスが、要素の大きさの分だけ広がる・要素が横に並ぶ・要素の高さを指定できる
ちなみに、displayプロパティの値をinlineやblockと指定することで、ブロック要素をインライン要素に変更したり、その逆もできるようになります
最後に表にまとめてみたので、確認して見てください
入門４はここまでです。おつかれさまでした
今回学んだ、ブロック要素とインライン要素の違いを理解することは、webデザインをしていく上で非常に大切な概念です
記事を何回もくり返して読み、実際に手を動かすことで理解が深まると思います
本気でWebデザインを学ぶなら
本気でウェブデザインを学ぶなら、Udemyのオンライン講座 
が超おすすめです
ぼくは１９歳のときUdemyでWebデザインの勉強をはじめて、
その半年後にフロントエンジニアとして仕事を取ることができました
こうなることができたのは、完全にUdemyのおかげだと思っています
Udemyのコースはどれも質が高くて、すごい分かりやすいです
しかし、量が豊富なので、勉強するにはかなり骨が入りましたが（笑）
ちなみに、ぼくは今でも複数のコースで学んでいます
もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います
最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる！ 」っていうコースです
かなり丁寧に解説されていて、１９歳のポンコツな頭でも理解することができました
ついでにPhotoShopも応用的なところまでこのコースで学べます
他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください
Udemy はこちらから！
