CodeIQ MAGAZINECodeIQ MAGAZINE

キーワードは汎用性!美しく、かつ効率的に作業がサクサク進むCSS記述テクニック5選!#css

2014.02.24 Category:技術コラム Tag:

  • 8
  • このエントリーをはてなブックマークに追加

コードは美しくあるべき。技術者なら誰もが有する美学ではないでしょうか。
美しいコードは見やすく、機能性にも優れているもの。そして高い機能性を実現するためのキーワードはズバリ、汎用性です!今回の記事では汎用性にスポットを当て、美しくかつ効率的に作業がサクサク進むCSS作成テクニック5選をご紹介いたします。
by hibikiYzk

見えない部分まで美しく

CSSは普段それほど人の目に触れないだけに、動けばいいやと細かいことはあまり気にせず記述することも多いものです。しかしCSSも立派なコード。コードは美しくあるべきの美学を突き詰めたいのが技術者というものでしょう。

さて、それでは美しいCSSとは一体どんなものなのでしょうか?インデントや改行を整えることが真っ先に思い当たるかもしれません。確かに見た目が美しいCSSは可読性も高く、素晴らしいものでしょう。しかし美しいCSSが美しい理由はそれだけではありません。汎用性の高い構造で機能性に優れていること、つまりコードに無駄がなく生産性が高い構造を持つことが、美しいCSSの条件ではないでしょうか?使いやすく分かりやすくしかも見た目も美しい。美しいということは無条件に心地がよいものです。

それでは、次の章からはそんな美しいCSSを記述するためのテクニック5選を順にご紹介していきましょう!

明日から使える美しいCSS記述テクニック5選!

1.部品の共通化

CSS全体を見渡してみて同じようなコードが何度も書いてあったら、共通化してしまいましょう。例えば下記のコードは2つの異なるボックスの見栄えを調整したクラスですが、よく見ると違いは文字色だけで残りは同じです。

/* 赤文字のボックス */
div.redContents {
    margin:0 0 10 10;
    border:1px solid #eae8e9;
    font-weight:bold;
    color:#FF0000; /* 文字色:赤 */
}
/* 黃文字のボックス */
div.yellowContents {
    margin:0 0 10 10;
    border:1px solid #eae8e9;
    font-weight:bold;
    color:#FFFF00; /* 文字色:黃 */
}

これを共通部分と固有部分に分割してみます。すると下記のように、コードの重複記述がなくなりました。
共通で切り出せる部品は共通化し、同じコードがだらだら続くのを纏める。これだけでもすっきりと見やすいCSSへと変身します。

そして共通化を行うことで汎用性も高まります。汎用性が高いということは似たようなコードを何度も書く手間と行数を軽減することに繋がり、ソースの可読性向上や開発効率の向上に繋がってゆくでしょう。

/* ボックスの共通クラス */
div.contents {
    margin:0 0 10 10;
    border:1px solid #eae8e9;
    font-weight:bold;
}
/* 文字色設定:赤 */
div.red {
    color:#FF0000; /* 文字色:赤 */
}
/* 文字色設定:黃 */
div.yellow {
    color:#FF0000; /* 文字色:黃 */
}

2.クラスの複数実装

では共通化によって切り出したCSSはどのように実装するのでしょうか?
HTML側では下記の様に記述します。

<div class="contents red">赤文字のボックスです</div>
<div class="contents yellow">黃文字のボックスです</div>

上のコードではボックスの共通クラスと文字色設定クラスの複数のクラスを実装しています。このように、クラスは複数実装が可能です。その特性を活かして共通部分をなるべく使い回すと、ちょっと飾りを付けるだけで似たようなクラスの大量発生を防ぐことができるというわけです。

共通化の部分でも触れましたが、ソースが無駄に長くならないということはソースの可読性が向上します。またメンテナンスの際にあそこも直さなくちゃいけない、ここも直さなくちゃいけないとイライラする心配がないのも、共通化のメリットです。

3.セレクタのグループ化

次は異なるセレクタに同じ要素を設定したい時に使えるテクニックです。異なる複数のセレクタにmargin:10 0 10 0;を設定したいとします。


#contents table { margin:10 0 10 0; } #contents ol { margin:10 0 10 0; } #contents ul { margin:10 0 10 0; } #contents dl { margin:10 0 10 0; }

ご覧のように同じコードがずらりと並んでいます。これだけのコードを記述するのは面倒ですし、同様の設定を行うセレクタが増えれば増える程、値の変更時にも手間がかかってしまいます。そこで有用なテクニックがセレクタのグループ化です。要素をカンマで区切ることで複数のセレクタに対してスタイルを適用させることができます。グループ化を行うと、下記のように短いコードですっきりと纏めることができます。

#contents table, #contents ol, #contents ul,#contents dl {
    margin:10 0 10 0;
}

