ナビゲーション

CSS入門

ここではCSSに関する基礎的な知識や書き方について解説していきます。

やってみよう!

前回のチャプターのようにまた新たにHTMLファイルを作成します。
そしてそれに加え、新たにCSSファイルと呼ばれるものを作成します。

テキストエディタで以下のようにtest2.htmlを作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <title>CSS演習</title>
</head>
<body>
    <h1 id="red">赤の見出し</h1>
    <h1 id="blue">青の見出し</h1>
    <h1 id="yellow">黄の見出し</h1>

    <p id="back">背景の色を変えることも簡単にできます</p>

    <div class="colorBlocks">
        <p>背景に画像を指定することも可能です。</p><br>
        <p>色や画像によってHTMLにデコレーションを追加します。</p>
    </div>

    <img id="border" src="http://www.uhero.co.jp/common/images/logo.png" alt="uhero"/>

    <ul>
        <li id="left">左寄り</li>
        <li id="center">中央</li>
        <li id="right">右寄り</li>
    </ul>

    <p id="font">他にもフォントを変更したり</p>
    <p id="size">サイズを変更したり</p>
    <p id="line">取り消し線を引いたり</p>
    <p id="shadow">影をつけたりできます。</p>
</body>
</html>
またエディタで以下を書き込み、style.cssという名前で保存し、test2.htmlと同じディレクトリに置いてください。
#red {
    color: red;
}

#blue {
    color: blue;
}

#yellow {
    color: yellow;
}

#left {
    text-align: left;
}

#back {
    background-color: orange;
}

.colorBlocks {
    background-image: url("http://works45.jp/img/backimg/menu_cboard_light24.gif");
}

#border {
    margin: 30px 30px;
    padding: 10px;
    border: medium solid green;
}

#center {
    text-align: center;
}

#right {
    text-align: right;
}

#font {
    font-family: "ＭＳ ゴシック",sans-serif;
}

#line {
    text-decoration: line-through;
}

#size {
    font-size: 25px;
}

#shadow {
    text-shadow:3px 3px 2px red;
}
HTMLだけの時と比べて大きな変化が見られましたか？
ほとんどのウェブサイトがCSSを使用して色や画像、背景、文字のフォントなどを指定しています。
Webデザインは近年話題に上がることも多く、注目度の高い分野の一つです。
ファイルを見れば分かる通り、色の指定や装飾のほとんどは英単語がそのまま使用されています。
最初は慣れが必要ですが、たくさん使っていくうちにきっとCSSのテクニックをマスターできることでしょう。

CSSとは?

CSSとは、Cascading Style Sheetsの略で前のチャプターで学習したHTMLなどの表示・装飾を指定するために作られた
W3Cの仕様のひとつです。
HTML組み合わせて使用する言語であり、Webページがスクリーンに表示される際のレイアウトなどが定められます。
HTMLはあくまで文書構造を記述するものであり、cssのようなスタイルシートを別ファイルとして保持しておくことで
メディアや対象によってcssを切り替えて違うレイアウトで表示できるというメリットもあります。
<center>や<font>といったHTMLのタグもありますが、これらはHTML5では非推奨のものであり、cssでの記述が望ましいです。

ブロックレベル要素とインライン要素について

ブロックレベル要素

ブロックレベル要素は見出し、段落など文章を構成する基本となる要素です。 ブロックレベル要素の中にブロックレベル要素やインライン要素を入れることはできます。

例：<div> <table> <p> <ol> <dl> <ul> <h1>-<h6>など

インライン要素

インライン要素は、ブロックレベル要素の中で使われるもので、文章の一部に特定の機能などをもたせる要素です。

例：<a> <br> <strong>など

ノート

HTML5では、ブロックレベル要素とインライン要素の区別はなくなりましたが、今後も意識しておくと役立つでしょう。

HTML5における要素の分類は こちら を参照してください。

<div>タグはそれ自体に意味はありません。
しかし、CSSでスタイルを指定する時にテキストや画像等ひとつひとつに記述するのではなく
段落のようにひとつのブロックにまとめてとしてくくってスタイルを適用したいときに使います。
後ほど学習する”idとclass”や最終課題にも関わってきます。

セレクタとプロパティと値

CSSの記述には3つの要素が必要です。
例えば、以下のCSSを見てみましょう。
p {
    color: red;
}
このCSSは pタグの文字色を赤にする という意味です。
pというのはHTMLのpタグを示しており、”セレクタ”と呼ばれる部分です。HTMLのどの部分のスタイルを変更するか指定します。
colorというのはどのようなスタイルを当てるかを記述する”プロパティ”です。colorプロパティは文字色を指定するプロパティです。
redというのはcolorプロパティの”値”に相当する部分です。プロパティで変更すると決めたスタイルを実際どのようなものにするかを記述します。
値がどのようなものになるのかはプロパティによって変わります。
色を指定するプロパティなら色、配置を指定するプロパティならピクセルや%、枠線を指定するプロパティなら点線や二重線などになります。
プロパティと値の間は:(コロン)で繋ぎ、値の後に;(セミコロン)を書きます。
以下のようにひとつのセレクタに対し、複数のプロパティを反映することも可能です。
p {
    color: red;
    font-size: 15px;
    background-color: black;
}


