【保存版】絶対に破綻しないCSSの設計を学ぼう

Web制作

2018年09月21日

CSSSの設計

CSSSはシンプルで理解しやすい反面、破綻しやすい言語ともいわれています。

サイトの規模が大きくなるにつれ、CSSのコード量も増えます。

そのような場合、重複しているコードや無駄なコードなどが発生してしまうことが多いです。

CSSをできるだけスマートかつ扱いやすいようにするのがCSSの設計です。

CSSを設計する上で、意識するポイントは以下の3つになります。

・保守性
・可続性
・再利用性

この3つを維持し続けるのが、CSSを設計する目的です。

具体的な方法をこれから説明します。

CSSの名称

CSSの設計を説明する前にCSSの各パーツの名称について説明します。

セレクタ

セレクタとは、スタイルを適用させたい対象をいいます。

以下のようなモノがセレクタとして設定されます。

・id名
・class名
・pタグ
・hタグ
・aタグ
・ulタグ
・liタグ
・headerタグ
・sectionタグ
・mainタグ
・asideタグ
・articleタグ
・footerタグ

下のサンプルコードでは、pタグがセレクタになります。

CSS

p{
    color: #222;
    font-size: 16px;
}

宣言ブロック

宣言ブロックは、初めの括弧から終わりの括弧までになります。

