コーヒーカップは貝殻で。

仕事とか、趣味とか、育児とか、思いつくままに書いみます。

CSS作成の超々基本エッセンス

f:id:shelfee:20170420234837j:plain
先日Web系の開発経験がない後輩にレクチャーしたので、ビギナー向けに超々基本的なCSS作成の基本エッセンスを書いておきます。

準備:まずは知っとこう、HTMLタグの基本

CSSを書くに当たり、HTMLタグ書式の基本を知っておく必要があります。
HTMLタグはだいたい↓の文法で記述されます。

<{要素名} {属性}="{属性値}">……</{要素名}>
  • 要素名
    テキストボックス、テーブル(表)、罫線などなどWebページに何を表示するかを表します。
    原則としてHTMLのリファレンスにない要素は、記載しても何も表示されません。
  • 属性(アトリビュート
    要素に対する効果や詳細な指示ができます。
    ほとんどの属性には、この後に説明する属性値を指定する必要がありますが、中には属性だけを記述するだけで有効になるものもあります。
    あらかじめ定義されている属性があり、要素によっては利用できないものもあります。
    style属性はページでの描画の効果を指定する、ほぼ全ての要素で利用でる属性です。
    idclass属性はCSSの記述でも非常に関連性の高い属性です。 また任意の名前を指定することもできます。
  • 属性値
    属性に対するその値です。
    あらかじめ定義されている属性に対しては、原則として入力できる値に規則性があります。

例えばリストを表現する場合は、以下のようなタグを書くことになります。

<li id="hogehoge" class="fugafuga" style="color:#2980b9">リスト内容です</li>

この場合、リスト要素にstyle属性を付与し、属性値(この例ではフォントカラー)を指定しているので、このタグにはWebページに描画する際の効果(スタイル)が直接定義されていることになり、以下のように表示されます。

  • リスト内容です
  • 本題:CSSとその書き方(超基本)

    本題です。CSSの意味とその超基本的な書き方を紹介します。

    CSSの存在意義

    HTMLタグに関する説明で触れたとおり、タグの中にstyle属性を定義することでスタイルを設定することができます。
    「じゃあそれ使えばいいじゃないの」という話なんですが、そうでもないんです。
    こんな場面がありますよね??

    • 複数のタグに同じスタイルを適用させたい
      こんな時、全てのタグに同じスタイルの定義をします??
    • 複数のタグに指定したスタイルを変更したい
      ただでさえ苦労して大量のタグに書いたスタイルをまた手直しします??

    そうです、それぞれのタグにスタイルを定義すると、開発の効率性、保守性が悪くなります。
    そしてエンジニアの好きな言葉「美しくない」んです(笑)

    CSSを利用すればこれらの問題は解決します。CSSの規則に則って、複数のタグに対していっぺんにスタイルを適用できるからです。

    CSSはどこに書くか??

    CSSを書く場所は2通りです。

    HTMLファイル内に記述する

    スタイルを適用したいHTMLファイルに直接書きます。
    ファイル内のheadタグ内に、以下の構文で記載します。(CSS本文の書き方は後ほど…)

    <html>
        <head>
           <style type="text/css">
                <!--
                {CSS本文}
                -->
            </style>
       </head>
        <body>
            ............
        </body>
    </html>
    

    この場合、記述したCSSはこのHTMLファイルの中だけで有効になります。

    別ファイルに記述する

    HTMLファイルとは別にCSSファイルを作成し、記述します。
    ファイル名は{任意の名前}.cssとします。 CSSを利用する側のHTMLファイルにはそのheadタグ内に、以下の構文でCSSファイルの参照を定義します。

    <html>
        <head>
           <link rel="stylesheet" type="text/css" href="{CSSファイルのパス}">
       </head>
        <body>
            ............
        </body>
    </html>
    

    この場合、作成したCSSファイル内のCSSは、参照定義した全てのHTMLファイルで有効になります。

    セレクタ

    CSSの基本構文は以下のとおりです。

    [セレクタ] {
        [プロパティ名] : [プロパティ値];
        [プロパティ名] : [プロパティ値];
        ...
    }
    

    プロパティ名とその値は、スタイルの種類とその設定です。CSSのリファレンスに従って記述します。
    セレクタの部分で、どの(どんな)HTMLタグにスタイルを当てるかを指定します。
    このセレクタは色々な指定の仕方(≒書き方)があります。その中でも覚えておくべき最低限のセレクタとその書き方を説明します。

    要素の指定

    タグの要素名で指定する方法です。
    セレクタの部分に要素名を指定します。サンプルは以下のとおりです。

    /* p(段落)要素のタグの文字色を青に指定 */
    p {
        color:blue;
    }
    

    この場合、HTMLファイル内の全てのp要素のタグにこのスタイルが適用されます。

    idの指定

    タグのid属性の属性値で指定する方法です。
    セレクタの部分に#{id名}を指定します。サンプルは以下のとおりです。

    /* idが"hogehoge"のタグの文字色を青に指定 */
    #hogehoge {
        color:blue;
    }
    

    この場合、HTMLファイル内のタグの内、id属性がhogehogeのものにこのスタイルが適用されます。
    (原則として1つのページに同じidを持つタグを複数配置することはできないので、1つのタグ及びその配下のタグに適用されます。)

    クラスの指定

    タグのclass属性の属性値で指定する方法です。
    セレクタの部分に.{クラス名}を指定します。サンプルは以下のとおりです。

    /* "fugafuga"クラスのタグの文字色を青に指定 */
    .fugafuga {
        color:blue;
    }
    

    この場合、HTMLファイル内のタグの内、class属性にfugafugaを含む全てのタグにこのスタイルが適用されます。
    class属性にはclass="fugafuga hogefuga"のように記述することで複数の属性値を指定できます。)

    セレクタにはこの他にも指定の仕方があり、またそれらを組み合わせて利用することもできます。
    (おいおい書くかもしれません。)

    優先順位を強制的に最上位にする方法

    このようにCSSは色々な種類のセレクタを使ってスタイル定義することができます。
    またはじめに説明したとおり、スタイルはタグの属性を利用して直接指定することもできます。
    このように指定の自由度が高いために、同じタグに対して色々なCSSや、そのタグのstyle属性が競合し、期待通りのスタイルが適用されない場合があります。
    やや複雑ですがCSSには、定義(記述)されている順序やセレクタの種類などによって適用される優先順位が決まっています。
    優先順位などを考慮し、スタイルの定義が競合しないようCSSを作成することがベストですが、以下のようにプロパティの後に!importantとかくと、それらの優先順位を度外視し、強制的にその定義を適用させることもできます。

    p {
        color:blue!important;
    }
    

    とにかく強制的に優先順位を最上位に持っていくので便利といえば便利ですが、諸刃の剣です。
    やたらめったらこの指定を行うとそれこそCSSカオスになり、それこそ保守性が損なわれて元も子もないことになることもあります。
    どうしても使う場合は、その使い所をきちんと考えて見てください。

    いかがでしたでしょうか??今回紹介したのはCSSホントにホントの超基本です。
    ホームページを作成したり、ブラウザアプリケーションを開発するなど、Webブラウザを利用した何かを作る場合には最低限知っておくべきことです。

    この数年ではCSSの作成は直接行わず、SassとかLESSなどの「プリプロセッサ」なんてもので効率的にできるようになっていますが、それを利用できるのも今回のような基本を知っていてこそ!!

    CSSやその作成技法は奥が深いので、またおいおい紹介できればと思います。