acokikoy's notes

{"勉強中":"Python","注目":"Shopify","LOVE♡":["ABARTH595","TA-GG9","Ukulele","Movable Type","ガーナ ミルクチョコレート"]} なWebディレクター

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

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

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

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%の白い線。