app note(アップノート)はiPhoneをもっと楽しくするための情報を提案します!

app note

コラム

【保存版】破綻しにくいCSS設計で必要な5つのルール

投稿日:

プログラミングにおいて、破綻しないコードを組むのは大切ですが簡単なことではありません。
これで完璧と思ったコードが、ふたを開けてみるとボロボロになっているのは誰もが通る道です。
ですが、仕事の現場でミスは少しでも避けたいですよね。
そこで、今回は破綻しにくいCSSを組むためにはどういう工夫をしたらいいのか、5つのポイントを挙げて解説していきます。
これで、あなたのスキルが何倍にもレベルアップ!

スマホを乗り換えるなら!


機種変更では、このような失敗をする方がとても多いです。
  • 有料オプションを契約させられ料金が高くなった。。
  • 待ち時間や契約時間が長くて、半日かかってしまった。。
  • キャンペーンや割引がきちんと適用されていなかった。。
スマホを乗り換えるときには、
→ おとくケータイで乗り換えキャッシュバックをもらう
で乗り換えをするとキャッシュバックがもらえます。

スマホの機種変更するときは、
→ソフトバンクはこちら
→ドコモはこちら
→auはこちら
キャリア公式オンラインショップがおすすめです。学割や限定キャンペーンなどがもっとももおとくな時期です。

1.HTMLの段階で工夫する

例えば、次のようなHTMLを書くと、対応するCSSを書くのに苦労します。
2016-02-17_111056
一見普通のコードですが、どこがいけないのでしょう? 実は、2行目の<h1>が問題。
もしここが、のちの修正で<h2>に変更されたら、7行目の<h1>も修正しなくてはいけなくなります。それをうっかり忘れたら……あとはお分かりですよね?
そこで、次のようなコードに書き換えます。
2016-02-17_111653
どこが変化しているかというと、まず2行目、<h1>にクラス名を付け加えていますね。
そして7行目の指定を要素セレクタではなくクラスで指定します。
こうすることで、後で2行目の<h1>を修正してもそれ以外は書き換える必要がありません。
最初に書くときは面倒でも、こうして手間をかけることで後々の負担を減らすことができるのです。

2.複数人で編集するときはコメントを書く

1人で編集するときも、できるだけコメントアウトで「何を追記したのか」「このコードの意味は何か」など、邪魔にならない範囲でコメントを書いておくのが望ましいでしょう。
特に複数人だと、他の人がどういう意図でそのコードを書いたのか、分からなくなることが多々あります。
そういうときは、面倒くさがらずにきちんと説明を書きましょう。
また、見やすいコードを書くためには行間を空けたりインデントを付けたりと、そういった基本を守ることも非常に大切です。

3.記述順・詳細度に注意する

基本的に、CSSでは同じスタイルを記述した場合、後に記述した方を優先します。
同じスタイルが重複して書かれて無駄なコードが出ないよう、チェックすることが大切です。
さらにここで注意することがあります。それが「セレクタの詳細度」です。
これが強いセレクタほど優先して反映されるため、詳細度を考えずに書かれたコードは破綻します。
セレクタの詳細度の順位は
全称セレクタ < タイプセレクタ < クラスセレクタ < 属性セレクタ < 疑似クラス < IDセレクタ < インラインスタイル
となっています。
右に行くほど強いです。
どのセレクタがどれに所属するのかよく調べて、できるだけ同レベルの詳細度で記述するように心がけましょう。
詳細度がばらけたときは、高いものを後方に記述します。

4.CSSファイルは分割せず1つにまとめる

CSSファイルというものは、分割しない方がメリットがあります。
HTTPリクエストを減らせる、詳細度の管理が容易になる、ファイルのロード順に伴うトラブルが起こらない、など。
どうしても分割が必要なケースもありますが、そうでないときは極力1つのファイルで作業するようにした方が、破綻は少なくなります。

5.いきなりCSSを書き始めない

更新頻度が高いWebサイトで「なんとなく」でCSSを書くと、のちの更新で必ずCSSが肥大化し、破綻につながります。
具体的な対応策としては、PSDやAIを見て共通部分を洗い出し、違いが些細なものであってもきちんと分類してメモをとる、ということです。
似たようなもの・関連があるものはメモしておくとさらに分かりやすくなります。
そして、出てきた共通部分の中から、関連性の近いものをまとめつつ、シンプルなコンポーネントから実装することを考えていきます。詳細になればなるほど、後の方に書きましょう。

最初の一歩が一番大事!手間を惜しまず丁寧なCSSを作る

後からCSSを修正すればするほど、つぎはぎで訳の分からないコードができあがります。
最初にきちんとしたCSSコードを書いておくことが、後で楽をする・破綻を防ぐ最大の対策です。共同開発のときは周囲との連係もとりながら、分かりやすく、かつ、高機能なCSSを書くようにしましょう。
参考サイト
CSS設計に関するヒント
CSSで気をつけたいことやつまづいたときのちょっとしたコード
開発者向けのWeb技術 CSS 詳細度
破綻しにくいCSS設計の法則15
CSS設計をどうやって行うのかまとめてみた

スマホの乗り換えで失敗する人の共通点

「機種変更してみたら、思ったより料金が高かった…。」なんてことありませんか?

いま、ショップの店頭で有料オプションや有料コンテンツに加入させらて、結局損をしてしまう人が続出しています。

スマホを乗り換えるときには『おとくケータイ 』などのオンラインショップを利用してください。

どんなショップよりも、賢くおとくに乗り換える方法です。
iPhone7も実質0円になり、学割などのキャンペーンや限定割引など、今月が一年の中でもっともおとくな時期です。


→ おとくケータイで乗り換えキャッシュバックをもらう (電話がおすすめ!)
→ソフトバンクはこちら
→ドコモはこちら
→auはこちら

-コラム

Copyright© app note , 2019 All Rights Reserved.