Logo
スタイルシート
C305 情報発信の基礎【第5回】
Logo
表現方法の工夫
スタイルの統一
要素によって異なるスタイル
表現方法の工夫
部分的に文字色を変える
下線をつけ重要な部分を強調する
文字の大きさや色使い
画像のサイズや表示範囲に配慮する
みんなが自分と同じ条件でWebページを見るとは限らない
Logo
HTMLとスタイルシート
 スタイルシート
文字の大きさや色などをまとめて指定する方法
 CSS（Cascading
Style Sheet）
Logo
スタイルシートの記述
内部スタイルシート
headの中に<style>・・・</style>で指定
外部スタイルシート
<LINK rel="stylesheet" href="style01.css"
type="text/css">
Logo
スタイルシートの表現
スタイルシートの表現方法
セレクタ ｛ 種別 ： 指定値 ； ｝
何に対してスタイルを設定できるか
 タグ，クラス，ID
Logo
スタイルシートの利点
 凝ったレイアウトの作成
 スタイルシートを変えるだけで見栄えを変化
 共通のスタイルシートを使った，複数HTML
ファイルに統一したデザインの適用
Logo
スタイルシート①
body{
background-color : #baf0fe;
}
h1{
color : #0000ff;
padding : 5px; 内のり幅
background-color : #4de88e;
border : solid #9888d7 5px;
}
背景色
太線枠の色と幅
Logo
スタイルシート②
h2{
color : #cc00ff;
border-bottom : double #ffc0c0 5px;
二重線枠の色と幅
}
p{
margin-left : 30px;
右マージン幅
color : #8000ff;
}
Logo
スタイルシート③
img{
margin-right : 40px;
float : right;
左寄せ
}

社会と情報

社会と情報