Webページ教材開発テキスト
3-3 CSSについて
<![CDATA[
(1) CSSとは
CSS（Cascading Style Sheets）とは、Webページのスタイルを指定するための言語です。
CSSは、HTMLと組み合わせて使用する言語です。HTMLがWebページの要素の意味や情報構造
を定義し、CSSではそれらをどう装飾するかを指示します。 例えば色、フォントの大きさ、
字体、背景色、下線、枠線等を表示させることができます。
(2) CSSはどこに書く
書く場所として３つの方法があります。次の３つのうち、どれかの方法をとります。
① 外部ファイルとして書く
外部にCSS用のファイルを作り、それを読み込んで利用します
複数のページで同じ書式にしたいとき有効です。
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
② ヘッダにCSSを記載する
ページ内で書式をそろえることができます。
<head>
<style>
h1{color:red;}
</style>
</head>
③ HTMLタグ内部に記載する
その要素だけに別の書式を設定したいときに利用します。
それぞれの要素に記載するので、修正が大変になります。
<h1 style="color:red;">題名</h1>
(3) CSSの書き方
① 基本
h1タグのフォントサイズを20px・文字の色を青にしたいときは次のようします。
例：
h1{
font-size: 20px;
color: #0000ff;
}
※「:」「;」の区別、つけ忘れをしないようにしてください。
② スタイルを適用する対象の指定のしかた
ア 要素名で指定する（h1、h2、pなどの）
例：
p{color: #0000ff;}
イ idセレクタで指定する
例： <div id="sitei">ここを指定</id>
#sitei{cursor:pointer}
ウ classセレクタで指定する
例：<div class="koko">ここを指定</div>
.koko{background-color:#888888}
エ 指定のしかたの結論
では、どの方法で指定すればいいのかというと、「ウ classセレクタで指定」が一番
適しています。idは次に述べるJavascriptの作動を指定するのに使います。
(4) CSSの表記例
/* この間はコメントアウト */
color: #000000; /* 文字色を#000000（黒） */
background-color: #ffffff; /* 背景色を#ffffff（白） */
font-weight: bold; /* フォントの太さを指定する */
font-size: 500%; /* 文字の大きさ500% */
width:200px; height:100px; /* 幅を200px 高さを100px */
z-index: 999; /* 数値が大きいほど手前に表示*/
padding: 10px 10px 15px 10px;/* 周りの空白 */
border-radius:4px; /* 枠を角丸にする */
border: 1px solid #bbd; /* 枠線を1px 線種指定、色指定*/
float:left; /* 回り込んで表示させる */
opacity:0.2; /* 透明にする */
cursor : pointer; /* カーソルを指の形にする */
display: inline; /* リストを横に並べて表示 */
]]>
