ＣＳＳ講座① （ＣＳＳとは）
■ ＣＳＳ講座① （ＣＳＳとは）
★ ＣＳＳとは
CSS(Cascading Style Sheets)
段階スタイルシート
カスケーディング・スタイル・シート
カスケード・スタイル・シート
といいます。
ＨＴＭＬやＸＭＬなどの文章や画像などをどの様に
表示するかを指定します。
※ ＨＴＭＬ（エイチティーエムエル、HyperText Markup Language）
Web上のページを記述するマークアップ言語
※ ＸＭＬ(Extensible Markup Language （エクステンシブル・マークアップ・ランゲージ、
拡張可能なマーク付け言語）
文書やデータの意味や構造を記述するためのマークアップ言語
★ＣＳＳは、直接ＨＴＭＬタグに書き込む方法とＨＴＭＬとは
別のファイルやヘッド(head)部などに分離して書くことができます。
● 直接ＨＴＭＬに書く場合は、style で指示します。
（例）文字の大きさを18px 文字の色を青に指示
<div style="font-size:18px;color:blue;"> こんにちは </div>
● headに書く場合は、<style type="text/css">～ＣＳＳ内容～ </style> で
指示します。
（例）文字の大きさを18px 文字の色を青に指示
<head>
<style type="text/css">
.run1 {
font-size:18px;
color:blue;
}
</style>
</head>
<body>
<div class="run1"> こんにちは </div>
</body>
● 別のファイルに書く場合は、head に
<link rel="stylesheet" media="screen,print" type="text/css"
href="ＣＳＳがあるＵＲＬ.css">で指示します。
（例）文字の大きさを18px 文字の色を青に指示
<head>
<link rel="stylesheet" media="screen,print" type="text/css" href="cssfile1.css">
</head>
<body>
<div class="run1"> こんにちは </div>
</body>
◦ cssfile1の中身
.run1 {
font-size:18px;
color:blue;
}
※ アメブロの場合、ＣＳＳ編集可能なスキンの編集可能なＣＳＳ部分は、下記の様に
指示されています。（charset は UTF-8 のエンコードです）
<link rel="stylesheet" media="screen,print" type="text/css" href="http://ameblo.jp/skin/templates/7d/20/xxxxxxxxxxx.css" charset="UTF-8" />
* xxxxxxxxxxx は数字。
● 直接ＨＴＭＬに記述するより、上記の様に別ファイルや別途ＣＳＳを
指示するとフォントやデザインの変更が簡単にできます。
また、構造的なのでわかりやすい利点があります。
（例）
◦ ＨＴＭＬに直接記述
<div style="font-size:18px;color:blue;"> こんにちは </div>
<div style="font-size:18px;color:blue;"> こんばんは </div>
◦ ＣＳＳに記述
.run1 {
font-size:18px;
color:blue;
}
<div class="run1"> こんにちは </div>
<div class="run1"> こんばんは </div>
● ブラウザの誤動作を防ぐために、ＨＴＭＬの<head>部分には下記が
記述されています。
<meta http-equiv="content-style-type" content="text/css" />