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