第2回プレゼン資料 CSS

CSSを利用したWebデザイン
理工学部情報学科 3回生
03-1-47-037
喜多亮輔
目次








CSSとは何か
CSSの記述方法
CSSのメリット
CSSのデメリット
CSS適用の際の注意点
まとめ
今後の活用方法
参考文献 Webページ
CSSとは何か




Cascade Style Sheets（カスケード・スタイ
ル・シート）
Webページのレイアウトを定義する規格
CSSを使うと、デザインに関する情報を文
書本体から切り離すことができる。
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>⇒


コンピュータから見ても「これ
らの見出しは情報の重要度
が高い」とみなされる
↓
検索結果にも反映される
情報の重要度は平坦
↓
コンピュータからは「重要な
情報は少ない」と判断してし
まう
CSSのメリット
表示画面
①ヘッダ
②左メ
③メインコ
ニュー
ンテンツ
④フッタ
音
声
ブ
ラ
ウ
ザ
の
読
み
上
げ
順
HTML記述
①ヘッダ
②左メニュー
③メインコンテンツ
④フッタ
CSSのメリット
表示画面
①ヘッダ
②左メ
③メインコ
ニュー
ンテンツ
④フッタ
音
声
ブ
ラ
ウ
ザ
の
読
み
上
げ
順
HTML記述
①ヘッダ
③メインコンテンツ
②左メニュー
④フッタ
CSSのデメリット



Webブラウザ間での表示の違い
事前にHTML構造の設計を行っていないと、
追加、更新の作業が複雑になる
ページ全体に、CSSを適用しようとすると、
多大な労力、時間がかかる
CSS適用の際の注意点



IE６、および多くのCSS対応ブラウザでは
標準レンダリング
IE５、およびIE６の特定モードでは、後方互
換レンダリング
その他、OSやブラウザの違いにより、バグ
や実装方法が違ってくる
CSS適用の際の注意点


f14{
font-size:14pt;
color: red;
font-weight: bold;}
f10{
font-size:10pt;
color: red;
font-weight: bold;}


f14{
font-size:14pt;
color: blue;
font-weight: bold;}
f10{
font-size:10pt;
color: blue;
font-weight: bold;}
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>
まとめ




ユーザが使用しているWebブラウザやOS
について調査する
CSS適用範囲の決定
HTMLレンダリングの決定
CSSファイルの分割方法の決定
まとめ
CSSファイルは書式を細分化して
記述する
 ↑最重要！！
 これさえ守れば、あなたもWebデ
ザイナー！！

今後の活用方法
ECL、CHN、及び自身のHPへの適
用
 自作Webデザインテンプレートの
作成、配布

参考文献 Webページ




CSSリファレンス編
http://www.zspc.com/stylesheets/css/re
ference.html
CSS入門講座
http://msugai.fc2web.com/web/tut/CSS
tut/
参考文献 Webページ



CSSデザインテンプレート
http://www.shoshinsha.com/hp/templat
e/
WebSite expert #04号

Download Report