【本レビュー】いちばんよくわかるHTML5&CSS3デザインきちんと入門

デザイン

 

 

現在の仕事・課題

・働いているレストランのLP制作

→勉強と並行して進めていますが、なかなか進みません。というのも、結局HTMLテンプレートを参考にしながら1からやり始めたためです。

・新30DAYSトライアル DAY20

→ほかの勉強と並行しながら、進めています。

5月からは以下の2つのことを始める予定です。

・クラウドワークスによる仕事の受注

・とだこうきさんのWriteSomeCode

 

 

今回紹介するのは、「いちばんよくわかるHTML5&CSS3デザインきちんと入門」です。 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 

全体的にかなり基本的なことが書かれています。初心者の方におすすめですが、HTMLとCSSを一通り勉強し終わった後の方にも知識の確認として役に立つかなという感じです。

 

 

しかしそれだけではありません。

ところどころに、今後HTMLやCSSを書いていく上で気をつけるべきことが出てきます。Progateやドットインストールではなかなか学べないところだと思います。

 

 

では、本の中で勉強になった点をいくつか紹介したいと思います。

 

 

1. フォルダ構成

 

フォルダ構成はWebサイトの規模によって分けるべき。

 

小〜中規模のWebサイトの場合

 

小〜中規模Webサイトのフォルダ構成

階層構造を浅くなるので、URLも短くなります。また、どんなファイルがあるかがすぐにわかるので、ファイルの管理もしやすくなります。

ただし、ページ数が増えてくると、大量のHTMLファイルがルート階層にあることになるので、管理しづらくなるという欠点があります。そのため、大規模のWebサイトを作成する際には、次のフォルダ構成がおすすめです。

 

大規模のWebサイトの場合

大規模Webサイトのフォルダ構成

1ページにつき1つのフォルダを作ることで管理がしやすくなります。また、imageフォルダを各フォルダの直下に作っていますが、あまり多くの画像を使用しない場合は、ルート階層のimageフォルダにまとめて保存します。

一見すると、URLが長くなりそうですが、index.htmlというのは特殊なファイル名のため、省略できるので、問題ありません。

 

ファイル名・フォルダ名の付け方

ファイル名やフォルダ名はそのままURLとして使われるので、注意して決めるようにする必要があります。

ファイル名やフォルダ名の付け方は以下のルールを守って付けるといいでしょう。

・英数字、ハイフン、日付を使ったファイル名

例)about.html、photo1.png、news-20190416.html

・アンダースコアではなく、ハイフンを使う

例)news-20190416.html

→コンピュータは「-」を単語の区切りとして認識するが、「_」は単語の区切りとして認識しないので、それに合わせて「-」を採用するようにする。

・大文字、半角スペース、スラッシュは使わない

例)×AboutUs.html、×day and hour.html、×news/tomorrow.html

 

 

2.アクセシビリティ

 

「どんな人でも等しく情報を取得できること」を意識したWebサイト作りをするべき。

 

アクセシビリティについてはこの本で何度か触れられますが、Webサイトを作成する際、今まであまり気にしたことがない点でした。

目の見えない人や高齢者などどんな人でも扱えるWebサイトを作ることが理想であり、そういった人に向けて可能な限りアクセシビリティを向上させる対策を取るべきだと述べられています。

ここでのアクセシビリティとは、「どんな人でも等しく情報を取得できること」とされています。

 

 

この本で出てくるアクセシビリティの対策は主に2つあります。

 

<img>タグにalt属性を付けること

<img>タグにはalt属性というものがあります。これを指定することで、画像が表示できないときにalt属性のテキストが表示されます。

また、視覚障害者が使用するスクリーンリーダー(macではVoiceOver)はalt属性のテキストを読み上げるようになっているので、alt属性には画像の説明を書いておく必要があります。

しかし、場合によってはalt属性は空で書いておく方がいい場合もあるので、注意しなければなりません。

 

アクセシビリティを考慮したテーブルを作ること

テーブルを作るときは、<caption>タグを付けることでそのテーブルが何のテーブルなのかがすぐにわかるようになります。これはスクリーンリーダーがテーブルを読み上げる際に、特に必要になります。

ちなみに<caption>タグは<table>開始タグのすぐ次の行に書きます。

 

 

そしてもう1つは、見出しセルと通常セルを関連づける、という方法があります。

これには2つ方法があって、そのうちの1つが見出しセル<th>にid属性、通常セル<td>にheaders属性をつけておく方法です。

こう書くと記述量が多くなってしまいますが、見ただけで項目ごとの関連がよくわかり、スクリーンリーダーで読み上げた際もテーブルの関係がわかりやすくなります。

 

 

もう1つの方法は、見出しセル<th>にscope属性を付けるという方法です。

これは、見出しセルに関連する通常セルが縦にある場合にscope=”row”とし、横にある場合にscope=”col”とする、という風になります。

この方法はテーブル構造が簡単な場合にオススメのやり方です。

 

 

3.divの使い方

 

divを使うときも意味を持って使うようにするべき。

 

<div>タグは何の意味づけもないタグですが、何も考えずに多用するとdivだらけで階層構造が深いHTMLになってしまい、メンテナンス性が下がってしまいます。それを避けるためにも、以下の4つのパターンでdivを使うのがいいでしょう。

 

