CSSを利用したWebデザイン 理工学部 情報学科 3回生 03-1-47-037 喜多 亮輔
目次 CSSとは何か CSSの記述方法 CSSのメリット CSSのデメリット CSS適用の際の注意点 まとめ 今後の活用方法 参考文献 Webページ
CSSとは何か Cascade Style Sheets（カスケード・スタイル・シート） Webページのレイアウトを定義する規格 WWWに関する標準化団体W3Cで標準化されている
CSSの記述方法 まず、HTMLファイルを用意する タイトル、サブタイトル等、文章の種類によって、タグを使い分ける （名前は、自由に付けることが可能） CSSファイルに、タグ毎の書式を設定する
<!DOCTYPE html ・・・・・・・・・・ ↓ <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv=“content-style-type” content=“text/css”> ←「CSSファイルを定義するタグ」 <title>CSS</title> <link rel=“stylesheet” href=“./atomic.css” type=“text/css” media=“screen”> ↑「CSSファイルを読み込むタグ」 </head> <body> <h1>CSSとは何か？</h1> <p>……………..</p></body></html>
body { padding: 1em 5%; background: #ccccff } p { margin: 0.5em 0; padding: 1em; text-indent: 1em; line-height: 1.5; background: #eeeeff }
CSSのメリット SEO対策<h1>,<h2>等の構造化タグを使用することで効果を発揮 視覚障害者に優しいWebページを提供することができる Webデザインの追加、更新が容易
<h1>見出し</h1> 本文・・・・・・・・・⇒ <I>見出し</I> <b>本文・</b>⇒ コンピュータから見ても「これらの見出しは情報の重要度が高い」とみなされる ↓ 検索結果にも反映される 情報の重要度は平坦 ↓ コンピュータからは「重要な情報は少ない」と判断してしまう
HTML記述だけでは、メニューが毎回読み上げられて、煩わしい CSSのメリット 表示画面 HTML記述 音声ブラウザの読み上げ順 ①ヘッダ ②左メニュー ③メインコンテンツ ④フッタ ①ヘッダ ②左メニュー ③メインコンテンツ ④フッタ HTML記述だけでは、メニューが毎回読み上げられて、煩わしい
メニューより先にメインコンテンツが読まれる為、 CSSのメリット 表示画面 HTML記述 音声ブラウザの読み上げ順 ①ヘッダ ②左メニュー ③メインコンテンツ ④フッタ ①ヘッダ ③メインコンテンツ ②左メニュー ④フッタ メニューより先にメインコンテンツが読まれる為、 知りたい情報がすぐにわかる！
CSSのデメリット Webブラウザ間での表示の違い 事前にHTML構造の設計を行っていないと、追加、更新の作業が複雑になる
CSS適用の際の注意点 IE６、および多くのCSS対応ブラウザでは標準レンダリング IE５、およびIE６の特定モードでは、後方互換レンダリング その他、OSやブラウザの違いにより、バグや実装方法が違ってくる
CSS記述量がかえって多くなってしまう！ f14{ font-size:14pt; color: red; font-weight: bold;} f10{ font-size:10pt; f14{ font-size:14pt; color: blue; font-weight: bold;} f10{ font-size:10pt; CSS記述量がかえって多くなってしまう！
CSS適用の際の注意点 f10{ font-size: 10pt; } f14{ font-size: 14pt; fred{ color: red;} fblue{ color: blue;} fb{ font-weight: bold;} <span class=“f14 fred fb”>赤い14ポイントの強調文字</span> <span class=“f10 fblue fb”>青い10ポイントの強調文字</span> 書式を細分化して記述することで、 CSSが見易くなり、編集、更新も容易になる
まとめ ユーザが使用しているWebブラウザやOSについて調査する CSS適用範囲の決定 HTMLレンダリングの決定
まとめ CSSファイルは書式を細分化して記述する ↑最重要！！ これさえ守れば、あなたもWebデザイナー！！
今後の活用方法 ECL、CHN、及び自身のHPへの適用 自作Webデザインテンプレートの作成、配布
参考文献 Webページ CSSリファレンス編 http://www.zspc.com/stylesheets/css/reference.html CSS入門講座 http://msugai.fc2web.com/web/tut/CSStut/
参考文献 Webページ CSSデザインテンプレート http://www.shoshinsha.com/hp/template/ WebSite expert #04号