CSSを試して実感してみよう。

ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
　　　　　　

人気ブログランキング

前回は、スタイルシートについて書きましたが、
その中でよく使われているのがCSS。
さらに、外部スタイルシートに書く方法が普及してきています。

そこで今回は、CSSを外部スタイルシートに書く方法を
もっと詳しくみていきますね。

実際に体験してみてもらうのが一番よくわかると思いますので、
具体例を挙げてとりあげてみます。

サイトのレイアウトの設定

[HTML]　次のようにHTMLを入力します。

<body>
<div id=wrapper><div id=header>ヘッダー</div><div id="contents">
<div id="leftArea"><div id="left-sidebar">左サイドバー</div>
<div id="main">本文</div></div><div id="right-sidebar">右サイドバー</div>
<div id="footer-top" style="clear:both">フッター１</div>
<div id="footer">フッター２</div></div>
</div>
</body>

[CSS]　次のようにCSSを書きます。

#wrapper {
background-color: #ffffff;
border: 1px solid #000049;
margin: 0 auto;
max-width: 98%;
min-height: 600px;
width: 950px;
}
#header {
border: 1px solid #000049;
border-bottom: 2px solid #E60000;
margin: 0 auto;
padding-top: 15px;
height: 100px;
width: 950px;
}
#contents {
margin: 0 auto;
height: 200px;
width: 950px;
}
#leftArea {
margin: 0 auto;
height: 200px;
float: left;
width: 790px;
}
#left-sidebar {
border: 1px solid #000049;
margin-top: 2px;
padding-top: 15px;
float: left;
height: 99%;
width: 182px;
}
#main {
border: 1px solid #000049;
float: right;
margin-left: 3px;
margin-top: 2px;
padding-top: 15px;
height: 99%;
width: 600px;
}
#right-sidebar {
border: 1px solid #000049;
float: right;
margin-top: 2px;
padding-top: 15px;
height: 99%;
width: 155px;
}
#footer-top {
border: 1px solid #000049;
background-color: #F3F3F3;
background-image: none;
background-repeat: no-repeat;
border-bottom: 3px solid #E60000;
margin-top: 5px;
padding: 5px;
}
#footer {
border: 1px solid #000049;
background-color: #F3F3F3;
background-image: none;
background-repeat: no-repeat;
margin-top: 0;
padding: 5px;
}
body {
background-color: #F3F3F3;
font-size: 16px;
text-align: center;
}

[ブラウザ上の表示]　ブラウザ上では、次のように表示できます。

サイト全体の背景色、文字色の指定

[HTML]

<body>
<p>背景色を青色、文字を白色に設定しました。</p>
</body>

[CSS]

body{
background-color : blue;
　color : white;
}

[ブラウザ上の表示]

表の作成（■参考サイト：AllAbout様のサイトを参考にさせて戴きました。）

[HTML]

<body>
<table class="waku1">
<thead>
<tr>
<th>本の題名</th>
<th>出版社名</th>
<th>価格</th>
</tr>
</thead>
<tfoot>
<tr><th colspan="2">合計</th><td class="price">2,500円</td></tr>
</tfoot>
<tbody>
<tr>
<th>CSSの基礎</th>
<td>abc出版</td>
<td class="price">1,000円</td>
</tr>
<tr>
<th>CSSの応用</th>
<td>abc出版</td>
<td class="price">1,500円</td>
</tr>
</tbody>
</table>
</body>

[CSS]

/* ■表全体の装飾■ */
table.waku1 {
border: 2px solid #000049;
border-collapse: collapse;
color: #000049;
}
/* ■表のセル全部の装飾■ */
table.waku1 th,
table.waku1 td {
border-style: solid dashed;
border-color: #000049;
border-width: 1px;
padding: 0.3em;
}
/* ■表の最上部行の装飾■ */
table.waku1 thead th {
border-bottom: 3px double #000049;
background-color: #d9d9d9;
letter-spacing: 0.1em;
}
/* ■表の最下部行の装飾■ */
table.waku1 tfoot th {
background-color: #ededed;
border-right: 1px #000049 solid;
color: #000049;
letter-spacing: 1.2em;
}
table.waku1 tfoot td {
color: red;
font-weight: bold;
}
table.waku1 tfoot th ,
table.waku1 tfoot td {
border-top: 2px solid #000049;
}
/* ■価格列の装飾■ */
table.waku1 td.price {
text-align: right;
font-family: Verdana, sans-serif;
}
/* ■本の題名セルの装飾■ */
table.waku1 tbody th {
text-align: left;
}

[ブラウザ上の表示]

大見出しの背景色、文字色の指定

[HTML]

[CSS]

h1 {
background-color: #d9d9d9;
color: #000049;
}

[ブラウザ上の表示]

397時間動画パソコン教室の実践

田中洋平さんの「397時間動画パソコン教室」に興味を持ち、ＤＶＤを実際に購入して勉強に励んでいます。スキルアップをはかりながら、実践記録を投稿していきます。

CSSを試して実感してみよう。