変更に強いCSSを考える

変更に強いCSSを考える

  • 2016.11.21
  • ひらの

壁|^・ω・)/< こんにちは、ひらのです。

今回は「変更に強いCSSを考える」です。

過去に CSS3で錬金術してみよう なんて記事を書きましたが
もう少し実務的なCSSについて書こうと思います。

変更に強いCSSとは

webページなどを作成していると、
テキスト画像などは差し替える頻度が高くなります。
最初はダミーを入れていたけど、途中で本番用に差し替えたり…

漢字表記だったものをひらがなに変えたり…(逆もしかり)

その時に、cssファイルを触らずにhtmlの該当箇所だけ直すことができる状態が一番時間も労力もかかりません。

「えっ…テキストの変更ならCSS関係ないじゃん!」
「背景画像じゃなければCSS関係ないじゃん!」

と思いがちですがHTMLの変更が入ると、CSSも変更しないといけない…というのはよくあることです。

負の連鎖

CSSを書いて…「デザイン通りにできた~!完璧っ(`・ω・´)b」と思っていると

「○○のテキスト変更して」
「□も追加して」
「やっぱり★は削除で」

など、変更が入ることが多いです。

cssファイルを作成した直後に変更が入るのは自分が書いたcssを理解しているので修正はちゃっちゃと終わるのですが…

3か月後…6か月後…に変更が入ることもあります。

そうなってくると以下のような負のスパイラルに突入することもあります…
 
ヘ(・ロ・ヘ)。oO(ココを追記して…このスタイルは不要だから消して…)

Σ(゚д゚;)。oO(さっき消したスタイルで違うところが崩れた!?)

ヘ(・ロ・;ヘ)。oO(直さなきゃ…上書きスタイル書いて…)

。゚(゚´Д`゚)゚。 。oO(うわぁぁ上書きしすぎて収拾つかないよぉ~!!!!)
 

そうならないために、あらかじめ変更が入っても崩れないスタイルを作成していくようにすると
あとで楽ちんだったりします。

よくある負の連鎖


 
このような表示レイアウト作りたいときに、下記のようなHTMLを作成したとします。

「月日」と実際の「2016年●月●日 ●曜日」は隣に並べたいのでcssでfloatをかけます。

これで、作りたかったレイアウトが作成できました。
 

変更1 :【「月日」は「日にち」に変更】


 
dd の開始位置がずれてしまいました…
位置を揃えるために dt に幅を指定します。


 
揃いました。
 

変更2 :【「日にち」は「2016年●月●日 ●曜日~2016年□月□日 □曜日」に変更】


 
長くなった dd が右端で折り返してしまいました…
読みにくいので修正します。


 
dd の開始位置を揃えました。
 

変更3 :【「場所」の次に「備考」を追加】


 
 

変更4 :【「場所」を「集合場所」に変更】


 

dtに指定した横幅で「集合場所」が改行してしまいました…
しかも先ほど追加した「備考」が「集合場所」のエリアに食い込んでいます…

dtは改行させたくないので、幅を修正します。


 
「日にち」の dd の開始位置がずれてしまいました…
さっき直したのに…

dd のpadding-left を修正…
 
テキストの変更に合わせてCSSも修正してきましたが、
変更が入るたびにCSSファイルを開いて該当箇所を探して修正する…

というのは大変です。ヘ(・ロ・;ヘ)

変更が起きそうな場所を予測しておく

デザインの段階でOKだったとしても、実際にブラウザで表示してみると
fontの違いや、OSの違いなどで印象が変わることがあります。
テキストや画像などはブラウザで見るようになってから変更がかかることも多いです。
 

  • 文字数が増えても大丈夫か
  • 行数が増えても大丈夫か
  • テキストを画像に変えても大丈夫か
  • 構造を分解できないほど複雑になっていないか

といったことを考えながらCSSを記述すると良いかと思います。

具体的には?

先ほどの例で、最初に作ったCSSを下記のように指定しておくと良いと思います。

 

  • dt はあらかじめ幅を指定します。
    これは後々変更になってしまうかもしれない部分なのですが…
    dd の開始位置を常に揃えるためにも幅指定はあったほうが良いと思います。

    そして float の前で「clear: both;」で回り込みを解除します。

  • dd にも幅を指定します。
    そして、「float: left;」を指定します。
  • dt と dd を囲む dl 要素も幅を指定します。
    そして、子要素がすべてfloatしている状態では高さを維持できないので
    overflow: hidden;」でエリアを確保します。

このCSSの指定をしておくことで、
dt が2行になっても、 dd が2行になっても、左右のfloatは維持された状態にできます。

すると… 変更1、変更2 の変更時にCSSを触る必要はなくなります。

変更4 では dt と dd の幅を調整する必要がありますが、その変更によって

「備考」が「集合場所」のエリアに食い込んでしまう…
dd の開始位置がずれた…

ということは起きません。

これで時間も労力も温存できました。( ˘ω˘ )メデタシメデタシ

PAGE TOP

PAGE TOP