タグはそれ自体に意味はありません。
| しかし、CSSでスタイルを指定する時にテキストや画像等ひとつひとつに記述するのではなく
| 段落のようにひとつのブロックにまとめてとしてくくってスタイルを適用したいときに使います。
| 後ほど学習する"idとclass"や最終課題にも関わってきます。
セレクタとプロパティと値
=========================
| CSSの記述には3つの要素が必要です。
| 例えば、以下のCSSを見てみましょう。
.. code-block:: css
p {
color: red;
}
| このCSSは **pタグの文字色を赤にする** という意味です。
| pというのはHTMLのpタグを示しており、"セレクタ"と呼ばれる部分です。HTMLのどの部分のスタイルを変更するか指定します。
| colorというのはどのようなスタイルを当てるかを記述する"プロパティ"です。colorプロパティは文字色を指定するプロパティです。
| redというのはcolorプロパティの"値"に相当する部分です。プロパティで変更すると決めたスタイルを実際どのようなものにするかを記述します。
| 値がどのようなものになるのかはプロパティによって変わります。
| 色を指定するプロパティなら色、配置を指定するプロパティならピクセルや%、枠線を指定するプロパティなら点線や二重線などになります。
| プロパティと値の間は:(コロン)で繋ぎ、値の後に;(セミコロン)を書きます。
| 以下のようにひとつのセレクタに対し、複数のプロパティを反映することも可能です。
.. code-block:: css
p {
color: red;
font-size: 15px;
background-color: black;
}
|
|
**課題1**
下記のCSSの[todo]部分を正しく埋めて、
タグを青くするCSSを書きなさい。
.. code-block:: css
[todo] {
color: [todo];
}
|
|
|
| さて、ここで問題が発生しました。
| 上のような記述をしてしまうと、指定したHTMLタグ全てのスタイルが変更されてしまいます。
| こっちとあっちのpタグで違うスタイルを反映させたいという時に使うのがidとclassです。
idとclass
==============
| idとclassをHTMLおよびCSSを記述することで幅広いスタイリングが可能になります。
**例１：全ての
タグに適用する場合**
.. code-block:: css
p {
color: red;
opacity: 0.5;
}
**例２：一つの特定の
タグに適用する場合**
| idにスタイルを適用する際は、cssで **#** の後にid名を記述します。
HTML
.. code-block:: html
ここには適用されます。
ここには適用されません。
CSS
.. code-block:: css
#hogehoge {
color: red;
opacity: 0.5;
}
.. warning::
同一のIDはひとつのHTML文書の中では一回しか使うことができません。
**例３：いくつかの
タグにまとめて適用する場合**
| classにスタイルを適用する際は、cssで **.** の後にclass名を記述します。
HTML
.. code-block:: html
ここには適用されます。
ここには適用されません。
ここにも適用されます。
CSS
.. code-block:: css
.foo {
color: red;
opacity: 0.5;
}
.. note::
CLASSは複数の要素で使うことができます。
**課題2**
下記のHTMLの
タグに適切なclass名を書いた上でCSSの[todo]部分を補い、「青い」が含まれる段落（
タグで囲まれた部分）を青く、「赤い」が含まれる段落を赤くしなさい。
HTML
.. code-block:: html
青いですー！
ここは関係なーい！
赤いですなー
赤いですね
青いです！
無関係だよん。
.. code-block:: css
[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
============== ==================== ============ ====================
.. raw :: html
ブラウザ表示例 : サンプルテキスト
============== =================== ================ ========================
プロパティ 概要 値 サンプルコード
============== =================== ================ ========================
background 背景を変える 色や画像など background : yellow
============== =================== ================ ========================
.. raw :: html
ブラウザ表示例 : サンプルテキスト
============== ========================== ================ ========================
プロパティ 概要 値 サンプルコード
============== ========================== ================ ========================
font-weight フォントの太さを変える スタイル font-weight : bold
============== ========================== ================ ========================
.. raw :: html
ブラウザ表示例 : サンプルテキスト
============== ====================== ================ ========================
プロパティ 概要 値 サンプルコード
============== ====================== ================ ========================
font-size 文字サイズを変える 数値や%等 font-size : 35px
============== ====================== ================ ========================
.. raw :: html
ブラウザ表示例 : サンプルテキスト
============== ====================== ================ ========================
プロパティ 概要 値 サンプルコード
============== ====================== ================ ========================
text-align 行揃えの位置を変える left,right等 text-align : right
============== ====================== ================ ========================
.. raw :: html
ブラウザ表示例 : サンプルテキスト
============== ================== ================== =========================
プロパティ 概要 値 サンプルコード
============== ================== ================== =========================
border 枠線を指定 スタイル・太さ等 border : double 10px red
============== ================== ================== =========================
.. raw :: html
ブラウザ表示例 : サンプルテキスト
============== ======================== ================== ========================
プロパティ 概要 値 サンプルコード
============== ======================== ================== ========================
list-style マーカーに関する指定 スタイル・画像 list-style: square
============== ======================== ================== ========================
.. raw :: html
ブラウザ表示例 :
- サンプルテキスト
================ ========================== ================= ========================
プロパティ 概要 値 サンプルコード
================ ========================== ================= ========================
vertical-align 垂直方向の揃え位置を指定 スタイル・数値 vertical-align: top
================ ========================== ================= ========================
.. raw :: html
ブラウザ表示例 :
上端揃えのサンプル【ここに適用されてます】
============== =================================================== ============
プロパティ 概要 値
============== =================================================== ============
display 要素の表示形式（ブロック・インライン）を指定する スタイル
============== =================================================== ============
.. code-block:: html
- サンプルテキスト1
- サンプルテキスト2
- サンプルテキスト3
.. code-block:: css
#navi li{
display: inline;
}
.. raw :: html
ブラウザ表示例 :
- サンプルテキスト1
- サンプルテキスト2
- サンプルテキスト3
マウスをかざした時のhover
-------------------------
| CSSにはマウスをかざした時にスタイルを変更するhoverという機能があります。
| セレクタの後に:hoverと記述するだけで、更に幅広いスタイルングが実現できます。
| しかし、タッチパネルが主流となっているスマートフォン向けのWebサイトでは
| マウスポインタをかざすことができないので、その点を考慮してhoverを使用するようにしましょう。
| 例えば以下は、通常は文字色が赤であるテキストが
| マウスポインタをかざすと色が黄色になり、背景が緑に変化するコードです。
.. code-block:: html
マウスをかざしてください
.. code-block:: css
p {
color: red;
}
p:hover {
color: yellow;
background-color: green;
}
.. raw :: html
ブラウザ表示例: マウスをかざしてください
margin と padding
-----------------------
| cssでコンテンツの位置を指定るするのに **margin** と **padding** というのがあります。
| 大事な点なのでこの2つの違いをしっかりと覚えましょう。
| 簡単に言うと、marginは領域間のスペースでpaddingは領域内のスペースのことです。
| わかりやすく表すと、次の画像のようになります。
.. image:: /_static/margin.png
| さらに分かりやすいように、文字の背景を水色に設定したテキストを設置します。
.. raw :: html
サンプルテキスト
サンプルテキスト 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を表しています。
| マージンに負の値を指定することもでき、そうすることでいくつかのコンテンツを重ねて表示することも可能です。
| しかし、ブラウザの環境などによって順番や位置が違う可能性があるため、注意しなければなりません。以下がその例です。
.. raw :: html
黄
margin-bottom:-80px
赤
margin-left:80px
**課題3**
タグを使って、領域間のスペースが60px、領域内のスペースが30px、幅が200px、高さが150pxで背景を黄色になるように下記のCSSの[todo]部分を補いましょう。
HTML
.. code-block:: html
CSS
.. code-block:: css
div {
margin: [todo];
padding: [todo];
[todo]:200px;
height: [todo];
background-color: yellow;
}
中央配置にしてみる
-------------------
| またここで1つ問題が生じてしまいました。
| Webサイトをデザインしているときにページを中央配置にしたいことが多いと思います。
| その際にコンテンツの左右に例えば30pxのmarginをとったとします。
| 一見製作中は問題なくデザインできていると思うかもしれませんが、ウィンドウのサイズを変えてみてください。
| すると、30pxという固定の値でmarginを取ってしまっているため、コンテンツの位置がバラバラになってしまいます。
| text-align:centerはインライン要素のため使用できません。
| そんな時に使用するのがautoです。
.. code-block:: css
margin: 0 auto;
| と記述すると、marginの値が自動的に定まり、常に適切なスペースを保ちながらの中央揃えが可能となります。
| IEなど一部のブラウザでは対応していないので注意してください。
| `参考サイト
`_
floatとclear
-----------------
| floatとclearも要素の配置を定めるのに重要なプロパティです。
| floatプロパティは指定された要素を左または右に寄せて配置する際に使用します。
| 聞こえは簡単なのですが、初心者がつまずいてしまうのは「後に続く内容が反対側に回り込む」からです。
.. code-block:: html
ユヒーロのロゴです。
floatが無い状態です。
.. raw:: html
ユヒーロのロゴです。floatが無い状態です。
|
| それでは画像にlogoという名前でidを付け、float:leftというCSSを反映させてみましょう。
.. code-block:: html
ユヒーロのロゴです。画像にfloat:leftがついています。
.. code-block:: css
#logo {
float: left;
}
.. raw:: html
ユヒーロのロゴです。
画像にfloat:leftがついています。
|
| ここで実はひとつ問題が生じてしまいました。
| 先述した通り、float:leftが設定されている画像以降の要素はすべて画像の右側に回ってしまうのです。
|
.. code-block:: html
ユヒーロのロゴです。画像にfloat:leftがついています。
いろいろな要素を後に記述しても
すべて右に回ってしまいます。
.. raw:: html
ユヒーロのロゴです。画像にfloat:leftがついています。
いろいろな要素を後に記述しても
すべて右に回ってしまいます。
| ここで登場するのがclearプロパティです。
========= =================================================================================
right 右フロートに対する廻り込みを解除します。
left 左フロートに対する廻り込みを解除します。
both 左フロートに対する廻り込みと右フロートに対する廻り込みの双方を解除します。
========= =================================================================================
| 使い方は、floatが設定されているHTMLの後にclearが設定されているブロックレベルボックスを用意します。
|
.. code-block:: html
ユヒーロのロゴです。画像にfloat:leftがついています。
clearしているので、フロートの右に回ることはありません。
.. raw:: html
ユヒーロのロゴです。画像にfloat:leftがついています。
clearしているので、フロートの右に回ることはありません。
| このfloatとclearを巧く使いこなせれば
| Webページでよく見るサイドナビなどを配置したりできるようになります。
|
**課題4**
| 赤いボックスと2つのテキストが書かれたHTMLとCSSがあります。
| "私を右側にまわりこませて。"と書かれたpタグを赤いボックスの右側にまわりこむようにcssの[todo]に適切なプロパティと値を記述してください。
| その際、"私はまわりこませないで。"と書かれたpタグも赤いボックスの右側にまわりこんでしまいます。
| 右側にまわりこませずに通常通り下に表示されるよう[todo]に適切なHTMLを記述してください。
| ※このHTMLにはstyle属性を適用します。または、idかclassを指定し、新たにcssを記述しても構いません。
.. code-block:: html
私を右側にまわりこませて。
[todo]
私はまわりこませないで。
.. code-block:: css
#redBox {
width: 100px;
height: 100px;
background-color: red;
[todo]
}
CSSのバージョンについて
===========================
| CSSはこれまでCSS1,CSS2,CSS2.1とバージョンが新しくなってきており、
| 現在ではCSS3というバージョンが一番新しいものとなっています。
|
| 結論から言ってしまうと、記述方法などに基本的に大きな違いはありません。
| 今までのCSS2.1で書かれたCSSも問題なく動作します。
|
| 主な変更点としては今までになかったアニメーションや装飾の機能が追加されたということです。
|
| 例えば以下のようなCSSを書くと
|
.. code-block:: css
p {
color: red;
opacity: 0.5;
}
|
| ブラウザでの表示は
.. raw :: html
サンプルテキスト
| このようになります。
| opacityプロパティは透明度を指定するものであり、CSS3で新しく追加された機能です。
|
| 他にもボーダーの角を丸くするborder-radiusプロパティ
.. raw :: html
サンプルテキスト
|
| transitionプロパティを使用したアニメーション
.. raw :: html
マウスをかざしてください
| といった様々な新しい機能が追加されたので、リファレンスサイト等で見てみるといいでしょう。
**課題5**
| Google等の検索エンジンを使ってcssプロパティを紹介しているサイトを閲覧し、
| このトレーニングで紹介されていないcssをひとつ選び、実際に挙動を確認してください。
CSS最終課題 - ユヒーロWebサイトをつくろう
=============================================
| HTMLとCSSの仕組みが分かったところで、実際に課題にチャレンジしてみましょう。
| CSSをマスターするには慣れが必要です。
| 初めは思い通りの位置に表示されずに困惑するかもしれませんが、忍耐力を持って取り組んでみてください。
| それではまず、`ユヒーロの会社情報のWebページ `_ を開いてみましょう。
| 今回の課題はこのWebページと同じものを作るというものです。
| HTMLや画像などはあらかじめ用意されているので、スタイルシートにcssを記述し、できるだけ同じように表示されるようなページを制作してください。
それではまず :download:`assignment_css.zip ` をダウンロードし、デスクトップなど分かりやすい所に保存してください。
| ファイルをダブルクリックして、圧縮されているファイルを解凍してください。
| ファイルの中にはassignment.html、style.css、imagesフォルダが含まれています。
| style.cssには何も記述はありません。
| assignment.htmlにclass属性やid属性、必要であればHTMLタグなどを記述しながらstyle.cssにCSSを書き込んでいきましょう。
| assignment.htmlをブラウザで開いて更新しががら、自分の意図するCSSが反映されているか確認してみましょう。
ここから :download:`制作例 ` がダウンロードできます。
| CSSの記述には様々な方法があります。
| 似たような表示だからといってHTMLやスタイルシートが同じということは決してありません。
| あくまでも参考にする程度にし、できるだけ自分の力でCSSを書き上げてみてください。