LogoMark.png

CSS

CSS

Cascading Style Sheets

html_css.png

CSS（Cascading Style Sheets）は一般にスタイルシートと呼ばれるもので、HTMLやXMLで記述された文書の「構造と体裁の分離」を実現する為に提唱された技術仕様(（またそれが記述されたファイル）のことです。
　文書というものは、タイトル、見出し、本文、箇条書きなど、いくつかの要素に分けることができますが、その場しのぎにフォントや文字サイズを変更していたのでは、まとまりのない書類になってしまいます。そこで、「見出しは12ptでゴシック体」、「本文は10.5ポイントで明朝体」などとルールを決めて、文書全体を通じて共通にルールを適用させるというのが賢いやりかたです。このルール決めのことを「スタイル定義」といいます。
　CSSを記述する（つまりスタイルを定義する）ことにより、ページを構成する各要素の位置、文字の種類・サイズ・色、また背景色・背景画像といった、「見た目」に関する細かな設定を、文書本体とは独立したかたちで設定することができます。「スタイルシートを差し替える」ことは「文書の内容はそのままで、見た目を変更する」ということを意味するもので、これが可能になったことで、Webサイトのメンテナンス効率は大幅に向上しました。

↑

CONTENTS


↑

CSSの３つの書き方

CSSを記述する方法は３つあります。

結論から言うと、3つめが最も推奨される方法です。
以下、それぞれの書き方を紹介しますが、1. と 2. は非推奨です。

↑

1. HTMLファイルに書かれた各タグの中に直接書く

以下のように書くと、h1 の文字色が赤、文字サイズが 24px になります。

<h1 style="color: red; font-size:24px; ">HOME</h1>


↑

2. HTMLファイルのヘッダー部分にまとめて書く

以下の例では、h1の見出しの背景色が赤になります。

<!DOCTYPE html>
<html lang="ja">

    <head>
        <title>SamplePage</title>
        <style type="text/css">  
        <!-- 
            h1 {
                background-color : red; 
            }
        -->  
        </style>  
    </head>

    <body>
        <h1>HOME</h1>
        <p>
            本文
        </p>   
    </body>

</html>

上のソースコードの中では、以下の3行の部分がCSSです。
「h1の部分の背景色を赤にする」という指示が書かれています。

h1 {
    background-color : red; 
}


↑

3. HTMLファイルとは独立した別のファイルに書く(推奨)

これが、もっとも推奨される方法です。

以下、この３つめの方法、すなわち、HTMLとCSSはそれぞれ別ファイルとして独立させて書く ということを前提に話を進めます。



↑

HTML+CSSで組む

上記３の方法を実際に体験してみましょう。はじめにWebサイト用のフォルダを新規に作成して、その中に以下のソースコードをそれぞれ index.html、style.css という名称で保存して下さい。その後、index.html をブラウザにドラッグすると表示が確認できます。

↑

index.html

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title> [ サイトのタイトル ] </title>
  </head>

  <body>
    <div id="container">

      <header>
        この領域には、ページ見出しやロゴが入ります
      </header>

      <nav>
        この領域には、メニューが入ります
      </nav>

      <div id="contents">
        この領域には、見出し、本文、画像などの
        ページの主な内容が入ります
      </div>

      <footer>
        この領域には、署名等の情報が入ります
      </footer>

    </div>
  </body>

</html>


↑

style.css

body {
    background-color: silver;
}

#container {
    width: 800px;
    margin: auto;
    background-color: white;
}

header {
    padding: 40px;
    height: 80px;
}

nav {
    padding: 8px 40px;
    background-color: black;
    color: white;
}

#contents{
    padding: 40px;
    height : 400px;
}

footer {
    padding: 40px;
    height: 40px;
    background-color : black;
    color: white;
}


↑

動作確認

以下のように見えるはずです。
https://koichi-inoue.github.io/CSS_Sample_00/



↑

CSSの書式

↑

基本フォーマット

CSSでは、「見出し(h1)の・背景色を・赤に」のように、どの部分の・何を・どうするかを列挙します。それぞれセレクタ、プロパティー、値 と言います。記述の基本ルールは以下のとおり。
コロン（：）とセミコロン（；）を間違えないよう注意して下さい。

セレクタ（どの部分の） {
    プロパティー（何を）  :  値（どうする） ;
    プロパティー（何を）  :  値（どうする） ;
         　　　 :
}

