こんにちは、田中真奈美( @momo29_aus )です。
この記事ではあしざわさんのWS(ワークショップ)に参加した感想と、得られた学びについてまとめています。
さらに「CSSの変態」笑のライブコーディングも見れてよい1日でした😉
20:00-23:00(私は23:30の延長まで参加)の間は、質問に回答してもらったりほかの参加者の方たちとの交流があったり、自粛期間で交流が希薄になる中いい時間が過ごせました。今日からも頑張ります🍑
— 田中真奈美🍑WEBクリエイター (@momo29_aus) May 11, 2020
学び
- コンテンツを固定しない、余白を固定する(余白はつくるもの!)
- pxは8の倍数で設定する
- 実装の順番は好きなところからでOK、でもスマホ→PCでやること
- コーディングは箱と中身で切り分ける
- コンテンツの切り分けは、スマホ版とPC版両方のカンプを見ながらやる
/* containerの余白の決め方 */
.card {
width: calc(100% - 32px * 2);
max-width: 1200px;
}
/* cardの余白 2カラムの時、2の倍数番目「以外」のcardの右に余白をつける*/
.card not(:nth-child(2n)) {
margin-right: 30px;
}
/* cardの余白 3カラムの時、4番目以上のcardの上に余白をつける*/
.card nth-child(n+3) {
margin-top: 80px;
}
感想
・教科書的な知識じゃなくて「〇〇と考えるから△△する」っていうあしざわさんの頭の中が知れて有意義だった
・あしざわさんのWSのスタンス
自分が独学でやってきたから初学者を応援したい
(いまはそういうフェーズに入っていると思う、とのこと!)
&
独学でやってきたからこそこれでいいのか?という思いもある。
クリエイターの先輩方たちにも見てもらいたい
↓
前者は有料、後者は無料で招待
↓
WSのターゲット層が「初心者」だけじゃなくて幅広く見込める!
知れてよかったこと
自分ルールを確立させるための考え方
自分オリジナルのコードの型(Boostnoteへストック)をつくるのに参考になる知識が知れた
お弁当箱(箱と中身)
たとえがうまくてすんなり理解できた
お弁当は何からつくってもいいし、箱と中身は切り分けて考えるもの
まずは余白固定する
NG:コンテンツの幅を決めてから余った部分を余白にする
OK:余白を決めてからコンテンツの幅を決める
あしざわさんが実際に書いてるCSSを見れた
HTMLの構造はどういうルールを決めて組み立ててるのか?
headのmetaの中には何を書いてるのか?
具体的にどんなCSSを当ててる?
構造化のルール
__wrapper
__box
__patitionで構造を組み立てる
↓
patitionよりも深くしたくなったら構造を見直すべき、構造が複雑すぎる可能性あり
brにclassつける
スマホのときはここで改行、とかができる(@mediaの中で)
そのほか
・カンプのリアルな見方、考え方
・あしざわさんはブレイクポイントは1箇所しか設定しない(960px)
・タブレットはそんなに気にしなくてOK
・保守性に優れたCSSの書き方とその重要性
・デザインはアートじゃない、理屈が必要
相手を納得させることが重要
相手を納得させられれば仮にその理屈が結果として間違っててもいいと思う
コメント