1.見出しと関連するコンテンツをまとめる

 1つのdivに囲まれる見出しは1つにし、divにはclass名をつけるようにする。

 

2.パーツの「境界」を作る

最新情報やアクセスなどの独立した情報を「パーツ」と考えて、それぞれのパーツの境界をはっきりさせるためにdivを使って囲む。

 

3.HTMLの階層を揃える

headerやfooterはdivで囲まれているのにも関わらず、メインコンテンツの中のh1やpがdivで囲まれていないという状態は、美しくないHTMLだという感覚を持つことが大事です。

Webサイトを作っていく中でこの「美しい」という感覚を磨いていくことで、綺麗なHTMLが書けるようになります。

上の例のようにdivで囲まれたheaderやfooterとh1やpが同じ階層にあることは美しくないので、h1とpはdivで囲むようにするべきです。

 

4.別のボックスのラッパー構造を作成する

ラッパー構造とは、divで囲まれた複数の「グループ化された構造」をさらにdivで囲むことを言います。

 

4.CSSのボックスモデル

  

widthの適用範囲には注意するべき。

 

CSSのボックスモデルとは次の図のことを指します。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 p.128より

ブロックボックスのコンテンツ領域のサイズは、CSSを適用しない限り、次のようになります。

width…親要素の幅からマージン・ボーダー・パディングがはみ出さない範囲いっぱいに広がる。

height…コンテンツが収まる高さになる。

 

 

widthプロパティの値は、単位にpxもしくはemを使ってボックスの幅を固定する場合と、単位に%を使って伸縮させる場合の2通りがあります。

単位にwidthを使った場合、width: 80%;とすると、親要素に対してコンテンツの部分が80%の幅に設定されます。この時、マージン、ボーダー、パディングが残りの20%を超える値になっていた場合は、親要素からはみ出ることになります。

 

 

また、インラインボックスというものは、ブロックボックスとは異なり、幅と高さの指定はできず、その要素のコンテンツが収まるギリギリの幅、高さになります。ただし例外として、インラインボックスの中でも<img>や<input>、<textarea>などの一部の要素は、幅や高さが指定できるようになっています。

 

5.CSSの知識

 

CSSはタイプセレクタ→クラスセレクタ→子孫セレクタ→idセレクタの順に書くべき。

 

1.詳細度とカスケード

 

CSSには上書きの原則というものがあり、次のような法則でスタイルが適用されるようになっています。

1.親要素に設定したスタイルの一部は、その子孫要素にも適用される(継承)

2.より多くの要素に適用されるスタイルは、特定の要素だけに適用されるスタイルで上書きできる(詳細度)

3.先に出てきたスタイルは、後から出てきたスタイルで上書きできる

2と3は合わせて「カスケード」と呼ばれます。

 

 

2の詳細度とは、セレクタに決められている点数のことで、この点数が高いスタイルが採用されるようになっています。

セレクタの詳細度
セレクタの種類セレクタの例詳細度(点数)
style属性<p style=”color:red;”>1000点
idセレクタ#idname100点
クラスセレクタ・属性セレクタ・擬似クラス.class、[type=”text”]、:hover10点
タイプセレクタ・擬似要素p、::before1点
全称セレクタ*0点

いちばんよくわかるHTML5&CSS3デザインきちんと入門 p.197より

 

この表は詳細度について簡潔にまとめたものです。使われているセレクタの合計で、実際のセレクタの詳細度が決まります。

例としては、<p class=”news”>最新記事</p>というHTMLがあった場合、CSSにp { margin: 0; color: #fff }(1点) .news { color: #333; }(10点)と書かれていたとすると、最終的には、margin:0;とcolor:#333;が採用されることになるのです。

 

 

もし同じセレクタが2回出てきたときは、後に書いたものが採用されることになります。これは、上で出てきたカスケードというものです。

 

2.結局どうやって書けばいいのか

 

CSSには原則として、詳細度の低いものから順に書いていくようにします。そして詳細度が高いidセレクタなどはあまり使わないようにします。こうすることで、後の更新作業の際に簡単に新しいスタイルを適用することができます。

特に詳細度が非常に高いタグのstyle属性や!importantは極力使わないようにしましょう。

 

 

また、タイプセレクタにはページ全体に影響するCSSをファイルの上の方に書くようにします。ページ全体の標準的なフォントサイズ等はhtmlとbodyの両方に適用するといいでしょう。

 

6.ノーマライズCSS

 

ブラウザ間の差異を無くすためには、ノーマライズCSSを使うべき。

 

ノーマライズCSSとは、ブラウザ間の差異をなくすために基本的な装飾をオフにするCSSが書かれたもので、ライブラリの1つです。これに似たものとして、サニタイズCSSやリセットCSS、リブートCSSなどがあります。

これを使うことでブラウザごとに表示が異なるという問題を解決することができます。

サニタイズCSSはノーマライズCSSよりもスマートフォン向けWebサイトの構築に向いています。

 

 

その都度の用途によって使い分けをするといいでしょう。

ノーマライズCSSのリンクを貼っておきます。

Normalize.css: Make browsers render all elements more consistently.

 

 

以上6点が個人的に特に参考になった点でした。

その他にも勉強になるところはたくさんあるので、HTMLやCSSを学び始めた方はぜひ読んでみてください。

 

以上。

タイトルとURLをコピーしました