下のサンプルコードでは、{color: #222;font-size: 16px;}が宣言ブロックです。

CSS

p{
    color: #222;
    font-size: 16px;
}

宣言ブロックは1つ以上の宣言で構成されています。

宣言

宣言は、プロパティと値の組み合わせです。

下のサンプルコードでは、「color: #222;」「font-size: 16px;」が宣言になります。

CSS

p{
    color: #222;
    font-size: 16px;
}

プロパティ

プロパティとは、適用させるスタイルを指定することです。

下のサンプルコードでは、「color」「font-size」がプロパティになります。

CSS

p{
    color: #222;
    font-size: 16px;
}

値

値とは、適用させるスタイルの内容です。

下のサンプルコードでは、「#222」「16px」が値になります。

CSS

p{
    color: #222;
    font-size: 16px;
}

理解するべきCSSの2つの特徴

CSSの設計を説明する前に、CSSの特徴について説明します。

CSSの特徴は「継承」と「カスケード」です。

この2つの特徴について説明します。

継承

継承とは、子孫関係でプロパティの値を引き継ぐことです。

継承を理解するために、まずは親子関係などの説明します。

以下のサンプルコードを例にして解説します。

HTML

<html>
    <head>
        <title>親子関係の説明</title>
    </head>
    <body>
        <h1>見出し1</h1>
        <div>
            <p>テキスト<span>スパン</span></p>
        </div>
    </body>
</html>

親要素
親要素とは、対象の要素より1つ上の階層にある要素です。

HTML

<html>
    <head>
        <title>親子関係の説明</title>
    </head>
    <body>
        <h1>見出し1</h1>
        <div>
            <p>テキスト<span>スパン</span></p>
        </div>
    </body>
</html>

上のサンプルコードで説明すると、h1タグやdivタグの親要素はbodyタグになります。

また、spanタグの親要素はpタグになり、pタグの親要素はdivタグです。

子要素
子要素とは、対象の要素より1つ下の階層にある要素です。

HTML

<html>
    <head>
        <title>親子関係の説明</title>
    </head>
    <body>
        <h1>見出し1</h1>
        <div>
            <p>テキスト<span>スパン</span></p>
        </div>
    </body>
</html>

上のサンプルコードで説明すると、htmlタグの子要素はheadタグとdivタグになります。

また、bodyダグの子要素はh1タグとdivタグです。

祖先要素
祖先要素とは、対象の要素より上の階層にある全ての要素です。

HTML

<html>
    <head>
        <title>親子関係の説明</title>
    </head>
    <body>
        <h1>見出し1</h1>
        <div>
            <p>テキスト<span>スパン</span></p>
        </div>
    </body>
</html>

上のサンプルコードで説明すると、h1タグやdivタグの祖先要素はbodyタグやhtmlタグになります。

また、pタグの祖先要素はdivタグ、bodyタグ、htmlタグです。

子孫要素
子孫要素とは、対象の要素より下の階層にある全ての要素です。

HTML

<html>
    <head>
        <title>親子関係の説明</title>
    </head>
    <body>
        <h1>見出し1</h1>
        <div>
            <p>テキスト<span>スパン</span></p>
        </div>
    </body>
</html>

上のサンプルコードで説明すると、bodyタグの子孫要素はh1タグ、divタグ、pタグ、spanタグになります。

また、htmlタグの子孫要素はheadタグ、titleタグ、bodyタグ、h1タグ、divタグ、pタグ、spanタグです。

兄弟要素
兄弟要素とは、同じ親要素を持つ要素です。

HTML

<html>
    <head>
        <title>親子関係の説明</title>
    </head>
    <body>
        <h1>見出し1</h1>
        <div>
            <p>テキスト<span>スパン</span></p>
        </div>
    </body>
</html>

上のサンプルコードで説明すると、h1タグとdivタグが兄弟要素です。

また、bodyタグとheadタグも兄弟要素になります。

親子関係が理解できたところで、継承の話に戻ります。

CSSの継承とは、対象の要素または、子孫要素に特定のプロパティの値が引き継がれることです。

このようなHTMLとCSSのサンプルコードを使って説明します。

HTML

    <body>
        <div>
            <p>サンプルテキストです、<span>サブテキストです。</span></p>
        </div>
    </body>

CSS

div{
    border: 1px solid black;
}

p{
    color: red;
    padding-bottom: 50px;
}

span{
    display: block;
}

このように記述した場合、ブラウザではこのように表示されます。

CSS設計

pセレクタに指定した「color: red;」が子要素のspanタグに引き継がれています。

このように、子孫関係ではプロパティの値が引き継がれることがわかったと思います。

注意点としては、子孫関係であっても引き継がれないプロパティの値もあることです。

マージンやパディングは引き継がれません。

カスケード

継承がわかった次は、カスケードの説明をします。

カスケードを簡単に説明すると、スタイル適用の優先樹医です。

わかいやすくするために、サンプルコードを使って説明します。

HTML

    <body>
        <h1>見出し</h1>
        <p>サンプルテキスト<span>サブテキスト</span><a href="#">リンク</a></p>
    </body>

上のコードをブラウザで確認すると、このようになります。

CSS設計

h1タグには太文字とフォントサイズが自動的に設定されており、リンク部分の文字色も青色に設定されています。

これは、ブラウザがデフォルトで設定しているCSS(ユーザーエージェントCSS)が影響しています。

CSSを何も設定していないとき、「ユーザーエージェントCSS」が適用されるシステムです。

上のHTMlコードにCSSを設定すると、ユーザーエージェントCSSが表示されないようになります。

HTML

    <body>
        <h1>見出し</h1>
        <p>サンプルテキスト<span>サブテキスト</span><a href="#">リンク</a></p>
    </body>

CSS

h1{
    font-weight: normal;
}

a{
    text-decoration: none;
    color: red;
}

ブラウザで確認すると、このようになります。

CSS設計

h1タグに適用されていた太文字がなくなり、リンク部分のアンダーラインや文字色が変わりました。

これは、CSSでスタイルを指定したためです。

このように、WEB製作時に使用しているCSSを「作成者CSS」とよびます。

また、ブラウザを使用するユーザーが作成した「ユーザーCSS」もあります。

「ユーザーエージェントCSS」「作成者CSS」「ユーザーCSS」この3つのCSSの優先順位はこのようになることを覚えましょう。

ユーザーエージェントCSS＜ユーザーCSS(スタイルが設定されている場合)＜作成者CSS

基本的には上のような優先樹医になりますが、「!import」が設定されている場合は違います。

!importを指定したスタイルは優先順位が上がるのが特徴です。

!importを指定した場合の優先順位はこのようになります。

ユーザーエージェントCSS＜ユーザーCSS(スタイルが設定されている場合)＜作成者CSS＜!importが設定された作成者CSS＜!importが設定されたユーザーCSS

セレクタの詳細度
スタイルの重複がおこった場合は、詳細度の高い順番でスタイルが適用されます。

このようなサンプルコードを使って、セレクタの詳細度を説明します。

HTML

    <body>
        <p class="sample1">サンプル1</p>
        <p class="sample2" style="color: blue; font-size: 30px;">サンプル2</p>
        <p class="sample3" style="color: blue; font-size: 30px;">サンプル3</p>
    </body>

CSS

.sample1 {
    font-size: 15px;
    color: red;
}

.sample2{
    font-size: 15px;
    color: red;
}

.sample3{
    font-size: 15px;
    color: red !important;
}

上のコードをブラウザで確認すると、このようになります。

CSS設計

一番上の「サンプル1」は、CSSで設定した通りのスタイルになっています。

「サンプル2」は、フォントサイズを15px、文字色を赤色に設定していますが適用されていません。

その理由は、インラインスタイルです。

インラインスタイルとは、HTMLファイルにCSSコードを直接記述することです。

上のサンプルコードでは、「style=”color: blue; font-size: 30px;”」の部分がインラインスタイルになります。

このように、クラスやIDでスタイルを適用させるよりも、インラインスタイルで適用させる方が優先順位が高くなります。

そして、インラインスタイルよりも優先度が高くなるのが「!import」です。

「サンプル3」にもインラインスタイルを設定していますが、文字色が赤色になっています。

これは、「.sample3」のクラスに「color: red !important;」が適用されているからです。

!importantを設定することで、インラインスタイルよりも優先順位が高くなります。

セレクタ詳細度の優先順位はこのようになります。

要素セレクタ、擬似要素＜クラスセレクタ、属性セレクタ、擬似クラス＜IDセレクタ＜インラインスタイル＜!import

記述の順番による優先順位
セレクタの詳細度の他に、記述の順番による優先順位があります。

このようなサンプルコードを使って説明します。

HTML

    <body>
        <p class="sample">サンプル</p>
    </body>

CSS

.sample{
    font-size: 20px;
    color: red;
}

.sample{
    font-size: 50px;
    color: blue;
}

上のコードをブラウザで確認すると、このようになります。

CSS設計

CSSは前から後ろの順番で読み込まれます。

なので、スタイルが重複している場合は、記述順番が後になる方が優先されるのが特徴です。

CSSが破綻しないための記述方法

ここまでは、CSSの基礎的な部分を説明しました。

次は、CSSが破綻しないための方法について説明します。

CSSが破綻しないために必要なのは、以下の4つです。

・命名規則を決める
・ファイルを分割する
・ガイドラインを定める
・拡張性を高める

この4つについて順番に説明します。

命名規則を決める

CSSでまず決めるのは、命名規則です。

命名規則は複雑な貴族から単純な規則まで様々ですが、重要なのは「誰が見てもわかりやすい」ことです。

パッと見てわかりやすい名前をつけましょう。

適用させているスタイルやCSSの使用方法に沿った名前をつけるのがおすすめです。

最近では、子供要素に「アンダーバー2つ+親要素の名前」をつける人もいます。(BEM)

例えば、このようなサンプルコードになります。

HTML

   <body>
        <header class="header">
            <div class="header__logo">
                ロゴ
            </div>
            <div class="header__info">
                <tel class="tel">000-000-0000</tel>
            </div>
        </header>
        <div class="search">
            <form class="search__form">
                <input class="search__input" type="text">
                <button class="search__button" type="submit">送信</button>
            </form>
        </div>
    </body>

このように、「親要素+__+子要素」で命名することで直感的に理解することが可能です。

命名規則に明確なルールはないので、万人が見てわかりやすい名前にしましょう。

ファイルを分割する

CSSの肥大化を防ぎ理解しやすくするために、有効な方法がファイル分割です。

1つのファイルでCSSを管理すると、使用されていないセレクタやスタイルが重複してしまうこともあります。

また、数千行のコードから見つけたいコードを探すのも一苦労です。

CSSをカテゴライズして、ファイルを分割することで可続性や保守性が向上します。

下の図は、ファイル分割のサンプルです。

base
L_var.css
L_base.css
L_normalize.css
L_mixin.css

layout
L_layout.css

module
L_header.css
L_footer.css
L_navigation.css
L_button.css
L_form.css
L_table.scss
L_list.css

theme
Ltheme.css

vendor
Lvendor.css

このようにCSSファイルを分割することで、探したいコードが見つけやすくなります。

例えばフォームに関するCSSコードを探している場合は、「form.css」のファイルを探せば見つかります。

ファイル分割する上で重要なのは、適切なファイルに適切なコードを記述することです。

例えば、「form.css」にボタンに関するCSSを記述してはいけません。

ガイドラインを定める

複数でCSSコードを記述してもコードが統一するように、あらかじめスタイルのガイドラインを決めましょう。

スタイルのガイドラインでは、このような項目を決めておきます。

・カラー
・フォント
・アイコン
・ボタン
・hover
・visit
・リンク
・タイトル
・hタグ
・リスト
・テーブル
・フォーム

例えば、ボタンでは「強調したいボタンのスタイルや「シンプルなボタンのデザイン」などサイトによって何種類も用意されていることが多いです。

このように、あらかじめスタイルを決めておくことでCSSコードが重複することがなくCSSを記述できます。

拡張性を高める

後からデザインを修正しやすいように、拡張性を高めることが大切です。

拡張性を高めるために、タグにスタイルを適用するのではなく、クラスやIDを付与して、CSSを記述しましょう。

良い例

HTML

<body>
        <header class="header inner is-flex is-between is-center">
            <div class="header__logo">
                ロゴ
            </div>
            <div class="header__info">
                <tel class="tel">000-000-0000</tel>
                <address class="address">東京都</address>
            </div>
        </header>
        <nav class="nav inner">
            <ul class="nav__ul is-flex is-between">
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
            </ul>
        </nav>
    </body>

CSS

.inner{
    width: 960px;
    margin: 0 auto;
}

.is-flex{
    display: flex;
}

.is-between{
    justify-content: space-between;
}

.is-center{
    align-items: center;
}

.tel, .address{
    display: block;
}


.nav__ul li{
    width: 160px;
    list-style: none;
}

悪い例

HTML

    <body>
        <header>
            <div class="header__logo">
                ロゴ
            </div>
            <div class="header__info">
                <tel>000-000-0000</tel>
                <address>東京都</address>
            </div>
        </header>
        <nav>
            <ul>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
                <li><a href="">リンク</a></li>
            </ul>
        </nav>
    </body>

CSS

header{
    width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

tel, address{
    display: block;
}

nav{
    width: 960px;
    margin: 0 auto;
}

ul{
    display: flex;
    justify-content: space-between;
}

li{
    width: 160px;
    list-style: none;
}

シングルクラスとマルチクラス

シングルクラスとマルチクラスは、HTMLの要素に　1つのクラスを設定するか複数のクラスかの違いです。

表示は同じ結果になってもそれぞれメリット・デメリットがあります。

まずは、それぞれのメリット・デメリットから説明します。

シングルクラスのメリット

・カスタマイズ性が高い
・スタイルの適用範囲がわかりやすい

シングルクラスのデメリット

・コードの量が多くなってしまう
・デザインを変更するときは新たにコードを記述することが必要になる

マルチクラスのメリット
・コードの記述量が少なくなる
・クラスを追加することで、デザインの変更が可能

マルチクラスのデメリット
・カスタマイズ性が低い
・スタイルの適用範囲がわかりにくい

シングルクラスのHTML

    <body>
        <button type="button" class="btn-a">ボタンA</button>
        <button type="button" class="btn-a-blue">ボタンA</button>
        <button type="button" class="btn-a-blue-shadow">ボタンA</button>
    </body>

シングルクラスのCSS

.btn-a,
.btn-a-blue,
.btn-a-blue-shadow{
    width: 400px;
    margin-bottom: 10px;
    font-size: 18px;
    display: block;
}

.btn-a{
    color: #fff;
    border: 1px solid #222;
    background: gray;
}

.btn-a-blue{
    color: #fff;
    border: 1px solid #222;
    background: blue;
}

.btn-a-blue-shadow{
    color: #fff;
    border: 1px solid #222;
    background: blue;
    box-shadow: 2px 2px 4px;
}

マルチクラスのHTML

    <body>
        <button type="button" class="btn-b">ボタンB</button>
        <button type="button" class="btn-b blue">ボタンB</button>
        <button type="button" class="btn-b blue shadow">ボタンB</button>
        <script type="text/javascript" src="main.js"></script>
    </body>

マルチクラスのCSS

.btn-b{
    width: 400px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #fff;
    background: gray;
    border: 1px solid #222;
    display: block;
}

.blue{
    color: #fff;
    background: blue;
}

.btn-a-blue-shadow{
    box-shadow: 2px 2px 4px;
}

このように、マルチクラスの方がCSSのコード量が少なくなります。

しかし、1つのクラスを軸にしているため、カスタマイズ性が低くなるのがデメリットです。

シングルクラスとマルチクラスどちらでコーディングするかは、事前に決めてましょう。

まとめ

いかがでしたか？

CSSの設計ができていれば、途中で破綻することはありません。

効率よく開発するためにも、事前にルールを決めてましょう。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない！」「スタッフの手が空かない！」「技術的に対応できない！」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。

お問い合わせはこちら

ブログ

2019.2.15
【明日からWordPressが使える】WordPres…
2019.2.8
【WEBサイトでアニメーション】CSSアニメーションと…
2019.2.1
【実例あり】FlexboxやFloatの実践的な使い方
2019.1.25
【必須】javascriptのES2015をマスターし…
2019.1.18
初心者も簡単にできる一番簡単なワードプレスの使い方とブ…

マップ