2022/01/10 (更新日: 2022/03/29)

CSSが効かない時にチェックすべき3つのこと

Code

「CSSが効かない」　「どうしてもデザインがくずれる、、」

困っているそこのあなた。
ちょっと手を止めて、下の5つのポイントを確認してほしいです。

本記事の内容

• 【外部のCSSから】読み込む順番に注意する
• divから脱却する
• body自体に（margin:0以外の）スタイルを付けるのは微妙
• 【おまけ】marginは相殺が起きるので、上下どちらかに統一する

ぼくはHTML/CSSを勉強し始めて1ヶ月です。学習は主にドットインストールで行なっています。
（a）

CSSフレックスボックス特訓クラスに参加してきまして、習ったことを忘れないように備忘録としてまとめます。

外部のCSSから読み込む順番に注意する

外部のCSSで使われているセレクタをうっかり使っていた場合、外部CSSをあとに読み込むと上書きされてしまいます。自分のCSSは最後に読み込む習慣をつけましょう。

 

divから脱却する

NG

<div class="container">
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<div class="pic">
<div class="pic1">pic1</div>
<div class="pic2">pic2</div>
<div class="pic3">pic3</div>
</div>

ぼくはdivから脱却するために、コチラのサイトを参考にしました。ちなみにTwitterのつぶやきコンポーネントにはarticleが使われています。クラス名を考えるのは難しいんですが、誰が見てもわかりやすいようにするべきです。

使いそうな名詞

VSCode でファイル保存時にPrettierに自動整形してもらう方法もありです。

body自体に（margin:0以外の）スタイルを付けるのは微妙

NG

body {
　　margin: 40px 16px auto 16px;
}

body自体に（margin:0以外の）スタイルを付けるのはやや微妙です。理由は、bodyの左右にmarginをつけてしまうと幅100%の要素が配置できなくなるからです。

OK

body {
 margin: 0;
}

article {
 width: min(calc(100% - 32px), 600px);
 margin: 0 auto;
}

左右に余白が欲しければ、articleスタイルなどに幅をつけたほうがいいです。
 

marginは相殺が起きるので、上下どちらかに統一する

 
marginは相殺が起きるので、上下どちらかに統一するのがおすすめ。ぼくはmargin-top派になります。
https://qiita.com/yama-t/items/da7740769cfc0f8446a0

code

• facebook
• Tweet
• hatebu
• LINE
• Read Later