CSSファイルの作り方

CSSとは？CSSの書き方と設定方法
CSS

ホームページでよく聞くCSSとは？CSSファイルの作り方からセレクタ、プロパティと値を設定し、HTMLと連携して表示するまで説明しております。

  1. CSSとは？
  2. CSSファイルの作り方
  3. HTMLとCSSの連携方法
  4. セレクタについて
  5. プロパティと値の説明

CSSとは？

CSSとはWebページに表示される文字の色やサイズを大きくしたりすることができる言語です。

Cascading Style Sheets（カスケーディング・スタイル・シート）の頭文字をとった略称がCSSです。

HTMLで記載するタグにclassまたはidをつけることでCSSのセレクタが呼び出されプロパティに設定した値が反映されます。

CSSサンプル

  • 黒の文字です。
  1. <!-- HTML側 -->
  2.  <li>黒の文字です。</li>
  • 赤の文字です。
  1. <!-- HTML側 -->
  2.  <li><span class="red_sd"赤の文字</span>です。</li>
  1. <!-- CSS側 -->
  2. .red_sd{
  3.  color: red;
  4. }

CSSファイルの作り方

ここではCSSファイルの作り方をご説明します。

新規作成からテキストファイルを選択し、テキストファイルの名前を変更して下さい。名前は「style.css」で大丈夫です。

拡張子が変更できない場合は拡張子の設定をご覧ください。

そしてCSSファイルを開いて以下のソースコードを入力して下さい。

  1. <!-- CSS側 -->
  2. .red_sd{
  3.  color: red;
  4. }

入力ができたらHTMLとCSSの連携をします。

HTMLとCSSの連携方法

HTMLとCSSの連携方法は主に3種類あります。

連携方法
  • HTMLからCSSを読み込む方法
  • HTMLのタグ内に直接CSSを書く方法
  • HTMLにCSSをインライン化しjavascriptで残りのCSSを読み込む

一般的にCSSを読み込むといったら「HTMLからCSSを読み込む方法」です。

しかし今現在読み込み速度が重要となりgoogleが提供している「PageSpeed Insights」でもCSSを改善してくださいと表示されてしまいます。

ではどうしたら読み込み速度があがり、「PageSpeed Insights」のCSSを改善できるのかというとHTMLにCSSをインライン化しjavascriptで残りのCSSを読み込む方法です。

CSSを圧縮してインライン化するのですからCSSを読み込む時間も短縮されますし、アイコンを使うCSS「fontawesome」などは後から読み込んでも支障がない為javascriptで読み込むことによって読み込み速度の改善ができます。

少し技術が必要となりますがユーザに優しく検索エンジンに好まれやすいCSSの書き方です。

HTMLからCSSを読み込む方法

  1. <!-- HTMLのheadタグ内 -->
  2. <link rel="stylesheet" type="text/css" href="style.css">

HTMLのタグ内に直接CSSを書く方法

  1. <!-- HTMLのタグ内 -->
  2. <p class="red_sd">赤の文字</p>

HTMLにCSSをインライン化しjavascriptで残りのCSSを読み込む

インライン化

  1. <!-- HTMLの</head>タグの上に記載 -->
  2. <style type="text/css">ここに圧縮したCSSが入る</style>
  3. </head>

javascriptで残りのCSSを読み込む

  1. <!-- HTMLの</body>タグの上に記載 -->
  2. <script>
  3. var link = document.createElement('link');
  4. link.href = 'https://use.fontawesome.com/releases/v5.0.6/css/all.css';
  5. link.rel = 'stylesheet';
  6. link.type = 'text/css';
  7. var head = document.getElementsByTagName('head')[0];
  8. head.appendChild(link);
  9. </script>
  10. </body>

セレクタについて

CSSのセレクタとはHTMLで指定したclass名やid名です。下記のソースコードの場合「red_sd」をセレクタと呼びます。

classセレクタの場合「.」セレクタ名となります。

  1. <!-- HTML側 -->
  2.  <li><span class="red_sd"赤の文字</span>です。</li>
  1. <!-- CSS側 -->
  2. .red_sd{
  3.  color: red;
  4. }

idセレクタとclassセレクタについて

HTMLでCSSを読み込む場合idとclassによる読み込み方法があります。

idとは必ず1ページに1度しか使えないがレンダリング速度が速いことが特徴です。

classは1ページで何回でも使うことができます。idセレクタに比べるとレンダリング速度が遅いことが特徴です。

しかし体感的にその速度は感じるものではないので必ず1ページに1度しか使わないheaderやfooterなどで使う程度でよいです。

idセレクタの場合「#」セレクタ名となります。

  1. <!-- HTML側 -->
  2.  <div id="header">
  1. <!-- CSS側 -->
  2. #header{
  3.  position: relative;
  4. }

プロパティと値の説明

CSSのプロパティとはセレクタ内にある「color」を指します。

CSSの値とはセレクタ内にある「red」を指します。

プロパティ（color）に対して値（red）で表示しなさいと命令しています。

  1. <!-- CSS側 -->
  2. .red_sd{
  3.  color: red;
  4. }

まとめ

CSSについて説明してきましたがHTMLだけでは見栄えが悪い問題点を解決できるメリットがあります。

文字や枠を入れたい時にはHTMLタグにclass名を指定し、CSSにセレクタを作りプロパティに対して値はどうするか？という流れを掴むことで色々な応用が効きます。

PAGE TOP