2010年12月08日

HTML/CSSを用いた表作り

【この課での目標】

HTML/CSSを用いた表作り

【教材範囲】

HTML/XHTML&スタイルシートレッスンブックの233〜267ページ。

【成果物】

http://programming.so.land.to/20101207-1.html

【つまづいた箇所・解決法】

特になし

【未解決の悩み】

特になし

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。



<!DOCTIPE html PUBLIC "-//W3C??DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR.xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<html>
<head>
<title>20101207-1</title>
<style type="text/css">

body {color: #444444;
background-color: #66aa66;
background-image: url(back.jpg)
}

div#container {border: ridge 10px #bbffaa;
padding: 20px;
background-color: #ffffff;
width: 90%;
margin-left: auto;
margin-right: auto;
}

div#header {background-color: #66aa66;
padding: 5px 20px;
padding-bottom: 20px;
}

div#header p {color: #222222;
margin-bottom: 0;
}

h1 {font-size: 2.25em;
font-family: Verdana,Helvetica,sans-serif;
color: white;
text-align: left;
margin-bottom: 0;
}

p {font-size: 0.95em;
line-height: 1.6
margin-top: 0;
}

address {font-size: 0.75em;
font-style: normal;
clear: both
}

a {color: gray
}

a:hover {color: blue;
background-color: #ccffff;
font-size: larger
}

a:visited {color: black}

address a:hover {color: #ffaa00}

ul {list-style-type: none;
margin-left: 0;
padding-left: 0;
background-color: #bbffaa;
padding: 3px 20px
}

li {display: inline;
padding-rifht: 10px;
font-size: 0.75em
}

li a {text-decoration: none
}

h2 {fibt-size: 1em;
padding-left: 5px;
border-bottom: solid 2px #66aa66;
padding-bottom: 3px;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-position: 13 -2px;
padding-left: 30px;
clear: both;
margin-bottom: 0;
}

h2#summary {margin-top: 40px;
}

img {float: right;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
clear: both;
}

img.photo-odd {float: left;
margin-left: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

img.photo-logo {float: left;
margin-left: 0px;
margin-right: 50px;
margin-bottom: 15px;
}

img.photo-even {float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 15px;
}

p#massage {margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.3;
}

p#summary {margin-top: 10px;
margin-bottom:30px;
width: 420px;
}

table {font-size: 0.95em;
margin-bottom: 20px;
width: 950px;
border: none;
border-collapse: collapse;
}

th, td {padding: 8px;
}

th {width: 150px;
text-align: left;
vertical-align: middle;
background-color: #ffdd44;
border: solid 5px #aa8844;
}

td {background-color: #ffffcc;
border: solid 5px #aa8844;
}

</style>

</head>
<body>


<div id ="container">
<div id="header">

<h1>CSSでの表作成の練習です</h1>
</div>

<h2>季節のイベント</h2>

<p id="sammary">
森の工房で開催するイベントを紹介します。1年を通して様々なイベントを開催していますので、ぜひご参加ください。
</p>

<table border="1" summary="イベント一覧">
<tr>
<th>春のお散歩ウィーク</th>
<td>春の花が咲き始め、木々の新緑がまぶしくなること、毎年「春のお散歩ウィーク」を開催しています。<br />
春の息吹溢れる清々しい森の中を自由に散策してください。
</tr>

<tr>
<th>ホタル鑑賞会</th>
<td>工房の近くの池でホタル鑑賞会を開催します。<br />
ここには蛍が自生しており周囲には明るい街灯などもありませんので、幻想的な風景を見ることができます。
</td>
</tr>

<tr>
<th>自然の中の暮らし展</th>
<td>自然と一体化した生き方や暮らしの云々</td>
</tr>

</table>

</div>
</body>
</html>
posted by yuuya1986 at 00:28| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。