[progate] HTML/CSS 初級 「コンテンツを作ろう!」のまとめ


Webページのコンテンツ作成を通じて、ブロック要素とインライン要素について学習していきます。
HTML/CSS 初級の構成での「フッターを作ろう!」の位置付け
- HTMLに触れてみよう
- CSSに触れてみよう
- レイアウトを作ろう
- ヘッダーを作ろう
- フッターを作ろう
- コンテンツを作ろう ← 今回はここ、終盤戦
- 問い合わせフォームを作ろう
まとめ
- spanタグを使って、インライン要素を学習していきます。
- divタグを使って、ブロック要素について概ね理解できます。
- コンテンツの特性に基づくレイアウトについて経験します。
「コンテンツを作ろう!」の解説
本セクションでは、Webサイトのナビゲーションを行うパーツの1つであるヘッダーについてコーディングすることで、より実践的なHTMLとCSSの連携方法を学習します。
- メインのレイアウト
- コンテンツの構造
- ボーダー
- paddingとmargin
これまで学んだことを使っていきます。ボリューもそこそこになってきているので、頑張りましょう。
メインのレイアウト
コンテンツのタグとプロパティの指定が行い、コースとして本格的なコンテンツの追加が行われ始めました。
本セクションでは、spanタグによるコンテンツの修飾が行われています
spanタグは、以下の性質を持ちます。
- heigh, widthを持たない
- margin, paddingは左右のみ
- 横並び(改行なし) ← 強いて言えば今回はこれだけ
- divタグを含むことができない
インライン要素はブロック要素とはだいぶ違うので、個別に学習していく必要があります。
h1, h2, div, spanタグ, padding, color, font-sizeプロパティ
コンテンツの構造
Webサイト上では、同じようなコンテンツを並べることがあります。例えるなら
- ブログの新着記事や関連記事
- 企業サイトの商品やサービスの一覧
- 動画サイトの動画の一覧
このような場合、1つづつのコンテンツの見せ方は「同じように見える」必要があります。
そこでCSSを用いて文字の大きさやフォントの種類、背景の色使いなどを指定します。
本セクションでは、画像の一覧の見せ方について、タグの書き方について学習します。
h3, div, imgタグ
ボーダー
ブロック要素に対しての枠線の記載方法について説明します。またコンテンツを横並びに指定しています。
これは「ヘッダーを作ろう」や「フッターを作ろう」では、リスト系のタグを利用していたものから、divタグでも応用できることを説明していて、とても有益です。
borderプロパティ
paddingとmargin
marginについての説明があり、ボックスについて学習します。
divタグに対して、marginとpaddingの簡単なレイアウトを設定することで、それらしいWebページになります。

marginプロパティ, paddingプロパティ
Try it!
各セクションで是非チャレンジしてみてください。
スライド | Try |
メインのレイアウト |
|
コンテンツの構造 |
|
ボーダー |
|
paddingとmargin |
|
「コンテンツを作ろう!」では学ばないこと
インライン要素
本セクションでは、インライン要素について説明しているのですが、説明量が十分でないため学習者の理解がフワっとしてしまいます。
外部のサイトなどでしっかりと学習して、ブロック要素との違いを理解しましょう。

ちなみに「インラインブロック要素」というのみあるんですよね。