ひとつのセレクタに複数の指示を与えることができます。
具体に書くと以下のようなイメージです

h1 {
    background-color: red;
    color : white;
}


↑

CSSにおけるコメントアウトについて

/*  color: red;    */

のように　/* と */　で一定範囲を囲むと、コメント扱いとなります。
後で使う可能性のある記述を一時機能停止させたい場合にも使えます。

↑

記載の順序

CSSファイル内に記載された事項は、基本的に上から順に処理されていきます。したがって、基本的には「全般的指示から例外的指示へ」「全体から部分へ」「ページの上部から下部へ」を意識して記載します。テーマごとに追加するCSSなどを除いて、基本的に記述が重複しないよう、注意して下さい。

本格的なサイト構築では、開発チームが定めたコーディングルールに従うのが普通ですが、一般に以下のような順番になります。

↑

セレクタ

↑

様々なセレクタ

セレクタは「対象」を特定するキーワードであり、思い通りのデザインを実現するためには、それを正しく把握することがとても重要な技術となります。ページ内の各要素を掴むためのセレクタには以下の3種類があります。

はじめての方は、上記の３種類のセレクタを使って全体像を理解する経験を積んで下さい。本格的なサイトの開発では、要素タグ名やID名は必要最小限（あるいは使わない）で、厳格なルールに従うクラスセレクタを使うの一般的ですが、いきなり難しいルールをまる覚えするのではなく、ひととおりの体験を通して徐々に理想的な書き方に近づく・・というのがよいでしょう。
参考：CSS/CodingRule ← ある程度経験してから読むことをお勧めします。

↑

セレクタの具体例

より詳細な書き方については CSS/Selectorをご覧下さい。





↑

要素の属性定義

↑

色・背景

Webサイトの文字や背景の色には、RGB値を16進数で表す16進トリプレット、あるいは、red やgreen といった直接的な名称で指定する X11 Colors を利用して指定します。


↑

文字

フォント系とテキスト属性で以下のような事項を定義できます。

↑

サイズの単位について

Webサイト上の大きさを指定するには、画面サイズに対して最も直接的な pxの他に、%、em、rem といった単位が存在します。

↑

ユニバーサルセレクタ [ * ]

ユニバーサルセレクタ（全称セレクタ）は、全ての要素に共通の指定を行うためのセレクタです。
　CSSにはデフォルト値があり、CSS指定を一切行わなくても適切な余白や行間、また文字サイズや装飾が適用されるようになっていまが、思い通りにスタイル定義をしたい場合に、このデフォルトCSSが邪魔になることがあります。そこで、CSSの冒頭に以下のような記述をして全体をリセットする方法がよく用いられます。

* {
    margin:0;
    padding:0;
    line-height: 100%;
    list-style-type: none;
    text-decoration: none;
}

注意）　ここで、 margin: 10px; などとしてしまうと、すべての要素に10pxの余白がつくことになって、かえってめんどうなことになってしまいます。あくまでも 0（あるいは100%）にリセットするために使うのが普通です。



↑

レイアウトの基礎

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業 と考えるとイメージしやすいでしょう。例えば、container という「大きな箱」の中に、header や nav、#contents といった名前の「箱」を入れて、さらにその中に li や p といった「小さな箱」を詰め込んでいくことになります。

html_css.png

HTMLの要素タグ、すなわち個々の「箱」は、「入れ子」状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデント（字下げ）を行なってわかりやすく書くことが必要です。


↑

HTML5 Semantic

Webサイトのレイアウトには定番のスタイルがあって、似たものをまとめると数種類しかありません。はじめに、以下のイメージをご確認ください。
GoogleImage:HTML5 Semantic


↑

ブロック要素とインライン要素

ページレイアウトの際には、ブロックとインラインというスタイルの違いを意識することが必要です*1。ここで言う「箱組み」に関わるのはブロックスタイルで、要素にブロックスタイルを定義して、幅や高さ、余白などを設定することで、思い通りのレイアウトが可能になります。

参考：ブロックとインライン


↑

余白と境界

箱詰め作業の際には、箱の大きさの把握が重要で、特に margin と padding という２種類の余白の意味の違いを正しく把握する必要があります。正確なレイアウトを行うために、以下のプロパティーを正しく理解して下さい。