課題1

下記のCSSの[todo]部分を正しく埋めて、<h1>タグを青くするCSSを書きなさい。

[todo] {
    color: [todo];
}



さて、ここで問題が発生しました。
上のような記述をしてしまうと、指定したHTMLタグ全てのスタイルが変更されてしまいます。
こっちとあっちのpタグで違うスタイルを反映させたいという時に使うのがidとclassです。

idとclass

idとclassをHTMLおよびCSSを記述することで幅広いスタイリングが可能になります。

例１：全ての<p>タグに適用する場合

p {
    color: red;
    opacity: 0.5;
}

例２：一つの特定の<p>タグに適用する場合

idにスタイルを適用する際は、cssで # の後にid名を記述します。

HTML

<p id="hogehoge">ここには適用されます。</p>
<p>ここには適用されません。</p>

CSS

#hogehoge {
    color: red;
    opacity: 0.5;
}

警告

同一のIDはひとつのHTML文書の中では一回しか使うことができません。

例３：いくつかの<p>タグにまとめて適用する場合

classにスタイルを適用する際は、cssで . の後にclass名を記述します。

HTML

<p class="foo">ここには適用されます。</p>
<p>ここには適用されません。</p>
<p class="foo">ここにも適用されます。</p>

CSS

.foo {
   color: red;
   opacity: 0.5;
}

ノート

CLASSは複数の要素で使うことができます。

課題2

下記のHTMLの<p>タグに適切なclass名を書いた上でCSSの[todo]部分を補い、「青い」が含まれる段落（<p>タグで囲まれた部分）を青く、「赤い」が含まれる段落を赤くしなさい。

HTML

<p class="blue">青いですー！</p>
<p>ここは関係なーい！</p>
<p class="red">赤いですなー</p>
<p>赤いですね</p>
<p>青いです！</p>
<p>無関係だよん。</p>

[todo] {
   color: red;
}
[todo] {
   color: blue;
}

ウェブカラーとピクセル

CSSの値を書く時に多くみられるのがウェブカラーとピクセルです。
文字色や背景色を指定するときにred, blue, greenといった英単語で指定することもできますが、それでは色の数が限定されてしまいます。
そんなときに使用するのがRGBの三つ組みの16進数形式で色を指定する ウェブカラー です。
ウェブカラーを記述するときは先頭に#をつけ、そのあとに数字が続きます。
例えば#000000というのは黒、#FFFFFFは白を表します。
最初の2桁が”赤”の要素、中央の2桁が”緑”の要素、最後の2桁が”青”の要素を示しており、1つの色が00~FF(0~255)までの段階があります。
それらのウェブカラーを見やすく公開している ウェブサイト がたくさんありますので参考にしてみてください。
ピクセル はコンピュータ等のディスプレイにある色の情報を持つ最小の単位です。
日本語では”画素”と呼ばれ、例えば320×240ピクセルの画像は横に320個、縦に240個の点を並べて表現されています。
これらの数字が大きい画像ファイルの方が、より鮮明な画像ということになります。
CSSでは”50px右に動かす”や”100px下に動かす”といったような記述がよく見受けられます。

主要cssの紹介

cssは非常に多くの種類があります。
ここではいくつかメジャーなものを紹介しますが、
ウェブを使って リファレンスサイト を見つけ出し、様々なcssに挑戦してみてください。

プロパティ 概要 値 サンプルコード
color 色を変える 色 color : red

ブラウザ表示例 : サンプルテキスト

プロパティ 概要 値 サンプルコード
background 背景を変える 色や画像など background : yellow

ブラウザ表示例 : サンプルテキスト

プロパティ 概要 値 サンプルコード
font-weight フォントの太さを変える スタイル font-weight : bold

ブラウザ表示例 : サンプルテキスト

プロパティ 概要 値 サンプルコード
font-size 文字サイズを変える 数値や%等 font-size : 35px

ブラウザ表示例 : サンプルテキスト

プロパティ 概要 値 サンプルコード
text-align 行揃えの位置を変える left,right等 text-align : right
ブラウザ表示例 :

サンプルテキスト

プロパティ 概要 値 サンプルコード
border 枠線を指定 スタイル・太さ等 border : double 10px red

ブラウザ表示例 : サンプルテキスト

プロパティ 概要 値 サンプルコード
list-style マーカーに関する指定 スタイル・画像 list-style: square

