普段は、インフラ周りを中心に開発を行なっているのですが、もう一つのプロジェクトでフロントエンドを触ることになったので、一から学び直しています。
基礎のところからどしどし書き残していきます。
HTML
基礎
コーディング規約
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
CSS
margin と paddingの違い
今さら聞けない、marginとpaddingの違い | たねっぱ！
display
下記がかなり全てを物語ってくれています。
width, height
基本的には、emか%を用いる。
レイアウトやボックスなど大きい範囲のサイズ指定（特に、width）は、%を用い、
文字の大きさやちょっとした隙間などはemを用いる。
CSS設計の基本 - Qiitaより引用
個人的には、%をよく使用します。
flex
「display:flex」と指定すると、要素を「Flexboxコンテナー」として定義することができる。
[CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 東京のWeb制作会社LIG]より引用
(https://liginc.co.jp/web/html-css/css/21024)
いろんな使い方は下記から参照して選んで使っていく予定。
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends
Flexboxを利用してよくあるレイアウトを実装したサンプル集 | NxWorld
下記のような書き方をよくやります。
.container{display:flex;justify-content:center;align-items:center;}CSS設計
全然頭入ってないけど、今後やっていければと思っている分野です。
設計についても様々な手法があるようです。
- BEM
- FLOCSS
ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
以下などは直近ですぐ注意して実装できそうです。
・再利用は基本的に考えない
・セマンティックなclass名をつける
・基本的にimportant!は使わない
CSS設計の基本 - Qiitaより引用
