Download presentation
Presentation is loading. Please wait.
1
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔
2
目次 CSSとは何か CSSの記述方法 CSSのメリット CSSのデメリット CSS適用の際の注意点 まとめ 今後の活用方法
参考文献 Webページ
3
CSSとは何か Cascade Style Sheets（カスケード・スタイル・シート） Webページのレイアウトを定義する規格
WWWに関する標準化団体W3Cで標準化されている
4
CSSの記述方法 まず、HTMLファイルを用意する タイトル、サブタイトル等、文章の種類によって、タグを使い分ける
（名前は、自由に付けることが可能） CSSファイルに、タグ毎の書式を設定する
5
<!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>
6
body { padding: 1em 5%; background: #ccccff } p { margin: 0.5em 0; padding: 1em; text-indent: 1em; line-height: 1.5; background: #eeeeff }
7
CSSのメリット SEO対策<h1>,<h2>等の構造化タグを使用することで効果を発揮
視覚障害者に優しいWebページを提供することができる Webデザインの追加、更新が容易
8
<h1>見出し</h1> 本文・・・・・・・・・⇒
<I>見出し</I> <b>本文・</b>⇒ コンピュータから見ても「これらの見出しは情報の重要度が高い」とみなされる ↓ 検索結果にも反映される 情報の重要度は平坦 ↓ コンピュータからは「重要な情報は少ない」と判断してしまう
9
HTML記述だけでは、メニューが毎回読み上げられて、煩わしい
CSSのメリット 表示画面 HTML記述 音声ブラウザの読み上げ順 ①ヘッダ ②左メニュー ③メインコンテンツ ④フッタ ①ヘッダ ②左メニュー ③メインコンテンツ ④フッタ HTML記述だけでは、メニューが毎回読み上げられて、煩わしい
10
メニューより先にメインコンテンツが読まれる為、
CSSのメリット 表示画面 HTML記述 音声ブラウザの読み上げ順 ①ヘッダ ②左メニュー ③メインコンテンツ ④フッタ ①ヘッダ ③メインコンテンツ ②左メニュー ④フッタ メニューより先にメインコンテンツが読まれる為、 知りたい情報がすぐにわかる！
11
CSSのデメリット Webブラウザ間での表示の違い 事前にHTML構造の設計を行っていないと、追加、更新の作業が複雑になる
12
CSS適用の際の注意点 IE６、および多くのCSS対応ブラウザでは標準レンダリング
IE５、およびIE６の特定モードでは、後方互換レンダリング その他、OSやブラウザの違いにより、バグや実装方法が違ってくる
13
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記述量がかえって多くなってしまう！
14
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が見易くなり、編集、更新も容易になる
15
まとめ ユーザが使用しているWebブラウザやOSについて調査する CSS適用範囲の決定 HTMLレンダリングの決定
16
まとめ CSSファイルは書式を細分化して記述する ↑最重要！！ これさえ守れば、あなたもWebデザイナー！！
17
今後の活用方法 ECL、CHN、及び自身のHPへの適用 自作Webデザインテンプレートの作成、配布
18
参考文献 Webページ CSSリファレンス編
CSS入門講座
19
参考文献 Webページ CSSデザインテンプレート http://www.shoshinsha.com/hp/template/
WebSite expert #04号
Similar presentations