補足
余白を全角スペースや、<br>でつくるのはやめましょう。スペーシングに関することは、すべてCSSで実現するのが理想です。
また、日本語の環境では、全角スペースが要素と要素の隙間（終了タグと開始タグの間）に入ることで、レイアウトの邪魔をするというトラブルがよく発生します。ページ内に予期せぬ余白がある場合は、htmlのソースコード内に不要な全角スペースがないか確認して下さい。ソースコードのインデント(字下げ)には、TABや半角スペースで行って下さい。

↑

ボックスモデル

boxModel.png

箱のサイズに関わるプロパティーがどのような関係になるか定義したものをボックスモデルといいます（右図）。
このモデルは box-sizing プロパティー（content-box と border-box）の設定によって変わるので注意が必要です。
詳細については、CSS/BoxModel をご覧下さい。



↑

レイアウトの手法

↑

Float を用いたレイアウト

HTMLのブロック要素は通常上から下へと縦に配列されますが、要素の幅を限定しつつ、左右横並びに配置したい場合もあります。その際に使用するのが Float です。要素をFloat指定すると、後に続く要素が、その反対側に回り込みます。ただし、Flexbox という新しいプロパティーの登場により、Float プロパティーは利用することが少なくなっています。

詳細については、CSS/Float をご覧下さい。

↑

Flexbox を用いたレイアウト

CSS3で登場したレイアウト仕様です。2016年ごろに、ほぼすべてのブラウザがFlexboxに対応し、技術仕様も安定したことで、よく利用されています。

BoxLayout.png

Flexboxの利用を前提に、ボックスの組み方を工夫すると、レイアウトの変更が簡単にできるようになります。右図のように、フレキシブルに組み方を変化させたい要素を、div で囲むとよいでしょう。

詳細については、CSS/Flexbox をご覧下さい。

↑

Grid Layout を用いたレイアウト

CSS Grid Layoutは、格子状の配置・結合が簡単に実装できる CSS3 の仕様です。Flexbox同様に新しい仕様であるため、ブラウザ環境が古いと対応しない可能性がありますが、今後の利用は増えるとおもわれます。。
　親要素（コンテナ）に display: grid; と書いてレイアウト構造を定義するだけで、子要素を簡単にグリッドに従わせることができます。

詳細については、CSS/GridLayout をご覧下さい。

↑

positionを用いたレイアウト

FloatやFlexboxを用いた「箱詰め作業」では、スペースに余裕がなければ収まりません。しかし、スペースの有無に関わらず、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。

詳細については、CSS/Position をご覧下さい。



↑

レイアウトサンプル

↑

基本形

#container { header, nav, main { section, aside } , footer }


↑

header の中に nav があるパターン

sample01.jpg
#container{ header{ nav } , main{ section, aside } , footer }


↑

main の中に ３つのブロックがあるパターン（３カラム）

sample02.jpg
#container{ header, main{ nav, section, aside } , footer }


↑

header, footer が画面幅100%になるパターン

sample03.jpg
header{ nav } , main{ section, aside } , footer

上記３つの実現事例（コードまとめ）




↑

その他


↑

擬似要素 :hover

マウスのロールオーバー（ホバリング）時の処理について、HTML側、CSS側に以下のような記述があると、マウスのロールオーバー時に文字が斜体になります。


↑

擬似要素 :first-line

最初の行にだけスタイルを適用できます。

p:first-line {font-weight:bold;}


↑

擬似要素 :before :after

before, afterは要素の前後に新たなエレメントを追加します。before,after擬似要素で追加したエレメントは、ブラウザ上では見えますが、実際のHTMLソース上には存在しないフェイク（擬似）エレメントです。
　HTML側、CSS側に以下のような記述があると、<p>タグで囲まれた引用文のはじめとおわりに 「 と 」がつきます。

↑

擬似要素 :first-line

最初の行にだけスタイルを適用できます。

p:first-line {font-weight:bold;}


↑

ベンダープレフィックスについて





↑

CSSを学んでいる方へ｜補足のお話

↑

CSSがめんどくさい… と感じている方へ。

サイトを構成するページが３〜４ページ程度で、
しかも、すべてのページが異なる見た目で構わない… という場合は、
CSSの分離などせず、いきなりザクザク作る方が簡単です。
授業では、大規模かつ持続可能なサイトづくりを前提としているために、
Web標準、スタイルシート分離で、「まずはテンプレートを作りましょう」
という段取りで進めるかたちになっています。
現実に標準的なものとして採用されているわけですから
うまく主旨が理解できると「とても理にかなっている」という
印象に変わると思います。

