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

[progate] HTML/CSS初級,progate,レビュー

三島 某

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

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

  • HTMLに触れてみよう
  • CSSに触れてみよ
  • レイアウトを作ろう
  • ヘッダーを作ろう
  • フッターを作ろう
  • コンテンツを作ろう ← 今回はここ、終盤戦
  • 問い合わせフォームを作ろう

まとめ

  • spanタグを使って、インライン要素を学習していきます。
  • divタグを使って、ブロック要素について概ね理解できます。
  • コンテンツの特性に基づくレイアウトについて経験します。

「コンテンツを作ろう!」の解説

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

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

コンテンツを作ろう!」では学ばないこと

インライン要素

本セクションでは、インライン要素について説明しているのですが、説明量が十分でないため学習者の理解がフワっとしてしまいます。

外部のサイトなどでしっかりと学習して、ブロック要素との違いを理解しましょう。

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

参加ランキング

PVアクセスランキング にほんブログ村