• HOME > 
  • CSS > 
  • CSS入門編-CSSの役割と使い方を解説

CSS入門編-CSSの役割と使い方を解説

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

CSSとは?

WEBサイトの基本構造を担うのがHTMLであるのに対し、WEBサイトのデザインを担うものがCSSです。

HTMLの文字の大きさや色、配置などをCSSによって指定していくことで思い描くWEBサイトのデザインを表示させるようにします。

画像編集ソフトでサイト全体のデザインを画像データとして用意して丸々表示させる裏技もありますが、リンクが貼れなかったり、検索順位に影響を与えたりとおすすめできません。

WEBサイトの本来の役割や機能を発揮させてデザインを表現するにはCSSが必要不可欠です。

CSSの学習方法や練習方法は?

CSSは後述するプロパティというデザイン項目やそれに対する値の指定の方法を覚えなければなりません。数も多いうえ、なかには実際に使用する頻度が少ないものもありますので一気に丸暗記しようとするのではなく、練習のために既存のサイトをまねて作ってみる過程で、デザインのために必要なプロパティを理解していくという学習方法がオススメです。

世の中のサイトは全てCSSでできていているので、既存のどんなサイトでもあきらめなければ再現できないデザインはありません。デベロッパーツールを使えば実際にどのように記述しているかも見れますので、この表現はどうやっているのか学習するのに便利です。

CSSの書き方(セレクタとプロパティについて)

CSSで装飾したい対象のHTMLを「セレクタ」、装飾する項目を「プロパティ」と呼びます。プロパティに対して「値」を指定することで対象のHTMLの装飾を変更します。

CSSは記述する場所によって若干書き方が変わります(後述「CSSを読み込む方法」)。次の例ではstyleタグを用いてHTML内に記述しています。

        <style>
            p{
                font-size:20px;
                color:red;
            }
        </style>
            <p>CSSの書き方

CSSの書き方

装飾したい対象はpタグなので「p」がセレクタになり、「{」と「}」の間に、装飾項目であるプロパティ「font-size(文字の大きさ)」「color(文字の色)」 とその値(数値や色)を指定します。
プロパティと値の間には「:」(ダブルコロン)を、値の後ろには「;」(セミコロン)を付けるのがルールです。

クラス指定やID指定を行う

先程の記述の場合、セレクタにpタグを指定しているのでページ内もしくはサイト内すべてのpタグへスタイルが適用されます。

たとえばpタグでも場所によって異なる装飾を適用したい場合は、クラスやIDをセレクタとして指定します。

        <style>
            p{
                font-size:20px;
                color:red;
            }
            .test{
                color:green;
            }
            #sample{
                color:blue;
            }
        </style>
            <p>CSSの書き方

<p class="test">クラス指定の方法

<p id="sample">ID指定の方法

CSSの書き方

クラス指定の方法

ID指定の方法

上記の例では、pタグの文字サイズは全て20pxにしつつ、それぞれ異なる色を指定しています。 クラスやIDのセレクタに対しても文字サイズを指定できますが反映される優先順位がありますので次項をご確認ください。

CSSが反映される優先順位は?

CSSは「クラスやIDで指定した方が優先される(さらにクラスよりもIDが優先)」、「後に記述したものが優先される(上書きされる)」というルールがあります。

記述したCSSが反映されない場合はその要素に対して別の場所でCSSを指定している場合が多いので確認してみてください。

なお「!important」を値の後に付けると、その値が最優先になります。

importantでCSSを優先させる方法はこちら

        <style>
            #sample{
                color:blue;
            }
            .test{
                color:green;
            }
            p{
                color:red;
            }
        </style>
        <p class="test" id="sample">CSSの優先順位</p>
    

CSSの優先順位

上記の場合、後に記述してある「p」へ指定した値(red)よりもIDである「#sample」へ指定した値(blue)が優先されています。

CSSを読み込む方法

HTMLに対してCSSを反映させるには、「HTMLタグに直接記述する方法」、「HTMLファイル内にstyleタグを用いて記述する方法」、 「CSSファイルを用意し読み込む方法」があります。

htmlタグ内に直接書き込む

HTMLタグの中にstyle=""という形でプロパティと値を指定する方法です。

記述したタグひとつに対してだけ反映されるのでピンポイントで指定したい場合には便利です。

        <p style="font-size:24px;">CSSを読み込む方法</p>
    

CSSをHTMLに埋め込む

HTML内に埋め込む場合は、<style></style>というstyleタグを記述することで、その中にCSSを書くことが出来ます。

styleタグ内はCSSとして認識されるのでサイトにコードが表示されることはありません。

なお当サイトのコード解説箇所では、わかりやすいようにHTML内に記述する形式で表記しています。

        <!DOCTYPE>
        <html>
            <head>
                -省略-
            </head>
            <body>
                <style>
                    .sample{
                        font-size:24px;
                    }
                </style>
                    <p class="sample">CSSを読み込む方法</p>
            </body>
    

別ファイルを作成して読み込む

CSSを記述したファイルを「.css」という拡張子で保存し各ページに読み込ませる方法が主流です。 メインとなるCSSファイルは「style.css」という名前で読み込ませるのが一般的となっており、その他印刷時の指定をまとめた「print.css」など必要に応じて作成しサイトに読み込ませます。

ファイルをサーバーにアップロードし、そのパスを指定し読み込ませます。

CSSファイルはCSS専用ファイルなので、ファイル内にCSSを書く際はstyleタグは不要です。

        <!DOCTYPE>
        <html>
            <head>
                -省略-
                <link rel="stylesheet" href="ファイルのあるディレクトリまでのパス/style.css">
                -省略-
            </head>
            <body>
                    <p>CSSを読み込む方法</p>
            </body>
    
        「style.cssファイル内の例」
.sample{ font-size:24px; } p{ color:red; }

<link rel="stylesheet" href="ファイルのあるディレクトリまでのパス/style.css">の部分でCSSファイルを読み込ませています。 /style.cssの前の部分はサーバーのどこにアップロードしたのかによってそれぞれ異なります。例えばsampleというフォルダの中のcssというフォルダ内にアップしたのであれば href="sample/css/style.css"となります。

よく使うプロパティ一覧

要素の色(背景色)を表示するためのプロパティです。
font-size文字の大きさを指定するためのプロパティです。詳しくはこちら
font-family文字のフォントを指定するためのプロパティです。詳しくはこちら
color文字の色を指定するためのプロパティです。詳しくはこちら
border要素に枠線を表示するプロパティです。詳しくはこちら
background詳しくはこちら
width要素の横幅を指定するためのプロパティです。
height要素の高さを指定するためのプロパティです。
padding要素の内側の余白を指定するためのプロパティです。詳しくはこちら
margin要素の外側の余白を指定するためのプロパティです。詳しくはこちら

まとめ

HTMLとCSSを理解できればWEBサイトを制作することが可能です。プロパティやそれに対する値の指定方法など覚えることは多いですが、作りたいデザインを実現するために 必要なものを調べて書いて確かめるといった作業を繰り返していくうちに自然と見につくを思いますので根気よく学習することをおすすめします。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。