ブラウザ表示例 :

  1. サンプルテキスト
プロパティ 概要 値 サンプルコード
vertical-align 垂直方向の揃え位置を指定 スタイル・数値 vertical-align: top

ブラウザ表示例 :

上端揃えのサンプル【ここに適用されてます】
プロパティ 概要 値
display 要素の表示形式（ブロック・インライン）を指定する スタイル 
<ul id="navi">
  <li>サンプルテキスト1</li>
  <li>サンプルテキスト2</li>
  <li>サンプルテキスト3</li>
</ul>

#navi li{
    display: inline;
}

ブラウザ表示例 :

  • サンプルテキスト1
  • サンプルテキスト2
  • サンプルテキスト3

マウスをかざした時のhover

CSSにはマウスをかざした時にスタイルを変更するhoverという機能があります。
セレクタの後に:hoverと記述するだけで、更に幅広いスタイルングが実現できます。
しかし、タッチパネルが主流となっているスマートフォン向けのWebサイトでは
マウスポインタをかざすことができないので、その点を考慮してhoverを使用するようにしましょう。
例えば以下は、通常は文字色が赤であるテキストが
マウスポインタをかざすと色が黄色になり、背景が緑に変化するコードです。
<p>マウスをかざしてください</p>

p {
    color: red;
}
p:hover {
    color: yellow;
    background-color: green;
}

ブラウザ表示例: マウスをかざしてください

margin と padding

cssでコンテンツの位置を指定るするのに margin と padding というのがあります。
大事な点なのでこの2つの違いをしっかりと覚えましょう。
簡単に言うと、marginは領域間のスペースでpaddingは領域内のスペースのことです。
わかりやすく表すと、次の画像のようになります。
_images/margin.png
さらに分かりやすいように、文字の背景を水色に設定したテキストを設置します。

サンプルテキスト

サンプルテキスト　margin:30px 30px 30px 30px

サンプルテキスト padding:30px 30px 30px 30px

サンプルテキスト margin:30px 30px 30px 30px padding:30px 30px 30px 30px

違いが分かりますでしょうか?
領域間のスペースを指定するmarginが設定されているものは、水色の背景が四方向から30pxひとまわり小さくなっています。
領域内のスペースを指定するpaddingが設定されているものは、テキストから
30pxという値が4つも指定されているのは、それぞれ記述した順に[上][右][下][左]のmarginおよびpaddingを表しています。
マージンに負の値を指定することもでき、そうすることでいくつかのコンテンツを重ねて表示することも可能です。
しかし、ブラウザの環境などによって順番や位置が違う可能性があるため、注意しなければなりません。以下がその例です。

黄
margin-bottom:-80px

赤
margin-left:80px

課題3

<div>タグを使って、領域間のスペースが60px、領域内のスペースが30px、幅が200px、高さが150pxで背景を黄色になるように下記のCSSの[todo]部分を補いましょう。

HTML
<div></div>

CSS

div {
    margin: [todo];
    padding: [todo];
    [todo]:200px;
    height: [todo];
    background-color: yellow;
}

中央配置にしてみる

またここで1つ問題が生じてしまいました。
Webサイトをデザインしているときにページを中央配置にしたいことが多いと思います。
その際にコンテンツの左右に例えば30pxのmarginをとったとします。
一見製作中は問題なくデザインできていると思うかもしれませんが、ウィンドウのサイズを変えてみてください。
すると、30pxという固定の値でmarginを取ってしまっているため、コンテンツの位置がバラバラになってしまいます。
text-align:centerはインライン要素のため使用できません。
そんな時に使用するのがautoです。
margin: 0 auto;
と記述すると、marginの値が自動的に定まり、常に適切なスペースを保ちながらの中央揃えが可能となります。
IEなど一部のブラウザでは対応していないので注意してください。
参考サイト

floatとclear

floatとclearも要素の配置を定めるのに重要なプロパティです。
floatプロパティは指定された要素を左または右に寄せて配置する際に使用します。
聞こえは簡単なのですが、初心者がつまずいてしまうのは「後に続く内容が反対側に回り込む」からです。
<p>ユヒーロのロゴです。<img src="http://www.uhero.co.jp/common/images/logo.png">floatが無い状態です。</p>

ユヒーロのロゴです。floatが無い状態です。


それでは画像にlogoという名前でidを付け、float:leftというCSSを反映させてみましょう。
<p>ユヒーロのロゴです。<img id="logo" src="http://www.uhero.co.jp/common/images/logo.png">画像にfloat:leftがついています。</p>

#logo {
    float: left;
}

ユヒーロのロゴです。

画像にfloat:leftがついています。



ここで実はひとつ問題が生じてしまいました。
先述した通り、float:leftが設定されている画像以降の要素はすべて画像の右側に回ってしまうのです。

