ホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。

トップ＞WEBデザイン ＞ CSSの基礎

CSSの基礎！

---

スタイルシート（CSS）とは

スタイルシート（Stylesheet)とは、CSS（Cascading Style Sheets）のことです。
HTMLのタグと組み合わせて使用するもので、HTML文書（WEBページ）の「見た目」に関する指定をする仕組みです。
　　

●　HTML　→　文書の構造を定義。
タイトルや見出し、段落、強調箇所、引用、表組、など、文書内の文章などに役割（意味付）をする。

●　CSS　→　装飾や配置など文書の体裁を設定。
字のサイズ、色、太さ、といった文字装飾、配置箇所の指定など、「見た目」を直接指定する。


　　

■　スタイルシートを利用するメリット

・文字や画像の配置、行間などを細かく設定することができる。

・ページの内容とデザイン（見栄え）を、別々に管理することができる。

・デザインの変更を一括して行えるため、ページの管理が楽になる。
　スタイルの内容をあらかじめ設定しておき、それを必要な箇所に適用させる。
　何箇所でも、何ページでも同じスタイルを適用でき、修正も一括でできるなど、
　デザイン作業が効率化できる。

・ブラウザでの表示が速くなる。
　HTMLファイルの容量が減り、軽くなったことでブラウザでの表示が速くなる。
　テーブルなどのレイアウトは表示に時間がかかる。

・シンプルでスタイリッシュなデザインができる。

・アクセシビリティが良くなる。すべての人に優しいホームページを構築することができる。
　

■　ボックス（ブロック）という考え方

ページにデザインを適用する場合は、
ボックス（ブロック、かたまり）という単位で考えるとよいです。
ある範囲にボックスを作りたい場合は、下図のように、<div>タグを使います。

　　見出しのボックス
　　文章のボックス
　　・・・・・・・・
などは、＜div>　この範囲内が、見出しのボックス　＜/div＞
　　　　＜div＞　この範囲内が、文章のボックス　＜/div＞

という様になります。

＜div＞タグを使って、全体をボックスにする例。

ところで、HTMLのタグは、ブロック要素とインライン要素に分けられます。

●　ブロック要素　　→　タグの前後に改行が入る。
　　　　　　　　　　　ブロックを形成するタグのこと。
　
　　　ブロック要素となるタグ
　　　<h1>～<h6>、<p>、<blockquote>、<ul>、<ol>、<div> など。

●　インライン要素　→　タグの前後に改行が入らない。
　　　　　　　　　　　要素は行の一部となる。　　

　　　インライン要素となるタグ
　　　<b>、<i>、<a>、<img>、<font>、<span> など。

スタイルシートの書き方''

■スタイル指定（スタイル宣言のルールセット）

タグ要素に対して、スタイルを設定する場合は次のように書きます。
これを「スタイル宣言のルールセット」といいます。

｛ 　 ｝　で囲まれた部分を「宣言ブロック」（スタイル宣言の内容）といいます。

「 property：value ; 」が宣言の基本形です。

記号「：」は等値を示し、「；」は区切りを示します。
区切り記号によって、｛　　｝（宣言ブロック）の中に複数個の「 property：value ; 」を列挙できます。
最後尾のみ「；」は省略可能。

（例）見出し（h2）の文字を赤、背景色を水色、
　　　段落(p)の文字サイズを90%、行間を150%に設定したいときは、　

　　h2 { color : red ; background-color : #ccffff ; }
　　 p { font-size : 90% ; line-height : 150% ; }
　　

または、段落（p）の文字サイズを12pt、文字色を青、行間を20ptに設定したい時は、
次のようになります。（最後尾の「；」は省略してもよい。）

　　 p { font-size:12pt ; color:#ffff00 ; line-height:20pt }

　　　
上のように、セレクタ(selector)が要素名（h2,pなど）の時に、タイプセレクタと呼びます。

尚、下記のごとく、セレクタには、他にも多くの種類があります。

・全称セレクタ、・タイプセレクタ、・子孫セレクタ、・子供セレクタ、・隣接セレクタ、
・属性セレクタ、・クラスセレクタ、・IDセレクタ、　・疑似クラス、　・疑似要素

などです。

■クラス を設定してスタイルを適用する方法

　　

セレクタとして、「．」（ピリオド）に続けて「クラス名」を指定します。
これで、class＝”「クラス名」”を追加された要素が、スタイル宣言を適用する対象となります。

クラスによる指定はタグの種類にかかわらず、同一のデザインを適用したい場合に行います。

クラスを指定する場合は、半角のピリオドに続けてクラス名を書きます。

．（クラス名）｛ （属性）：（値）；（属性）：（値）；・・・}　

（例）「menuクラス」を、指定した文字に対して、文字色を青に設定する場合。
スタイル宣言のルールセットのセレクタは、「.menu」で、
宣言ブロックは、「{ color :blue ; }」ですね。

つまり、.menu { color :blue ; }　となるわけです。
　　

　これは、どちらも文字色が青色になります。
　クラスmenuのスタイルが「h3」にも「div」にもどちらにも適用されるからです。
　

◆タグとクラスを組み合わせる方法

(ａ) 同一タグの中でクラス指定のあるものにデザインを適用する。

　　（タグ名）．（クラス名）｛ （属性）：（値）；（属性）：（値）；・・・}　

