見出し画像

コーディング初心者デザイナーが“HTML5/CSS3モダンコーディング”で勉強してみた

Momoka Saito

ももやんです。今回はHTML5/CSS3モダンコーディングという本について簡単にまとめます🐻‍❄️​
この本では各要素の詳しい説明は省かれているので、何もわかりません！という初心者の方は別の本やサイトで勉強してから読んでみるのが良さそうです😊（私はHTMLうろ覚えだったので調べつつ読み進めました）

コーディングする上でのポイント

要素名にスタイルを指定しない

要素名にスタイルを使用すると、変更があった際にHTMLとCSSの両方を変更することになります😔しかし要素名ではなく、クラスに対してスタイルを指定しておけば、HTMLに変更があったとしてもCSSが影響を受けにくくなります！ただし、a要素、input要素、textarea要素などの場合は、要素の種類が変わる可能性が低いため、要素名にスタイルを指定するデメリットも小さくなります。

CSSのセレクタにはIDではなくクラスを使用する

同じページの中では1つのIDを複数回使えないという決まりがあるため、IDにスタイルを指定すると、そのスタイルは１度だけしか使用できなくなります💀また、スタイルの上書きが難しいということもあり、CSSのセレクタにはIDよりもクラスを使用すると良いです🔥ただ、HTML、JavaScriptからの特定には便利です。

スタンダードレイアウト

多くのWebサイトが採用しているレイアウト。見慣れたレイアウトなので、どこがメイン領域なのか直感的にわかりますが、インパクトにはかけます。

  • ヘッダー

  • フッター

  • サイドメニュー

  • メイン領域

以上の要素を含んでおり、ポータルサイト、ショッピングサイト、ニュースサイト、ブログなど情報長が多くページ数の多いサイトに向いています。

スタンダードレイアウト
PR TIMES MAGAZINEのWebサイト

グリッドレイアウト

このレイアウトは、独立した複数の情報を並列して扱うことに向いています。閲覧者が本当に興味を持った情報にアクセスできるので、ネットショッピングやレシピサイトなどに適しています🍛

グリッドレイアウト例
STAYFUL LIFE STOREのWebサイト

シングルレイアウト

１つのコンテンツを全面に押し出してアピールすることに向いています。アプリや商品のLPなどはシングルレイアウトが多いですね！画面を広く使い視覚的に訴えやすいので、押し出したい情報を目をひく形で効果的に掲載できます🔥また、ページ遷移がないまま上から下まで閲覧することができるので、ユーザーが途中で離脱しづらいというメリットもあります。

シングルレイアウト例
Cafe WASUGAZENのWEBサイト

border-radiusプロパティ

角を丸めることができるプロパティ。値は１つから４つまで指定できます。

text-overflowプロパティ

text-overflowプロパティで、表示領域からはみ出て見えなくなるテキストの境目の表示方法を指定することができます。

clip: 表示領域を境目にして非表示になる。境目に文字が被っている場合には文字が途中で切れる
elipsis: 非表示になるテキストの手前で、表示領域

::beforeと::after擬似要素

CSSのセレクタに::beforeと::afterを使用すると、擬似的な要素を作り出してスタイルを当てはめることができます。

::beforeと::afterの設定方法

div::before {
content:"テキスト";
}
div::after {
content:"テキスト";
}

content:"テキスト";のようにcontentを指定しないと擬似要素は現れません。

div::before {
content:”";
}
div::after {
content:"";
}

からの状態でも指定可能です。

<div>::beforeコンテンツ::after</div>

↑のように::beforeは指定した要素内のコンテンツの最初に、::afterは指定した要素ないにあるコンテンツの最後に配置されます。

擬似要素を使用してタイトルの下にボーダーラインを引くこともできます。

セレクタの詳細度

CSSで要素を指定するときのセレクタには詳細度という概念が存在します。ある要素へのCSSの指定が競合したときに、より強いセレクタのCSSが優先されます🤔

  1. HTMLのstyle属性（style=""）

  2. id（#sample）

  3. class（.sample）、擬似クラス（:hover)、属性（[type="submit"]）

  4. 要素型（div）、擬似要素（::before）


この場合、クラス型セレクタの方が詳細度が高いため、文字色は赤になります。セレクタの詳細度が同じ場合には、後述されたものが優先されます。


idはクラスセレクタよりも詳細度が高いので優先され、文字色は黄色になります。CSSの指定にidを用いてしまうとスタイルの上書きが難しくなってしまうため、CSSではなるべくクラスを使用するのが良さそうです📝

おわりに

HTMLをちょっと学んだだけだったので、新たな発見がたくさんありました！セレクタの詳細度とかあったんだ〜〜というレベルです🙀とにかく覚えてちゃんとコーディングもできるようになりたいですね🖥

この記事が気に入ったらサポートをしてみませんか？