;スタイルシートの記述例
1箇所でまとめて行う記述例
別個のスタイルシート・ファイルを作り、HTMLファイルの書式設定を1箇所でまとめて行う
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 {
color:red;
font-size:36pt;
} # h1 タグにスタイルを指定する
-->
</style>
</head>
<body>
<h1>1箇所でまとめて行う書式設定の構造</h1>＃ここがスタイルの影響を受けます
</body>
</html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 {
color:red;
font-size:36pt;
} # h1 タグにスタイルを指定する
-->
</style>
</head>
<body>
<h1>1箇所でまとめて行う書式設定の構造</h1>＃ここがスタイルの影響を受けます
</body>
</html>
HTML要素のために書式設定を定義する
<html>
<head>
<title>HTML要素のために書式設定を定義する</title>
<style type="text/css">
<!--
body {
background-color:#FFFFCC;
margin-left:100px;
}
＃body全体のスタイル指定
h1 {
font-size:48pt;
color:#eb00;
font-style:italic;
border-bottom:solid thin black;
}
＃ｈ１に対するスタイル指定
p,li {
font-size:12pt;
line-height:14pt;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.2mm;
word-spacing:0.8mm;
color:blue;
}
＃ｐ li にスタイルを指定
-->
</style>
</head>
<body>
＊ <h1>見出しレベル１</h1>
＊ <p>普通のテキスト段落</p>
＊ <ul>
<li>リストの項目</li>
＊ <li>次のリストの項目 </li>
＊ </body>
</html>
<head>
<title>HTML要素のために書式設定を定義する</title>
<style type="text/css">
<!--
body {
background-color:#FFFFCC;
margin-left:100px;
}
＃body全体のスタイル指定
h1 {
font-size:48pt;
color:#eb00;
font-style:italic;
border-bottom:solid thin black;
}
＃ｈ１に対するスタイル指定
p,li {
font-size:12pt;
line-height:14pt;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.2mm;
word-spacing:0.8mm;
color:blue;
}
＃ｐ li にスタイルを指定
-->
</style>
</head>
<body>
＊ <h1>見出しレベル１</h1>
＊ <p>普通のテキスト段落</p>
＊ <ul>
<li>リストの項目</li>
＊ <li>次のリストの項目 </li>
＊ </body>
</html>
入れ子式のHTML要素の書式設定を定義する
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
-->
</style>
</head>
<body>
<h1>スタイルシートを勉強しよう</h1>
<h1><i>スタイルシート</i>を勉強しよう</h1>
</body>
</html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
-->
</style>
</head>
<body>
<h1>スタイルシートを勉強しよう</h1>
<h1><i>スタイルシート</i>を勉強しよう</h1>
</body>
</html>
クラスの書式を定義する
ＣＬＡＳＳは、同じページ中でも何度でも繰り返し使用できます
例: このようになります。
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { font-family:Arial,sans-serif; font-size:24pt;
font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
-->
</style>
</head>
<body><h1>H1 スタイルシートの書き方</h1>
<h1 class="hinterlegt">H1 背景に色をつける</h1>
<h2>H2 普通<span class="hinterlegt">背景<b class="extra">色を変えて</b> 表示</span></h2>
</body>
</html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { font-family:Arial,sans-serif; font-size:24pt;
font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
-->
</style>
</head>
<body><h1>H1 スタイルシートの書き方</h1>
<h1 class="hinterlegt">H1 背景に色をつける</h1>
<h2>H2 普通<span class="hinterlegt">背景<b class="extra">色を変えて</b> 表示</span></h2>
</body>
</html>
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
div i { color:red; }
div > p { color:blue; }
div * b { color:violet; }
div + p { margin-top:100px; }
-->
</style>
</head>
<body>
<div align="center"> 強調したい文字や<b>単語などを</b>訪問者に<i>印象付ける<b>手段として</b>より有効に</i>.<p> 文字の修飾ができれば、文章全体の <b>印象も</b> より <i>効果的に伝えることが可能となります<b>使いすぎは</b>文字を</i> 判読ししくなる場合も有ります</p> <table border="1"><tr>
<td><p>使用は効果的に且つ最低限に</p></td>
</tr></table>
</div>
<p>文字の修飾はあくまで文他全体の中での <b>バランス</b> と<i>キーワード<b>意訳</b>表現</i>.</p>
<p>等に留意しましょう</p>
</body>
</html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
div i { color:red; }
div > p { color:blue; }
div * b { color:violet; }
div + p { margin-top:100px; }
-->
</style>
</head>
<body>
<div align="center"> 強調したい文字や<b>単語などを</b>訪問者に<i>印象付ける<b>手段として</b>より有効に</i>.<p> 文字の修飾ができれば、文章全体の <b>印象も</b> より <i>効果的に伝えることが可能となります<b>使いすぎは</b>文字を</i> 判読ししくなる場合も有ります</p> <table border="1"><tr>
<td><p>使用は効果的に且つ最低限に</p></td>
</tr></table>
</div>
<p>文字の修飾はあくまで文他全体の中での <b>バランス</b> と<i>キーワード<b>意訳</b>表現</i>.</p>
<p>等に留意しましょう</p>
</body>
</html>
例: このようになります。
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
.body { background-color:#EEEEFF; }
.chap {
font-family:Arial;
font-size:20pt;
color:blue;
border-bottom-style:solid;
border-bottom-width:3px;
border-color:red;
margin:0px;
margin-bottom:16px;
}
.sect {
font-family:Arial;
font-size:16pt;
color:blue;
border-bottom-style:solid;
border-bottom-width:3px;
border-color:red;
margin:0px;
margin-top:24px;
margin-bottom:16px;
}
.p {
font-family:Arial; font-size:11pt;
color:black;
margin-top:6px;
margin-bottom:6px;
}
.red { color:red }
.blue { color:blue }
.bold { font-weight:bold }
.big { font-size:14pt }
.small {
font-size:6pt;
font-family:Small Fonts,sans-serif;
}
-->
</style>
</head>
<body>
<div class="chap">MOPA.TC.TC CSS Tips</div>
<div class="p"> このTipsは世界中にあるHTMLやCSS関連のサイトから勝手に拝借し、<br> 勝手に修正して公開してます。まあ、盗作ですね</div>
<div class="sect">CSSはデザイン</div>
<div class="p">画像の代替<span class="red">表示を軽くする<span class="bold"> 容量も少なく</span></span> 多彩な文字表現</div>
<div class="p">文字種<span class="big">font</span> は<span class="small"> ブラウザ</span>に依存してしまう</div>
</body>
</html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
.body { background-color:#EEEEFF; }
.chap {
font-family:Arial;
font-size:20pt;
color:blue;
border-bottom-style:solid;
border-bottom-width:3px;
border-color:red;
margin:0px;
margin-bottom:16px;
}
.sect {
font-family:Arial;
font-size:16pt;
color:blue;
border-bottom-style:solid;
border-bottom-width:3px;
border-color:red;
margin:0px;
margin-top:24px;
margin-bottom:16px;
}
.p {
font-family:Arial; font-size:11pt;
color:black;
margin-top:6px;
margin-bottom:6px;
}
.red { color:red }
.blue { color:blue }
.bold { font-weight:bold }
.big { font-size:14pt }
.small {
font-size:6pt;
font-family:Small Fonts,sans-serif;
}
-->
</style>
</head>
<body>
<div class="chap">MOPA.TC.TC CSS Tips</div>
<div class="p"> このTipsは世界中にあるHTMLやCSS関連のサイトから勝手に拝借し、<br> 勝手に修正して公開してます。まあ、盗作ですね</div>
<div class="sect">CSSはデザイン</div>
<div class="p">画像の代替<span class="red">表示を軽くする<span class="bold"> 容量も少なく</span></span> 多彩な文字表現</div>
<div class="p">文字種<span class="big">font</span> は<span class="small"> ブラウザ</span>に依存してしまう</div>
</body>
</html>
DIの書式を設定する
IDは同じページで１回だけ使用します。
例: このようになります。
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
#roterBereich {
position:absolute;
top:130px;
left:30px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
#blauerBereich {
position:absolute;
top:130px;
left:400px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #0000EE;
}
h1#Titel {
font-family:Arial;
font-size:24pt;
font-weight:normal;
color:green;
}
-->
</style>
</head>
<body>
<h1id="Titel">IDで書式を設定しています</h1>
<divid="roterBereich"><h1>赤いゾーン</h1></div>
<divid="blauerBereich"><h1>青いゾーン</h1></div>
</body>
</html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
#roterBereich {
position:absolute;
top:130px;
left:30px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
#blauerBereich {
position:absolute;
top:130px;
left:400px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #0000EE;
}
h1#Titel {
font-family:Arial;
font-size:24pt;
font-weight:normal;
color:green;
}
-->
</style>
</head>
<body>
<h1id="Titel">IDで書式を設定しています</h1>
<divid="roterBereich"><h1>赤いゾーン</h1></div>
<divid="blauerBereich"><h1>青いゾーン</h1></div>
</body>
</html>
CSS入門
広告
