Zenn
Closed20

【技術書】『HTML5/CSS3モダンコーディング』メモ

CSS
HTML
frontend
ShionShion

サイト構成要素

Web サイトのスタンダードなレイアウト。

  • ヘッダ
    • サイトロゴ
    • ナビゲーションメニュー
  • メイン領域
    • 特集コンテンツ
    • 更新履歴
    • 記事ブロック
  • フッター
    • フッターメニュー
    • コピーライト
  • サイドメニュー
    • ランキング
    • ドキュメントリスト
    • 検索ボックス
ShionShion

htmlでfont-sizeを設定

以下の記述があった。

html {
  font-size: 62.5%;
}

62.5%ってなんの数字・・・？
調べてみると、フォントサイズの基準を10pxにするものらしい(ブラウザのデフォが16pxのため16px * 62.5% = 10px)。

以下の記事がわかりやすかった。
https://qiita.com/mrd-takahashi/items/8396d84bd2c52ab1cf3e

ShionShion

box-sizing とは？

CSSに以下の記述があった。

*,
*::before,
*::after {
  box-sizing: border-box;
}

全ての要素と擬似要素に、box-sizing: border-box を設定している。

これは、要素の幅（width）と高さ（height）の中にpaddingとborderを含める設定をしている。つまり、width: 50px と決まっているなら、paddingとborderもその50pxの中に含まれるようになる。

デフォルトのままだと、要素の幅や余白を%で指定したいときに、borderを加えると親要素からはみ出てしまうことがあるらしいから、この設定をしているみたい。

box-sizingについては下記の記事がわかりやすかった。
https://saruwakakun.com/html-css/reference/box-sizing#google_vignette

ShionShion

スペースを開けずにセレクタを書く

CSSに以下の記述があった。

.global-nav .nav-item.active a,
.global-nav .nav-item a:hover {
  background-color: #d03c56;
  color: #fff;
}

.nav-item.active のようにクラス名にスペースを開けずに連続してセレクタを書くと「nav-item クラスと active クラスの両方がついた要素」を指定できる。

ShionShion

displayプロパティがinlineやinline-blockの要素は要素間に改行があると半角スペースとして要素の間に挿入されてしまう問題

<a href="#">
  <time class="date" datetime="2015-08-23">2015.08.12 SUN</time>
  <span class="category">TOPIC</span>
  <span class="title">Title</span>
</a>

.date {
  display: inline-block;
  width: 19%;
}

.category {
  display: inline-block;
  width: 8%;
}

.title {
  display: inline-block;
  width: 73%;
  padding-left: 15px;
}

この時、全体として100%になり横並びで表示されそうだが、ずれてしまう。
※すべての要素にbox-sizing: border-box;は設定済み

これの原因は、表題の通りで、time要素の行の末尾とspan要素の2行の末尾にある改行が表示時に半角スペースとして要素間に挿入されてしまい、それにより最後のspan要素が入りきらなくなり下に落ちてしまうのである。

解決策は、親要素に font-size: 0; を指定すると良い。これにより、挿入された半角スペースのサイズを0にできる。

ただし子要素に font-size を指定し直す必要がある。

ShionShion

はみ出たテキストを「・・・」で省略して表示する

以下のCSSを適用すればOK。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
ShionShion

ベンダープレフィックス

ベンダープレフィックスとは、以下のケースの際、そのことを明示するためにつける識別子のこと。

  • 仕様が未確定な機能をブラウザが先行実装する場合
  • 独自の拡張機能を実装する場合

対応済みブラウザやベンダープレフィックスの要不要を調べるのは以下のサイトが便利。
https://caniuse.com/

ShionShion

CSSカウンタ

CSSの中でカウンタを定義できる。
ステップは以下。

  1. カウンタの名前を決める
  2. カウンタの値を0に初期化 (counter-reset: {カウンタ名})
  3. カウンタの値を表示する (content: counter({カウンタ名}))
  4. カウンタの値を増加させる (counter-increment: {カウンタ名})

詳細は以下を参考にする。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters

ShionShion

::before, ::after の意味と使い所

CSSの::afterと::beforeは、疑似要素と呼ばれるもの１つ。
これを使うと、HTMLには書かれていない要素もどきをCSSで作ることができる。

  • content プロパティに指定できるのは文字列以外にも、画像やCSSカウンタの数値などが可能
  • ::afterと::beforeの display プロパティの初期値は inline のため高さや幅を指定したい場合は block/inline-block にする必要がある

詳細は下記の記事がわかりやすい。
https://saruwakakun.com/html-css/basic/before-after

ShionShion

script 要素はどこに書く？

結論、HTMLの描画が終わる前に実行する必要があるJS以外は、body要素の最後に記載する。

なぜならHTMLは上から順に解釈されて描画されるため、HTMLの前にJSの処理が入ると処理が終わるまでそれ以降のHTMLの描画が止まってしまうため。

ShionShion

ホバーすると下線が中央から両側に伸びて表示されるCSS

