勉強ノート》「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」著:Mana

ゼロからコーディングすることはないとしても、何ができて何ができないかは知っとかないとね！。。ってことで、1日集中で、教科書片手にHTML/CSSを復習する作戦。
教科書にしたのは、Webクリエイターボックス Manaさんによる、ジュンク堂などでよく平積みされてる人気本。

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

モチベーション

• ゼロからコーディングすることはないとしても、何ができて何ができないかは知っとかないとね。
• 実際に手を動かし 今どきなコーディングの写経を通じて、脳内リバイズする。

学習note 。。というか覚え書き

本書も昨日のXD本同様 ハンズオン形式で、今どきなデザインのサンプルサイトを作りあげる構成。

• グラフィックツール: Affinity Photo, Pixelmator Pro ・・・ちょっとした画像加工用にどっちか欲しいなぁ。
• p111 - 121: 色の印象カタログとして使える。
• p152 - Flexbox

    display: flex;`
    flex-direction: row/row-reverse/column/column-reverse;`
    justify-content: space-between;

• p159 - CSSグリッド

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;   /* グリッド比率の指定単位 `fr` : fraction(比率)という意味。*/
    grid-template-columns: repeat(autofit, minmax(240px, 1fr);
    /* 画面幅に合わせて要素折り返し。アイテムがちっちゃくなりすぎないようminmaxで制限する。*/

    grid-columns: 1 / 3;
    grid-rows: 1 / 3  /* いっこだけ4倍サイズのグリッドアイテム（画像）にするとき p243 */

• gap プロパティ: グリッドアイテム同士の間隔指定

• order プロパティでカラム表示順制御

• p168 ress.css (リセットCSS)

• rem （root要素に対するem）, min-height: 100vh; vh=viewport height, vw=viewport width: viewportの高さを100としたときの割合。
• p192 ファビコン生成サービス Favicon Generator for all browsers and Google results pages
• p193 backgound-blend-mode
• p210 border-top: 1px rgba(255, 255, 255,.5) solid; 不透明度50%の白い線。