1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 - izudon/izudon.github.io GitHub Wiki

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

そうですこの本を読んで、20年前の古いウェブ知識から更新しなければならない部分を抜書きしていこうと思う。

レスポンシブデザイン

モバイルなどの幅の狭いデバイスのときどこをどうしたいか。

  • カラム数を減らす（３カラムレイアウトを２カラムに、２カラムを１カラムに...）
  • ナビゲーションメニューをメニュー用のアイコン内にまとめる。

1. viewport 指定

<meta name="vieport" content="width=device-width, initial-scale=1">
  • デフォルトだと、幅の狭いデバイスはページ全体を縮小してその幅に合わせようとする。
  • このビューポート指定はこの動きを回避し、幅の狭いデバイスなりに表示させる。

2. メディアクエリ

@media ( max-width: 600px ){
    h1 {
        color: #0bd;
    }
}
  • 幅が狭い場合限定のスタイルを記述できる機能。
  • 上記は 0〜600px の幅の場合にだけ「文字色：青」が適用される。

レイアウトの新知識

Flexbox

.container{
    display: flex;
    justify-content: space-between;
}

CSS グリッド

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 6%;
  margin-bottom: 50px;
}
  • 親要素に display: grid; を設定すると、子要素が格子状に並ぶレイアウトとなる。
  • 同時に gap: を設定し、要素と要素の間隔をダイレクトに指定することができる。
  • 同時に grid-template-columns: を設定し、行あたりの要素数などを指示する。
    • fr 1fr 1fr 1fr で 同じ幅で横に３つ並べよという指示になる。
      • 単位 fr では、ウィンドウの幅からの親要素の幅の変動で、伸縮する。
      • 単位 px などでは、伸縮しない。
    • repeat() repeat( 3, 1fr ) と書いても同じ意味になる。
    • minmax() repeat( 3, minmax( 240px, 1fr ) )
      • minmax( 最小値, 最大値 ) どんなに小さく/大きくしても、
        それ以下/以上には小さく/大きくしないという指定もできる。
        親要素の幅がそれより下/上回った場合は、端が切れ/余白が生まれる。
    • auto-fit repeat( auto-fit, minmax( 240px, 1fr ) )
      • 指定した最大最小値の範囲内で、親要素の幅に入れられるだけ入れるという指示になる。
      • 狭くなり 240px を下回りそう ー＞ カラムを１つ減らして大きめに表示。
  • grid-column: grid-row:
    • 子要素に grid-column: grid-row: を指定することにより、
      表計算ソフトでいう「セル結合」したような「大きな」子要素とすることができる。
    • grid-column: 1 / 3 第１−２列を結合
    • grid-row : 1 / 3 第１−２行を結合
  • 画像のトリミング 
    • .big-box img {
  height: 94%;
  width: 100%;
  object-fit: cover;
}
    • 画像＋キャプションでグリッドレイアウトにし、セル結合すると、
      結合していないセルの画像と、画像の上端下端が合わなくなって、
      不格好になる。このため、（伸縮しても大丈夫なよう）％指定で、
      画像を若干小さめにする。
    • object-fit: cover;
      • このとき画像のアスペクト比が変わる可能性があるため、
        トリミングで処理する。img 要素に上記の指定をすると、
        あふれ出た 上下 or 左右 を均等にトリミングしてくれる。

絶対位置指定

  • 親要素 
    .parent {
    position: relative;  /* 前フリとして相対位置を指定 */
}
  • 子要素 
    .child {
    position: absolute;  /* 絶対位置 */
    top: 0;
    left: 5px;  /* 親要素からの相対位置 */
}
    • 後続の子要素は当該要素がまるで存在しないかのようにレイアウトされる。
      ＝ 絶対位置指定すると周囲から「浮く」。

豆知識

背景指定

  • background-size: cover で「（伸ばして）埋める」、
    （幅か高さの足りない方向へアスペクト比固定で引き伸ばす）、
    background-size: contain で「（縮めて）含める」、
    （幅か高さのはみ出す方向をアスペクト比固定で要素分に縮小）（pp.124-125）。
  • background-position: top center で範囲上部中央位置からになり、
    background-position: 30px 80px で +30+80 位置からになる（pp.126-127）
  • 背景画像に色を重ねられる（乗算、スクリーン、オーバレイなど方式指定できる） 
    background-color: #0bd ;
background-blend-mode: overlay ;
  • 背景色を（線形または円形）グラデーションにできる。 
    background-image: linear-gradient(#c9ffbf, #ffafbd);
  • 背景色をグラデーションにして背景画像に重ねられる。 
    background-image: url(/images/main-bg.jpg), linear-gradiend(#c9ffbf, #ffafbd);
background-blend-mode: luminosity;

ブロック要素

  • <div> 以外にも様々なブロック要素のタグがある（pp.83-85）
    • <header> - ヘッダ部
    • <nav> - ナビゲーションメニュー
    • <section> - まとまり
    • <main> - メインコンテンツ
    • <aside> - サイドメニュー
    • <footer> - フッタ部
    • <div> - 特に意味を付与しない「まとまり」
  • border-radius: で角丸にできる。
    • border-radius: 5px ４隅に５ピクセルの角丸。
    • border-radius: 50% 円形のブロックになる。

リセットCSS

ブラウザ毎に異なるデフォルトのCSSを一旦リセットするためのCSS。
全部リセットするものや基本的な設定は残すものなど様々な種類がある。

その他

  • 色を半透明指定にできる（p.210） 
    border-top: 1px, rgba(255,255,255,.5) solod;
  • IDを使ってページ内リンクを作成できる（p.151） 
    <div id="section01"></div> <- <a href="#section01">section01</a> -- こういうのが可能。
  • 箇条書きの番号に平仮名やカタカナのアイウやイロハ、漢数字などが使える（p.144） 
    <ul style="list-style-type: katakana-iroha"></ul>
  • line-height 単位指定なしで「行高の何倍」の意味に解釈される（p.135） 
    <p style="line-height: 1.2"></p> -- 行高の1.2倍が行送り。
⚠️ **GitHub.com Fallback** ⚠️