<ul>
  <li class="nav-item"><a href="#">HOME</a></li>
  <li class="nav-item"><a href="#">ABOUT</a></li>
  <li class="nav-item"><a href="#">MAIN DISH</a></li>
  <li class="nav-item"><a href="#">APPETIZER</a></li>
  <li class="nav-item"><a href="#">BREAK TIME</a></li>
  <li class="nav-item"><a href="#">COLUMN</a></li>
  <li class="nav-item"><a href="#">OTHER</a></li>
</ul>

.nav-item {
  margin-top: 20px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.3rem;
}

.nav-item a {
  display: inline-block;
}

.nav-item a::after {
  content: "";
  display: block;
  width: 0;
  margin: 6px auto 0;
  border-bottom: 1px solid #7c5119;
  transition: width 0.3s ease-in-out;
}

.nav-item a:hover::after {
  width: 100%;
}

ポイントは以下の2点。

  • 中央寄せ (margin: auto;)

    • 擬似要素の左右の余白を自動（auto）にすることで、要素がリンクの中央に配置される
    • 初期状態（width: 0）でも中央にいるため、ホバーした際に幅が中央から均等に広がる

  • アニメーションの効果 (transition: width)

    • アニメーションによって、幅（width）が時間をかけて変化するため、中央から左右に伸びるように見える
ShionShion

display: table; の使い方

<div class="parent">
  <div class="child">text1</div>
  <div class="child">text2</div>
  <div class="child">text3</div>
</div>

.parent {
  display: table;
  width: 100%;
  border: 2px solid red;
}

.child {
  display: table-cell;
  border: 2px solid green;
}

子要素に display: table-cell を指定するとウィンドウ幅いっぱいに横並びになる。

子要素同士に間隔をあけたい場合は、親要素に border-collapse: separete を指定し、border-spacing プロパティに間隔を指定する。

.parent {
  display: table;
  width: 100%;
  border: 2px solid red;
  border-collapse: separate; /* NEW!! */
  border-spacing: 20px 5px; /* NEW!! */
}

参考：
https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse
https://developer.mozilla.org/ja/docs/Web/CSS/border-spacing

ShionShion

HTML の属性をCSSセレクタに使用する

以下のように記述する。

[属性名=属性値]

下記のように書いた場合、type 属性が text の input 要素が当てはまる。

input[type="text"] {
...
}
ShionShion

block, inline-block, inline の違い

block

  • 幅が親要素いっぱいに広がる
  • 次の要素は改行されて配置される
  • 例: <div>, <p>

inline-block

  • インライン要素のように横に並ぶが、高さや幅を指定できる
  • 例: <img>, <button>（スタイルにより変更される場合もあり）

inline

  • コンテンツの幅だけを使用する
  • 次の要素は改行されず、横に並ぶ
  • 例: <span>, <a>

見分ける方法は、Devツールで display をみて確認したり、実際に横に並べて確認したり。

ShionShion

レスポンシブWebデザインとは

どのデバイスでも同じHTMLを表示しつつ画面幅によって動的にCSSを切り替えて常に最適な表示が行われるようにするのを、レスポンシブWebデザインという。

まず、閲覧しているデバイスの幅と同じ幅を指定するために head 要素の子に meta タグを追加する。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

これを設定しないと、デフォルトでは、ビューポートの幅はおよそ980px（多くのブラウザでの初期値）として扱われるためモバイル端末でウェブページが縮小表示されてしまうことが多く、文字が小さすぎて読めない、クリックしづらいなどの問題が発生してしまう。

ShionShion

メディアクエリとは

メディアクエリとは、「こういう場合にはこのスタイルを有効にする」といった具合で、閲覧環境によってリアルタイムにCSSの有効・無効を切り替えられる機能。

例えば、印刷時にのみ適用する print キーワードなどがある。

@media print {
  .sample {
    color: black;
  }
}

また、画面の幅を基準にするためのメディアクエリもある。

@media (width: 320px) {
  .sample {
    color: red; /* viewportの幅が320pxの場合に適用される */
  }
}

@media (min-width: 320px) {
  .sample {
    color: blue; /* viewportの幅が320px以上の場合に適用される */
  }
}

@media (max-width: 320px) {
  .sample {
    color: yellow; /* viewportの幅が320px以下の場合に適用される */
  }
}
ShionShion

CSS プリプロセッサとは

そもそも、プリプロセッサって？

プリプロセッサ（preprocessor）とは、ソフトウェアの役割による分類の一つで、ある中心的な処理を行うプログラムに対して、その前処理(preprocess)を行うプログラムのこと。プログラミング言語のコンパイラの前処理を行うものが非常に有名。

https://e-words.jp/w/プリプロセッサ.html#google_vignette

要するにプリプロセッサは、前処理を行うプログラムのこと。

それを踏まえCSS プリプロセッサとは、独自の構文で CSS を生成するプログラムのこと。
ほとんどの CSS プリプロセッサーは、純粋な CSS には無い、ミックスイン、セレクターの入れ子、セレクターの継承などの機能を追加している。これらの機能によって、 CSS の可読性や保守性が向上する。

https://developer.mozilla.org/ja/docs/Glossary/CSS_preprocessor

代表的なものに、Sass がある。

https://sass-lang.com/

このスクラップは15日前にクローズされました