婚活LABより、ブライダルネットの期間限定クーポン配布中!!

CSSの基本中の基本。各名称と記述方法について

CSSの基本中の基本。各名称と記述方法について

自分でオリジナルのコンテンツをホームページ、webサイトで作成しようとするとCSSの知識はほぼ必須です。
wordpress等のCSM(コンテツ管理システム)を使用してwebサイトを作成する際もほぼ必須と言っていいと思います。今回はCSSの基礎から確認したいと思います。

CSSとは

CSS(Cascadin Style sheet)とは、HTMLやXML文書で書かれた要素をどのように装飾するか指定する言語です。単にスタイルシートと呼んだりもします。

W3Cという団体によって標準化されています。
HTMLでWEBページの各要素と構造を指定し、CSSはHTMLで書かれた要素の装飾、レイアウトの役目を担っています。

CSSのレベル

CSSにはレベルという段階によって仕様が決定されており、現在はLevel4まで公開されております。

HTMLの様に、バージョンを指定する必要はありません。実際に表示するブラウザがどの段階まで対応されているかによって使用できるプロパティ等が変わってきます。

Level4は今現在では未だ普及しておらず、実際はCSS Level3までが主流です。

ユーザーエージェントスタイルシートとWEB製作者のスタイルシート

各ブラウザはユーザーエージェントスタイルシートと呼ばれるスタイルシートを持っています。これは最低限予めブラウザが持っているスタイルシートであり、W3Cで推奨されているデフォルトスタイルシートを元に各ブラウザ独自のスタイルシートを持っています。

このユーザーエージェントスタイルシートより優先順位の高い方法でWEB製作者は独自のスタイルシートを記述していきます。少し語弊がありますがユーザーエージェントスタイルシートを上書きしていくと捉えてもらってもかまいません。

各ブラウザがそれぞれ異なったユーザーエージェントスタイルシートを持っているとWEB製作者の意図しないデザインとなってしまう場合があります。そのような問題を防ぐ為、リセットCSSと呼ばれる各ブラウザの表示を出来る限り統一させる様々なCSSがテンプレートで用意されています。有名なものではnormalize.cssなどがあります。気になる方は検索してみてください。

CSSの記述方法と各名称について

まずいきなりですがCSSでは以下のように記述します。

Pセレクタ {colorプロパティ: blue;}

マーカー部分が各部の名称です。
では、各部分の役割を解説していきます。

セレクタ HTMLで書かれた要素を指定することが一般的。どこにスタイルを加えるかを指定。
プロパティ 余白や色など、どの様なスタイルを加えるかを指定。
詳細な色やサイズなどのプロパティに対する値。

プロパティと値の間は『:(コロン)』で区切ります。

上記の例では段落を表すP要素のフォントの色を青色に設定しています。

複数のプロパティを指定する場合は『;(セミコロン)』で区切ります。
複数記述しない場合でもセミコロンをつける癖をつけましょう。
例) 

p {
   color:blue;
   font-size:16px;
}

CSSの記述場所

CSSを記述するには、主に以下の3つの方法が使われます。
順番に解説していきます。

style要素を使いHTML文書のヘッダー内に記述

HTML文書内にstyle要素を使い直接記述する方法です。<head> 〜 </head>の間にstyle要素を記述します。

<head> 
  

  <style>
     <!--ここにCSSを記述します。-->
  </style>
</head>

どこでも構いませんが</head>の直前に記述するのが一般的です。style要素のタイプ属性はcssの場合省略しても構いません。

一部のページだけに適用したい場合はこの方法が良いかもしれません。

link要素を使い外部ファイルとして読み込む

こちらの方法が一般的です。HTMLのlink要素を使用し外部ファイルを読み込みます。
link要素はHTML文書のhead内に記述します。
以下が記述方法です。

<link rel=”stylesheet” href=”スタイルシートのパス”>

rel属性でlink要素が書かれたファイル(HTML)との関係性を示し、hrefで読み込むファイルのURIを指定します。ファイルの指定方法は絶対参照、相対参照で記述します。

絶対パス、相対パスとは?

style属性を使い要素内に直接記述する

最後に、限定的に要素にスタイルを適用したい場合は直接HTML文書の要素にstyle属性を使って記述してしまう方法もあります。

<p style="color:blue;">この部分が青色になります。</p>

上記の様に要素に直接記述してしまうので、セレクタ名を省きstyle属性の属性値としてプロパティ名と値を記述していきます。『;(セミコロン)』の後に複数スタイルを指定する事も可能です。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!