PowerPoint プレゼンテーション

T2V技術
Web製作ラボ
5
4/18, 2012
hayashiLabo
スタイルシート
スタイルシートとは？
・タグに対して与えるスタイルのこと
・「内容とデザイン」におけるデザインの方
・昨今のWebの基本
スタイルシートとは何か？
<h1>河童</h1>
<h2>芥川龍之介</h2>
<h3>序</h3>
<p>
これは或精神病院の患者、――第二十三号が誰にで
もしやべる話である。彼はもう三十を越してゐるであら
う。が、一見した所は如何にも………
</p>
<hr>
たとえば、こういう典型的なHTMLが
あったとき、このままブラウザで表
示すると次のようになる
スタイルシートとは何か？
h1、h2、h3という見出しタグと
pタグによる段落
そしてhrタグによる横水平線
の典型的な地味ルックスです。
スタイルシートとは何か？
h1{
}
h2{
}
h3{
}
p{
}
hr{
}
font-size: 30pt;
text-align: center;
text-align: center;
color: #0000aa;
margin-bottom: 50px;
color: #ffffff;
background-color: #aa5000;
text-align: left;
padding: 1%;
font-family: "MS Mincho";
line-height: 150%;
margin: 1%;
padding: 1%;
border-width:1px 0px 0px 0px;
border-style:solid;
height: 1px;
このHTMLにこんなスタイルシートを
組み合わせると次のようになる
スタイルシートとは何か？
たとえば、こういう典型的なHTMLが
あったとき、このままブラウザで表
示すると次のようになる
このようにデザインされた形で表示
されるようになる
スタイルシートとは何か？
h1{
}
body{
}
h2{
}
p{
}
color: #ff0000;
text-align: center;
font-size: 20pt;
background-color: #00ff7f;
color: #ffffff;
background-color: purple;
border-style: double;
border-width: 6pt;
text-align: center;
margin-right: 20%;
margin-left: 20%;
font-size: 10pt;
margin: 1%;
padding: 2%;
line-height: 120%;
border-style: double;
border-color: #ff0000;
background-color: #ffcccc;
あるいはこんなスタイルシートを組
み合わせると次のようになる
スタイルシートとは何か？
このようにデザインはガラリと変わ
る（これはセンス無い例）
スタイルシートの種類
３つのやり方があります
１．インライン
２．文書全体
３．外部参照
どれでやってもいいんですが、
３の外部参照をメインにして、ときどき２を
組み合わせるのが基本です
インライン
<h1 style="color:red; font-size:100px;">
河童
</h1>
のようにタグの中にスタイルシートを指定すると
という風になります
インライン
•そこだけに適用される
•HTMLでやるよりはたくさんデザインできる
•一括でデザインを変えられるメリットがない
•「そこだけデザイン変えたい」という時に使う
文書全体
<head>
<style type="text/css">
h2
{
color: purple;
font-size: 50px;
}
</style>
</head>
<body>
<h2>芥川龍之介</h2>
</body>
のようにheadタグ内に、styleタグで囲んでスタイル
シートを指定すると
という風になります
文書全体
•そのHTMLファイル全体に適用される
•styleタグの中で定義しておけば一括でデザインを
変えられる
•「その文書だけデザイン変えたい」という時に使う
外部参照
h3
{
font-weight:bold;
text-decoration:underline;
}
という内容のテキストファイル
を作り、それにtest.cssという
名前をつける
<head>
<link rel="stylesheet" type="text/css" href= " test.css"
</head>
<body>
<h3>どうか Kappa と発音して下さい</h3>
</body>
という風になります
linkタグで上
記test.cssを
指定すると
文書全体
•複数のHTMLファイルに対して適用できる
•cssファイルを編集するだけで複数の文書につい
て一括でデザインを変えられる
•Webサイト全体に共通なスタイル指定として使う

Download Report