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