ホームページ制作MATSUTE BLOG

この記事は「2020年12月20日」に書かれた記事です

1. ページごとにCSSを記述している
2. !important　が乱用されている
3. CSSの設定が自分（設定者本人）にしかわからない
4. ページの更新時にタグ打ちが必要

それぞれ、ざっくり見てみましょう。

1．ページごとにCSSを記述している

会社概要　company というページと
お問い合わせ　inquiry　というページがあった場合にページごとに全く同じ記述を書いているのを見かけることがあります。

例1

.company h1 {
font-size: 2rem;
color: #333;
}

.inqury h1 {
font-size: 2rem;
color: #333;
}

ページが7～8ページあってもこの状態が続きます。
デザイン性の高いページで、各ページごとにh1のデザインが異なるというような場合は個別の設定が必要になりますが、基本的には同じデザインであることが多いです。この場合、一緒にすることができます。

h1 {
font-size: 2rem;
color: #333;
}

ボタンなど個別の装飾についても同様です。

例2

p. button {
display-inline:block;
padding: 0.3em 2em;
}

div.button {
display-inline:block;
padding: 0.3em 2em;
}

これもどのセレクタにスタイルをかけるかの違いで、設定の内容は全く同じです。
このような記述も一つにまとめられます。

.button {
display-inline:block;
padding: 0.3em 2em;
}

h1などの見出しやp、div、sectionなどのセレクタを書けば書くほど記述は複雑になり、あとから修正することが困難になります。セレクタごとに付与しない形であれば、複数の箇所で流量することもできます。同じコードは重複しないよう、共通で使用できるものに関しては設定を1つにまとめておきましょう。

2．!important　が乱用されている

ときおり、どれほどの設定がかかっているのか・・・と思うほど何をやってもCSSが反映されないことがあります。プラグインなどを使っている場合やテーマなどを使っている場合もありますが、そんなときは、ついつい強制的にCSSを適用できる「!important」を使ってしまします。

「!important」を使えば現状の設定は解決できますが、次に設定を変更したいときの解決方法がなく修正が困難になることがあります。ときおり、

ここに必要?

と思うところに「!important」が設定されていることがあります。「!important」は最終手段として使用するよう心がけましょう。

そのためには、CSSの優先順位を押さえておくことが大切です

CSSは基本的に後から記述したほうが優先されます。（上から下の順です）

時々、CSSの修正がまったく効かないと思って要素検索すると、下の方に同じ個所の記述が存在していて驚くことがあります。

CSSは上から順番にわかりやすく書きましょう。同じ記述を書かないようにメモを入れることも必要です。
また、ホームページ制作会社では自分以外の人間が修正することを想定して記述することも必要となります。

/* ここから見出し */

h1 ｛ 略 ｝

セレクタ種類 / 書き方による優先順位

※下に行くほど強い設定にになります。

• h1　などセレクタに書いた設定
• class「.」による設定
• id「＃」による設定
• style=”” （HTMLのソースに直書きしている）
• !important

乱暴かもしれませんが、セレクタなどは、重なれば重ねるほど優先順位は高くなります。たとえば、

dl dd h4｛ color: #000;｝
dl h4｛ color: #FFF;｝

という記述があった場合、順番の優先順位からみれば「dl h4」の方が優先されるはずですが、そのうえに「dl dd h4」とセレクタを重ねた設定があるため、ｈ4にはdl dd h4の方に設定した黒が反映されます。

3．CSSの設定が自分（設定者本人）にしかわからない

命名規則

こんな人はいないかと思いますが。たとえば、ボタンの設定をする場合

.1 {
display: inline-block;
padding:1em 2em;
border:1px solid #CCC;
}

と書いていると何を設定したかわかりません。説明を入れるという方法もありますが、

.1 { /* ボタンの設定 */
display: inline-block;
padding:1em 2em;
border:1px solid #CCC;
}

1に対してどのような内容を設定したのか、2がどのような設定だったか思い出すことが困難です。

個人的にはCSSの名称をできる限り短くしようとして使ってしまいがちなのですが、下記の「勝手に省略」も自分にしかわからない設定の一つです。

.bt {
display: inline-block;
padding:1em 2em;
border:1px solid #CCC;
}

button＝bt　誰が見てもわかるという記述ではありません。
というわけで、下記のようになります。

.button {
display: inline-block;
padding:1em 2em;
border:1px solid #CCC;
}

これなら一目でボタンの設定だとわかります。
もし色違いのボタンを設定したのであれば下記のようになります。

.button-red {
display: inline-block;
padding:1em 2em;
border:1px solid #C00;
}

パターンを作りやすくなりました。

クラス名を付与するとき

• 自分だけがわかるものは基本的に使用しない
• 改修作業をする際にわかりやすい命名規則にする
• パターン違いはバラバラに配置せず、わかりやすくしておく
• 命名規則だけで、どこにどのように設定したかわからないような、ホームページ固有の設定については /* 設定へのコメント*/を付与しておく

適度な区切り

不要な記述はできるだけ避けたほうが良いですが、ときどき最初から最後までなんの分岐もないCSSを見ることがあります。ぱっと見、何をどこに書いているかわかりません。

たとえば、スライダー部分であれば

/*　スライダー設定　*/

としておくとここからスライダーの設定だなということがわかります。

CSSをより分かりやすくするということであれば、
冒頭部分に、記述の順番を入れておくこともあります。

/*------
1 ヘッダー設定
2 スライダ―設定
3 フッター設定
-----------------------------------------*/

そのほか、共通で使う色を書いておくこともあります。

/*-------
文字色　#333
青共通　#
赤共通　#
背景色　#F2F2F2
----------------------*

参考にしたサイトのURLをメモとして入れておくこともあります。

/*　スライダー設定--------------
Thanks: http://kenwheeler.github.io/slick
------------------------------------*/

区切り方は/**/間であればどのような形でもよいので。区切りがわかりやすいものを工夫してみましょう。

/*===========================
ここに見出し（内容）
============================*/

個人的には横いっぱいに広がった形は、時々驚くほど折り返されてしまうので避けています。

4．ページの更新時にタグ打ちが必要

ホームページを作り始めたばかりの人に、ときおりみられるのが下記のような設定です。

<p class="mtop20">

この段落の上部に20px分のマージンを付与。この設定がPタグが登場するごとに付与されています。

問題ある？

• 自分のサイトであればOKですが、
• お客さんが更新するのであればOUTです。

自分で運営しているホームページであれば、自分でtagを追加すればよいだけなので良いので問題はありませんが、お客さんが更新する場合ｐタグにclassを付けてくださいとはとても言えません。

pタグにクラスを自動付与するようにしておけばよいのでは？

確かにそれでも解決できますが、過度な設定を減らしクラスを付与しなくてもよいように設定することが大切です。

CMS（wordpressなどの本文入力）で実現できないタグ

デフォルトのままでは本文入力が大変な場合、プラグインを入れて拡張しますがそれでもテキストで直打ちしなければならないタグもあります。

たとえば、<dl>タグ。
お客さんが更新する領域に、<dl>での表現を入れてしまうと更新が困難になります。

コピペして使えばいいのに

と思うかもしれませんが、ソース表示でコピーすれば過不足なくコピペできるものの、ビジュアルモードでは範囲が定まらないこともあります。また、内容を変更しようとした際に必要なタグが削除されてしまうといったこともよくあります。

HTMLに少し詳しいお客さんの場合は何とかなりますが、基本的には使わないように設定しておくことで、お客さんがスムーズに更新を行うことができます。wordpressでTinyMCE Advancedを使ったスタイルをする拡張方法については、wordpress編で書きたいと思います。