4.記載ルールの統一化

1〜3では機能性を高めるためのテクニックについてスポットを当ててきましたが、もちろん見栄えも大切です。特にインデントや改行ルールの統一化を行うと、グッと見やすく美しいCSSになります。またこれはCSS以外のコーディングにも共通することですが、命名規則も統一化を行うとより見やすくなります。命名規則はスペースを詰めて次の語を大文字から始めるキャメルケース(contentsRed)やスペースをアンダースコアに置き換えるスネークケース(contents_red)などが有名ですが、命名にも気を配ることで可読性や機能性が高まります。

また、インデントや改行などの体裁は自動で整えてくれるサービスもありますので、時間がない時やソースが膨大で整備が大変な場合には、そのようなサービスを利用してサクッと整形するのもひとつの手です。

Format CSS Code
体裁を美しく整えてくれることはもちろん、オプションがかなり細かく指定できるので自分好みにカスタマイズできるのがFormat CSS Codeの嬉しいところです。

ProCSSor
使い勝手の良さが人気のProCSSor。
こちらも改行スタイルやインデント、CSSの書き方などを指定することができます。

CSSbeautify
CSSbeautifyはWeb版のほかにコマンドラインで実行するためのnodeパッケージが用意されています。わざわざWebサイトにアクセスするのが面倒だったり、コピペが面倒な時に重宝します。

5.適切なコメント

書いている最中はつい面倒で書き飛ばしてしまいがちなコメントですが、少し時間が経ったらなぜこんなコードを書いたのかわからなくなった、という経験はありませんか?お恥ずかしながら私はよくあるのですが、半年前の自分は別人という言葉が示す様に、記述している時には理解していてもそれが継続するとは限りません。また、大きなプロジェクトなら自分以外の人がCSSを修正することもあると思います。そんな時にコメントが記載されていれば親切ですし、解析に余計な時間を割かなくてよいのでメンテナンス性も向上します。

CSSの美しさはコードだけではありません。
使う人のために過不足のないコメントが記載されている心遣いもCSSを美しくするポイントでしょう。

「動けばいい」ではもったいない!

「見えない部分まで美しく」とはかのスティーブ・ジョブズの有名な美学です。
汎用性の高い構造で機能性に優れていること、そしてもちろん見た目も美しいCSS。このようなCSSなら、開発効率やメンテナンス性もぐっと上昇するのではないでしょうか。作業をサクサク進めるためにも、またCSSの美しさを追求するためにも、これらのテクニックを是非お役立て頂ければと思います。

CodeIQコード銀行にあなたのコードを預けてみませんか?

  • CodeIQコード銀行ではあなたのコードを財産と考えます。
  • お預かりいただいたコードは、CodeIQコード銀行がしっかり評価し、フィードバックいたします。
  • 当コード銀行にお預けいただいたコードは、企業がみてスカウトをかける可能性があります。
  • 転職したい方や将来転職することを考えている方で、今の自分のスキルレベルを知りたい方はぜひ挑戦してみてください。
  • 企業からスカウトがきたら困る人は挑戦しないでください。

興味を持った方はこちらからチャレンジを!

  • 8
  • このエントリーをはてなブックマークに追加

■この記事を書いた人

avatar

hibikiYzk

大阪を拠点に活動するwebクリエイター/フリーライター。「やりたいをカタチに」をスローガンにweb制作や記事の執筆活動を行っています。システム開発やweb制作現場での経験を元に、日常の業務でちょっと使えるネタをご紹介していきます。

■関連記事

あなたは大丈夫?今さら間違えたら恥ずかしいHTML/CSS用語の読み方 #HTML #CSS... 正しく読んでいますか?プロでも読めない意外な事実 HTMLタグやCSSプロパティの読み方は多種多様、実は正式な読み方というのはあまり浸透していません。それだけ制作現場ではあまり重きを置かれない読み方。 特に面白いのが横幅を指定する"width"。正しくは"ウィズ"(厳密に発音するとdを微妙に発音...
レスポンシブWebデザインを実現する3つの技術を簡単解説 #HTML5 #CSS... レスポンシブWebデザインは魔法じゃない! 例えばPC閲覧時に表示されていたバナーやメニューがスマホ閲覧時だと表示されなくなったり、全く違う形のコンテンツに変化していたりと何かとトリッキーな動きをしがちなレスポンシブWebデザイン。 そんな魔法のような事を実現させるには何かとんでもなく難しい...
面倒なページネーション実装よさらば!jQueryでサクッとページネーション実装を実現するプラグインは... ページネーションとは 長いコンテンツの表示に良く利用されるページネーション。ページャーやページ送りとも言われます。ページネーションは、長い文章を複数のページに分割して各ページへのリンクを並べアクセスしやすくする、もしくは一枚のページの内部で長い文章を分割し切り替えて表示する機能のことです。デザ...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