CSSデザインで一番最初に気をつけるべき３つのポイント
CSSで苦しんでいる人が多いようなので作ってみました。
うろ覚えの簡易版なので間違ってるところもあるかも。
ともかくボックスモデルとfrexboxとresetCSSさえ解れば大枠は作れるのでここを抑えましょう。
ボックスモデルの理解
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | ヌーラボ
この図を頭に叩き込みましょう。
- ボックスモデルを頭に入れる
- borderの位置にちゃんと入ってるか確認してください。paddingとmarginの間ですよ
- widthとheightはcontentに利きます。paddingじゃ無いですよ
- 今後gredデザインというのが主流になっていくっぽいですがそこでもボックスモデルは使われます
- つまり、陳腐化されにくい知識だよ
- ブロック要素とインライン要素の違いも合わせて覚えるが吉
frexは便利
フレックスボックスについて抑えましょう。
ボックスモデルが理解できていないと上手く扱えないのでボックスモデルの位置関係を先に把握しましょう。
- float left等はほとんど使わずにfrexで位置を決める事ができます。
- カエルのやつをやる Flexbox Froggy - A game for learning CSS flexbox
- 僕はこれを2回ぐらいやりました。
floatデザイン→flexboxデザイン→gridデザインという風に進化していっています。
次はgridデザインがくるのですぐ陳腐化するそうですが、今の所はfrexが便利ですよ。
rsetCSSについて知ろう
- ブラウザには初期設定のCSSがあります。
- そしてそれはGooglechrome、FireFox、Safari、IEなどブラウザごと違います。
- そのブラウザでも同じデザインで表示させたい為、CSSの一番最初に全てのCSSを上書きするCSSの設定を置きます。
- その後効かせたいCSSを書き込んでいきます。
- CSSには後に書いたCSSの設定が優先されるという仕様がある為こう行った方法で様々な種類のブラウザで同じデザインが表示されるように工夫しています。
- これをrisetCSSと言い、様々な種類があります。
- リセットされるといっても全ての設定を消すのではなく、使いやすいように良く使われる設定などが書いてあります。
- それが時代や状況によって違う為、複数のrisetCSSがあるのです。
- 自分の使うresetCSSについてある程度知っておくとCSSの指定をする時に混乱を少なくでき楽になります。
原因と結果の探り方
- 何をすべきかを考える
- 今自分が何をしたのかを知る
- その結果どうなったのかを知る
この繰り返しです。
単純なんですが今何やってんのか良く解らなくなりますし、何でこうなったのか解らなくなります。
少なくとも僕はなったぞ！
その対処法を紹介します。
今何をしたのかを明確にする
- どこ何を効かせたのかを解りやすくする
- 解りやすくする為にbackground、textに色を付けよう
- 色はそれぞれ解りやすく違う色に変えましょう。色調は最後に合わせればいいんです。
- 背景に色を付けることでピクセル単位のズレが解ります。
google console を使ってみる
- Macの場合 control＋クリック
- Winの場合 右クリック
でメニューが開きます。
- メニューから検証を選択
- これでgoogle consoleが開きます。
- コンソールのHTMLにマウスを合わせた場所がサイトのどの部分かが解ります。
- コンソールメニューの左上の矢印マークを押すと逆にサイトにマウスを合わせたHTMLの場所が表示されます。
自分が作ったサイトのデザインがどうなっているか？これで検証してみましょう
ボックスモデルが色分けで表示され、それが何pxなのかというサイズも解ります。
なのでどのCSSの指定が効いているのか、また効いていないのかが解ります。
大きな所から手をつける
大きなところから完成させ、徐々に小さい所を作り込んでいくという作りかたが楽です。
- まずは、hedder、nav、sidebar、content、fotterの位置を決めてみましょう。
- それが出来たら上のそれぞれのパーツの中身の位置を決める。
という順番でやっていくと良いと思います。
もっと知りたい方は↓こちらをどうぞ。
難しかった所
確かここが難しかったような
- calc()は便利だが理解に手間取った
- 巨大な画像をどうするか
- formのデザインが乱れる問題
- 図形を作る
終わりに
解らない所があったら教えてください。
答えをそのまま教えることは出来ませんがヒントは出せるかも!