<p>ユヒーロのロゴです。<img id="logo" src="http://www.uhero.co.jp/common/images/logo.png">画像にfloat:leftがついています。</p>
<p>いろいろな要素を後に記述しても</p>
<p>すべて右に回ってしまいます。</p>

ユヒーロのロゴです。画像にfloat:leftがついています。

いろいろな要素を後に記述しても

すべて右に回ってしまいます。

ここで登場するのがclearプロパティです。
right 右フロートに対する廻り込みを解除します。
left 左フロートに対する廻り込みを解除します。
both 左フロートに対する廻り込みと右フロートに対する廻り込みの双方を解除します。
使い方は、floatが設定されているHTMLの後にclearが設定されているブロックレベルボックスを用意します。

<p>ユヒーロのロゴです。<img id="logo" src="http://www.uhero.co.jp/common/images/logo.png">画像にfloat:leftがついています。</p>
<div style="clear:left" />
<p>clearしているので、フロートの右に回ることはありません。</p>

ユヒーロのロゴです。画像にfloat:leftがついています。

clearしているので、フロートの右に回ることはありません。

このfloatとclearを巧く使いこなせれば
Webページでよく見るサイドナビなどを配置したりできるようになります。

課題4

赤いボックスと2つのテキストが書かれたHTMLとCSSがあります。
“私を右側にまわりこませて。”と書かれたpタグを赤いボックスの右側にまわりこむようにcssの[todo]に適切なプロパティと値を記述してください。
その際、”私はまわりこませないで。”と書かれたpタグも赤いボックスの右側にまわりこんでしまいます。
右側にまわりこませずに通常通り下に表示されるよう[todo]に適切なHTMLを記述してください。
※このHTMLにはstyle属性を適用します。または、idかclassを指定し、新たにcssを記述しても構いません。
<div id="redBox"></div>
<p>私を右側にまわりこませて。</p>
[todo]
<p>私はまわりこませないで。</p>

#redBox {
    width: 100px;
    height: 100px;
    background-color: red;
    [todo]
}

CSSのバージョンについて

CSSはこれまでCSS1,CSS2,CSS2.1とバージョンが新しくなってきており、
現在ではCSS3というバージョンが一番新しいものとなっています。

結論から言ってしまうと、記述方法などに基本的に大きな違いはありません。
今までのCSS2.1で書かれたCSSも問題なく動作します。

主な変更点としては今までになかったアニメーションや装飾の機能が追加されたということです。

例えば以下のようなCSSを書くと

p {
    color: red;
    opacity: 0.5;
}

ブラウザでの表示は

サンプルテキスト

このようになります。
opacityプロパティは透明度を指定するものであり、CSS3で新しく追加された機能です。

他にもボーダーの角を丸くするborder-radiusプロパティ

サンプルテキスト


transitionプロパティを使用したアニメーション

マウスをかざしてください

といった様々な新しい機能が追加されたので、リファレンスサイト等で見てみるといいでしょう。

課題5

Google等の検索エンジンを使ってcssプロパティを紹介しているサイトを閲覧し、
このトレーニングで紹介されていないcssをひとつ選び、実際に挙動を確認してください。

CSS最終課題 - ユヒーロWebサイトをつくろう

HTMLとCSSの仕組みが分かったところで、実際に課題にチャレンジしてみましょう。
CSSをマスターするには慣れが必要です。
初めは思い通りの位置に表示されずに困惑するかもしれませんが、忍耐力を持って取り組んでみてください。
それではまず、ユヒーロの会社情報のWebページ を開いてみましょう。
今回の課題はこのWebページと同じものを作るというものです。
HTMLや画像などはあらかじめ用意されているので、スタイルシートにcssを記述し、できるだけ同じように表示されるようなページを制作してください。
それではまず assignment_css.zip をダウンロードし、デスクトップなど分かりやすい所に保存してください。
ファイルをダブルクリックして、圧縮されているファイルを解凍してください。
ファイルの中にはassignment.html、style.css、imagesフォルダが含まれています。
style.cssには何も記述はありません。
assignment.htmlにclass属性やid属性、必要であればHTMLタグなどを記述しながらstyle.cssにCSSを書き込んでいきましょう。
assignment.htmlをブラウザで開いて更新しががら、自分の意図するCSSが反映されているか確認してみましょう。
ここから 制作例 がダウンロードできます。
CSSの記述には様々な方法があります。
似たような表示だからといってHTMLやスタイルシートが同じということは決してありません。
あくまでも参考にする程度にし、できるだけ自分の力でCSSを書き上げてみてください。

目次

前のトピックへ

HTML入門

次のトピックへ

プログラミングの基礎知識

このページ

ナビゲーション

このドキュメントは Sphinx 1.2.1 で生成しました。