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

Webページのコンテンツ作成を通じて、ブロック要素とインライン要素について学習していきます。

HTML/CSS 初級の構成での「フッターを作ろう！」の位置付け

まとめ

本セクションでは、Webサイトのナビゲーションを行うパーツの１つであるヘッダーについてコーディングすることで、より実践的なHTMLとCSSの連携方法を学習します。

これまで学んだことを使っていきます。ボリューもそこそこになってきているので、頑張りましょう。

コンテンツのタグとプロパティの指定が行い、コースとして本格的なコンテンツの追加が行われ始めました。

本セクションでは、spanタグによるコンテンツの修飾が行われています

spanタグは、以下の性質を持ちます。

インライン要素はブロック要素とはだいぶ違うので、個別に学習していく必要があります。

学習タグ/ プロパティ

h1, h2, div, spanタグ, padding, color, font-sizeプロパティ

Webサイト上では、同じようなコンテンツを並べることがあります。例えるなら

このような場合、１つづつのコンテンツの見せ方は「同じように見える」必要があります。

そこでCSSを用いて文字の大きさやフォントの種類、背景の色使いなどを指定します。

本セクションでは、画像の一覧の見せ方について、タグの書き方について学習します。

学習タグ/ プロパティ

h3, div, imgタグ

ブロック要素に対しての枠線の記載方法について説明します。またコンテンツを横並びに指定しています。

これは「ヘッダーを作ろう」や「フッターを作ろう」では、リスト系のタグを利用していたものから、divタグでも応用できることを説明していて、とても有益です。

学習タグ/ プロパティ

borderプロパティ

marginについての説明があり、ボックスについて学習します。

divタグに対して、marginとpaddingの簡単なレイアウトを設定することで、それらしいWebページになります。

学習タグ/ プロパティ

marginプロパティ, paddingプロパティ

各セクションで是非チャレンジしてみてください。

スライド	Try
メインのレイアウト	<span>タグのコンテンツのbackground-colorを指定します。 <span>タグのwidth, heightを指定して、変化を見ましょう。 <span>タグの上下のpaddingに極端な値を指定して、変化を見ましょう。
コンテンツの構造	特になし
ボーダー	border-styleを様々なパターンを使ってみましょう border-style: none solid dotted dashed などボックスのパーツごとにスタイルを変えてみましょう border-colorの縦横などそれぞれの色を変えてみましょう。 paddingの数値を大きくすると、borderがどうなるか試してみましょう。
paddingとmargin	特になし