CSSを分離させるメリットが実感できるサイト＞ Zen Garden

↑

frame使えば楽なのに… と感じている方へ。

残念ながら、今日では「frameの利用」は過去のものとなりつつあります。メニュー部分をframe化するのは確かに便利なのですが、検索の際、ナビのないコンテンツページだけが表示されてしまう他、様々な問題があり、Web標準スタイルではその利用は非推奨です。
＞http://w3g.jp/webstandards/optimize/frame

また新しい規格であるHTML５ではframeタグは削除されました。
＞http://www.html5-guide.com/coming/taken.html

このサイトで紹介するような書き方で、すべてのページに同じナビのソースを書くのは確かに無駄が多いのですが、雛形の段階でメニュー構成をしっかり検討するというWeb標準のワークフローに従えば、雛形からの複製でページを増やせばいいので、手間はかかりません。
　それでも、「ナビのソースをひとまとめにして楽したい」という場合は・・・

などの方法を検討してみて下さい。
サーバーサイドの知識が必要ですが、関心のある方は是非挑戦してみて下さい。

↑

CSSファイルを分離するメリット

通常Webサイトは、まったく同じ雛形から生成された複数のページの集合体から成ります。つまり、どのページも骨格構造はまったく同じで、ページタイトル、本文の文章、画像などが異なるだけです*2。

ということは、例えば１００ページ以上ある大きなサイトでも、それらが同じ骨格構造をもつページであれば、CSSの記述を変更する（あるいはCSSファイルを別のものに入れ替える）だけで、すべてのページのデザインが変更できる・・・ということになります。多くのページをもつ規模の大きなサイトほど、このメリットは大きくなります。

もし、個々のページ（HTML）にビジュアルの定義（例えば背景色は赤）を書き込んでいた場合、サイト全体のビジュアルを変更したいと思ったら、全ページのHTMLを書き直す必要がでてきます。しかし、「HTMLには フック*3だけ与えて、当該要素のビジュアル仕様は別のCSSファイルに書く」という方法であれば、CSSファイルの変更だけで、すべてのページのデザインを一挙に変えることができるのです。

CSSを記述したファイルを、春バージョン、夏バージョンなどと個別に用意しておけば、HTML本体はそのままで、CSSファイルだけ差し替えれば見た目のデザインを一瞬にして変更することができます。このメリット…ご理解いただけたでしょうか。

↑

CSS分離のメリットが無いケース

例えば個人のサイトで「全部で5ページ程度、しかもすべてのページでビジュアルがまったく異なる」というような場合は、CSSを外部ファイルにするメリットはほとんどありません。そのような場合は、オーサリングツールで、1ページづつガンガン書く方が手っ取り早いでしょう。
　CSSを分離するメリットは、あくまでも「同一構造の複数ページに対して一括でデザインを管理する」場合にのみ生じます。



PAGES

↑

GUIDE

↑

DATA

*1 以前はHTML要素自体にブロックレベル要素とインライン要素の区別がありましたが、HTML5では、この発想はなくなり、「デフォルトスタイルとしてのブロックとインラインがある」という考え方に変わりました。
*2 メニューをクリックしてページをジャンプすると、「ロゴやメニューはそのままで、真ん中のコンテンツだけが入れ替わっている」と思っている方が多いようですが（かつてFRAMEを多用した時代はそうでした）、Web標準のサイトではページを移動するときは、基本的にはロゴもメニューも含めてページ全体が入れ替わっています。

*3 要素を把握するための「手がかり」のこと。一般にはID名やクラス名がそれにあたります。
添付ファイル: fileLayoutVariations.zip 450件 [詳細] filesample01.jpg 566件 [詳細] filesample02.jpg 516件 [詳細] filesample03.jpg 497件 [詳細] filehtml_css.png 1188件 [詳細] filehtml_css.pdf 383件 [詳細] filehtml_css_float.pdf 611件 [詳細] filehtml_css_float.png 845件 [詳細] fileBoxLayout.pdf 805件 [詳細] fileBoxLayout.png 1174件 [詳細] fileboxModel.png 2118件 [詳細] filehtml_css_2.png 1391件 [詳細] filehtml_css_3.pdf 752件 [詳細] filehtml_css_3.png 991件 [詳細]
Last-modified: 2021-06-01 (火) 10:50:50