今日の積み上げ

日にち	学習時間	累計
19日目	3時間	30時間

デイトラ Web制作コース
中級編 DAY9 〜 10

やったこと

CSSの基本設計からクラスの付け方を学習した
AdobeXDをダウンロードして基本的な使い方を学習した
AdobeXDを使ってPC版Webカンプを作成した

学習のまとめ

DAY9

クラスの付け方について4つの重要な考え方を学びました。

共通化する
コンテンツを分離する
影響範囲をわかるように命名する
状態を管理する

1. 共通化する

OOCSS（Object Oriented CSSの略）の設計思想の一部を学びました。
Bootstrapの設計思想を例に上げてみます。
Bootstrapのボタンには.btnという構造を指定したうえでprimaryやdangerといった見た目を足しています。
これは.btnという共通のクラスを用意することにより、コードの重複がなくなり、コード量が減るメリットがあります。

２．コンテンツを分離する

OOCSSの設計思想にはコンテナとコンテンツの分離があります。
親であるコンテナとその子であるコンテンツを分離して、コンテンツを使い回すことができるようにします。

3. 影響範囲をわかるように命名する

BEMというCSS設計の命名規則を使うことで、クラス名から影響範囲をわかりやすくすることができます。
BEMとはBlock・Element・Modifierの頭文字をとった設計思想です。
Blockで指定したクラスに対して、子孫要素をアンダーバー２つ__で繋ぎ命名します。
また見栄えを拡張するクラスとしてModifierが存在します。

.[Block]：親要素
.[Block]__[Element]：子要素
.[Block]__[Element]--[Modifier]：見た目の要素

4. 状態を管理する

SMACSSというCSS設計手法の「ステート」のこと。
状態を管理するためのクラスの命名方法で、JavaScriptやjQueryの「要素を○○したときに○○をする」といった処理の際のクラス名に使う。Sassだと＆でつなぐことが多い。

.btn：通常のボタン
.btn.is-active：ボタンがクリックされた状態

DAY10

AdobeXDをダウンロードして、基本操作とよく使うショートカットキーを学びました。

つかむ：V
四角形を描く：R
アートボードを描く：A
テキストを挿入する:T
戻る：⌘ ＋ Z

PC版のWebカンプを作成しました

見本を見ながら、見本と同じWebカンプを作成しました。
これでAdobeXDの基本操作に慣れることができました。

感想

今日で中級編も折り返しです。
次回カンプを作り終えたら、いよいよカンプどおりコーディングします。楽しみです。

neko