[progate] HTML/CSS 初級 「レイアウトを作ろう」のまとめ

2021年9月28日[progate] HTML/CSS初級,progate,レビュー

HTMLファイルの構造についての学習になります。これまではコンテンツの表示についてでしたが、今回はHTMLをどのように制御するかとなります。

HTML/CSS 初級の構成での「レイアウトを作ろう」の位置付け

まとめ

正直このセクションは、内容がなさすぎて・・・なんか「feel」って感じです（汗

「レイアウトを作ろう」の解説

本セクションでは、HTMLの構成とHTMLの全体レイアウトとは？について学習していきます。

1. HTMLの全体構造
2. HTMLの全体構造（2）
3. 全体のレイアウト

HTMLの全体構造

HTMLファイルの準拠しているHTMLのバージョンとヘッダーについて学習します。

表示するコンテンツがないので、まぁそういうもんだと思うだけです。

HTMLの全体構造（2）

headタグに指定する制御情報について学習します。headタグは以下のような情報を指定します。

• エンコード/文字コード(meta charset)　← 簡単に説明
• サイト/ページの説明情報(title)　← 一部だけ説明
• Webブラウザの互換性情報
• レスポンシブル向けの制御情報
• 外部ファイルの取り込み(link)　← 簡単に説明
• icon情報

HTMLの作成に携わるのであれば、headタグはコンテンツ以上に重要な判断をすることになります。

演習では3行だけですが、スクロールが必要なくらいはあり、しかも以前は必要だったけど、今は不要となったタグなどもあります！

他のサイトではどのような内容を設定しているのかを常に意識しておきましょう。

全体のレイアウト

bodyタグ内のCSSを念頭においた分割方法について学習します。divタグを設定して、クラスを指定しています。

薄すぎてちょっとコメントがないです。。

Try it!

各セクションで是非チャレンジしてみてください。セクションのボリュームが小さいのでTryが少ない・・

「レイアウトを作ろう」では学ばないこと

HTMLを制御するということ

headタグには様々なことを記載するのですが、ここでは最も基本的なことを説明します。

それは文字コードです！

文字コードは、大きく３つあります。現在では基本的にUTF-8なのですが、歴史的な経緯でWindows系ではシフトJIS, UNIX系ではEUCというのがあります。

作成したファイルをこの文字コードのいずれかで作成します。それをエンコードと呼びます。

そしてWebブラウザは、htmlファイルのmetaタグに記載した「charset」をみてデータを判断します。

さてファイルのエンコードをシフトJISで作ってしまったけど、「charset」をUTF-8にした場合どのようなことが起きるでしょうか・・

文字化けです！

ファイルのエンコードとmetaタグのcharsetの設定が間違うと、コンテンツの効果は失われます。

ファイル作成はUTF-8とし、metaタグのcharsetは必ずUTF-8とするようにしましょう！

このようにheadタグにはシステムよりの重要な設定をたくさん行う必要があります。事前にどのような値とするかはしっかり確認するようにしましょう！

レイアウトってそもそもなに？

レイアウトというのはとても大切です。ヘッダーとボディーとフッターがあるということではありません。

最も重要なのは作成しているページにはどのような情報が必要で、それはどのような分類であるべきか？またユーザには、その情報を使ってどのような大変をしてもらうのか？を決める作業を指します！

今は、ピンとこないかもしれませんが、これはとても大切です。そのために以下の訓練を日頃から心がけることをお勧めします。

参加ランキング