　（例）<p>タグを使用している段落の中で、「menu」というクラス指定のあるものに、スタイルを設定する。

　この場合、＜div＞～＜/div＞の間に挟まれている範囲（ブロック）内にあるのは、
　<h2>と<p>の２つのブロックですが、適用されるのは、<h2>のブロックだけです。
　<p>のブロックには適用されません。また、
　</div>の後に出てくる<h2>はクラスmenuの適用範囲外なので文字は青色になりません。

■IDを設定してスタイルを適用する方法

　　
セレクタとして、｢＃」（ハッシュ）に続けて「IDの名称」を指定します。そして、
宣言ブロック｛　　｝内に、「属性：属性値；」を記述します。

例えば、IDの名称「title」のスタイル宣言の内容が、「文字色を茶色（brown）にする」という場合のID設定は、

　＃title { color:brown;}
　　　　　
と書き、それをHTMLに反映させるには、
　　
　<div id="title">反映させたい文字など</div>

と書きます。
　　　
最後尾の「；」は省略することができます。　　

　id=”「IDの名称」” を追加された要素だけが、スタイル宣言を適用する対象となります。

特徴としては、同じHTML文書内では複数の要素が同じIDを持つことは許されません。
同一ページにおいては、ID名はひとつだけの要素に限られます。
　　
つまり、上記の場合は、「id＝”title”」は一つの要素<div>に対してのみ適応されるということになります。

複数の要素に対して同じID、例えば『 ＃title { color:brown } 』、を指定してはいけません。
　　　
つまり、同一ページ内で一つのIDである『＃title { color:brown }』に対して、
　　　
　<div id="title">～</div>
　<p id="title">～</p>
　<h1 id="title">～</h1>
　　
などの様に、複数の要素（div, p, h1）に使うことは許されていません。
各々のIDは、同一ページ内では一つの要素のみ一回だけ使えます。
規約を破ると、不具合を起こすことになるので注意しましょう!!
　　　

◆要素とIDを組み合わせる方法
　
　(a) 　直接IDを指定する方法と要素名に続けてID名を指定する方法
　　　
　● 直接指定は、例えば、次のように書きます。

　#testpart{ width:700px;color:blue;text-align:center;border:4px solid #00ff00;}　

　この場合は、ID名「testpart」の対象となる要素の内容は、「幅700pxで、太さ4pxの緑色(#00ff00)の実線の枠で囲まれ、枠の中の文字は全てblue（青色）で、テキストは中央に表示される」となります。


　　　　
　● 要素名に続けてID名を指定する場合は、例えば、次のように書きます。

　h1#testpart { width:600px;color: red;border:3px groove #cccc00;}
　　　
　この場合は、大見出しの要素h1の中の内容が、ID名「testpart]で宣言されたスタイル（デザイン）で装飾されます。

つまり、大見出しh1の文字は赤色で、その大見出しの全体は、幅600pxで、太さ３pxのgroove（立体枠窪み）形状の、RGBカラーコードが「#cccc00」の色の枠線で囲まれています。

　　　　　　　　
　sample　

　　
この場合は次のようになります。→　sample
　　　　　

　(b)　IDに続けて半角スペースを１個おいて、要素にスタイルを適用する方法
　
例えば、#header p{属性:値;～ }　のように書きます。
　　
　#header p{color:navy}
　　

　＜div id="header"＞ ～ ＜/div＞　として、このheaderブロックの中の、P要素に対してのみ、文字色をnavy（紺色）にします。
　　　
　　　　　
次の様に、各ブロックに属する段落要素「<p>～</p>」にスタイルを適用したい時は:
例えば　　　

　　　　
の場合、それぞれのブロックに、下記のごとく、ID属性をつけます。

　 ヘッダーブロックは：　id="header"
　メニューブロックは：　id="menu"
　メインコンテンツブロックは：　id="main"
　フッターブロックは：　id="footer"
　　　
　そこで、<div id=" ID名"> としてID属性をつけると、
　<div>はブロック（エリア）なので、段落ブロックの「<p>～</p>」を入れ子にします。
　　
　<div id="header">
　<p>ヘッダー</p>
　</div>
　　

　<div id="menu">
　<p>メニュー</p>
　</div>
　　

　<div id="main">
　<p>メインコンテンツ</p>
　</div>
　　

　<div id="footer">
　<p>フッター</p>
　</div>
　　

以上の様になります。
HTMLタグはここで終了しますが、
別途「style.css」に各IDのデザインを記入していきます。
　　　　
例えば、次の様に、

   ヘッダーブロック：　<p>の文字の背景色はグレー(gray)、文字は中央揃え
   メニューブロック：　<p>の背景をオレンジ色(orange)
   メインコンテンツブロック：　<p>の文字の色を紺色(navy)
   フッターブロック：　<p>の背景色を薄い紫色(lavendar)、文字は中央揃え

　　　
とすると、ID名とタグ要素を書いたスタイルシート「style.css」は、下記のようになります。
　

　　　

スタイルシートを書く場所

(1)ヘッダ部にスタイルを設定する。

　＜/head＞の直前に、

　　
　<style type="text/css"> ～ </style> の間に「スタイル宣言ルールセット」を書きますが、
その際、CSS非対応のブラウザが、スタイル定義を表示してしまうことを避けるため、
　<!-- 　 ～ 　 -->
を入れてコメント化しておきます。

　　　
sample2　　　

　　

上記の結果は　→　sample2
　　

(2)別ファイルとして設定する方法

◆複数のページに同一のスタイルを設定するような場合、
スタイルシートの定義部分を別ファイルから読み込むことができます。
指定方法は、次のようにヘッダ部の中に<link>タグを入れます。
このとき、ファイル名の拡張子は「.css」とします。
　　
例えば、
　<html>
　<head>
　<title>Style Sheet Test</title>
　<link rel="stylesheet" type="text/css" href="/mystyle.css">
　</head>
　　　
の場合、
「mystyle.css」ファイルの中は、「スタイル宣言のルールセット」のみを羅列して書きます。
　<style><!-- 　や　 --></style>　は書きません。
　
つまり, ファイル名「mystyle.css」のCSSファイルを開くと、
中身は次のような「スタイル宣言のルールセット」が羅列されているだけです。

　【mystyle.css】

　　　body {
　　　　　　font-size:13pt;
　　　　　　line-height:15pt;
　　　　　　color:#333333;
　　　　　　background-color:#ffee00;
　　　　　　margin:20px;
　　　　　　}
      
　　　p {
　　　　　color:blue;
　　　　　font-size:12pt;
　　　　　font-style:italic;
　　　　}

(3)その都度、要素に直接スタイルを適用

　　
　◆例えば、上の小見出し（３）の見出し文章の「スタイル」という文字を
「赤色で文字サイズを18px」にして、目立つようにすると、
次のようにスタイルを適用することになります。

（３）その都度、要素に直接＜span style="color:red;font-size:18px;">スタイル ＜/span＞を適用する。

　　
これを表示すると次のようになります。　⇒　　sample3
　　

　

　　　　
　◆また、この文章を、「見出し」にしたい時は、次のように書きます。

【 大見出し】：＜h１＞～＜/h１＞を使います。<br />

 <h1 style="color:blue; border:1px solid #00ff00; margin-right:300px; background-color:lightyellow;">（３）その都度、要素に直接スタイルを適用する。</h1>


【中見出し】：＜h２＞～＜/h２＞を使います。<br />

 <h2 style="color:green; border:1px solid #00ff00; margin-right:300px; background-color:lightyellow;">（３）その都度、要素に直接スタイルを適用する。</h2>


【小見出し】：＜h３＞～＜/h３＞を使います<br />

 <h3 style="color:red; border:1px solid #00ff00; margin-right:300px; background-color:lightyellow;">（３）その都度、要素に直接スタイルを適用する。</h3>

　
これを、ブラウザで表示させると次のようになります。⇒　sample4
　　　
いかがでしょうか！　

(4)要素とその属性

上記の例では、

h1,h2,h3,p,a,hr,div,table,ul,ol,img,span,… 等が要素（element)で、

コロン（：）の左側にある、color,border,margin-right,background-color,等を
属性(property)と言い、

コロン（：）の右側にある、red,1px solid #00ff00,300px,lightyellow,などを属性値
（value)と言います。

また「セレクター」とは、ある条件を備えた「要素」のことです。

---