CSS3〜5 ボックスモデル練習

【CSS3】

空きはリセットをせず、個別に指定する
XHTML 1.0 Transitional
リストマークは、作成すること

分からなかった事

リストマークがやや下にずれてる気がする。。ulにlist-style-imageで貼り付けたが、背景画像としてliに読み込ませてbackground-position: left centerで位置調整も試したが、あまり変わらなかった。。

<!DOCTYPE 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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS03】</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  text-align: center;/*IE6でブラウザの中央表示*/
}
#container {
  margin: 0 auto;/*ブラウザの中央表示*/
  text-align: left;
  width: 480px;
  font-size: 0.9em;
}
h1,h2 {
  font-size: 1.5em;
  color: #053566;
  background-color: #EAEAEA;
  border: solid #000 1px;
  padding: 7px 0 7px 15px;
}
ul {
  list-style-type: none;
  list-style-image: url(01.gif);
}
-->
</style>
</head>
<body>
<div id="container">
<h1>構造主義の四銃士</h1>
<p>言語学に限られていた「構造主義」の理説ををそれぞれの分野で展開し、後の世代に多大な影響を与えたのは次の４人です。</p>
<ul id="hito">
    <li>ミシェル・フーコー</li>
    <li>ロラン・バルト</li>
    <li>クロード・レヴィ＝ストロース</li>
    <li>ジャック・ラカン</li>
</ul>
<p>生まれた順番は、次の通りです。</p>
<ol>
    <li>ジャック・ラカン</li>
    <li>クロード・レヴィ＝ストロース</li>
    <li>ロラン・バルト</li>
    <li>ミシェル・フーコー</li>
</ol>
<h2>それぞれの功績</h2>
<dl>
<dt>ミシェル・フーコー</dt>
    <dd>構造論的な手法による歴史分析を通して、西欧的人間像の系譜を明らかにした</dd>
<dt>ロラン・バルト</dt>
    <dd>言語＝文化が社会の中で「制度」として人々に及ぼす影響を分析した</dd>
<dt>クロード・レヴィ＝ストロース</dt>
    <dd>構造言語学の考え方を人類学の中に導入して構造主義の方法を確立</dd>
<dt>ジャック・ラカン</dt>
    <dd>「フロイトに還れ」を合言葉に、独自の精神分析学理論を展開</dd>
</dl>
</div>
</body>
</html>

【CSS4】

空きはリセットをせず、個別に指定する

<!DOCTYPE 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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS04】</title>
<style type="text/css">
<!--
ul {
  list-style-type: none;
}
img {
  border: none;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  text-align: center;/*IE6でブラウザの中央表示*/
}
#container {
  margin: 0 auto;/*ブラウザの中央表示*/
  text-align: left;
  font-size: 0.875em;
  width: 470px;
}
h1 {
  color: #5A9B73;
  font-size: 1.2em;
  font-weight: bold;
  background-image: url(images/logo.gif);
  background-repeat: no-repeat;
  padding: 20px 0 28px 84px;
  margin: 0;
}
h2 {
  background-color: #5A9B73;
  margin: 0;
  text-align: center;
  padding: 20px 0 20px 0;
}
#eco {
  margin: 0;
}
h3 {
  background-image:url(images/mark.gif);
  background-repeat: no-repeat;
  padding-left: 25px;
  height: 20px;
}
address {
  color: #5A9B73;
  font-style: normal;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  border-top: solid 8px #5A9B73;
  padding: 7px 0 7px;
}
address a {
  color: #5A9B73;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>Computer Technology Groups</h1>
<h2><img src="images/ecology.gif" alt="エコロジー" title="エコロジー" width="210" height="24" /></h2>
<p id="eco"><img src="images/img.jpg" alt="木の画像" width="470" height="88" /></p>

<h3><img src="images/ecology_sub01.gif" alt="エコロジーへの取り組み" title="エコロジーへの取り組み" width="154" height="17" /></h3>

<p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>

<p>地球の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p>

<h3><img src="images/ecology_sub02.gif" alt="商品のラインナップ" title="商品のラインナップ" width="126" height="18" /></h3>

<p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>

<address>Copyright(C)<a href="#">Computer Technology Groups.</a>All rights reserved.</address>
</div>
</body>
</html>

【CSS5】

空きはリセットをせず、個別に指定する
XHTML 1.0 Transitional

学習メモ

floatしてclear: bothする物が下に無い時は親要素にoverflow: hiddenを指定する。
この時必ずwidth または heightを明示する事。

<!DOCTYPE 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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS05】</title>
<style type="text/css">
<!--
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  text-align: center;/*IE6でブラウザの中央表示*/
}
#container {
  margin: 0 auto;/*ブラウザの中央表示*/
  text-align: left;
  font-size: 0.875em;
  width: 500px;
}
#Design,#Package {
  overflow: hidden;
  width: 500px;
}
#Design {
  margin-bottom: 5px;
}
h1,h2 {
  width: 105px;
  font-size: 1.1em;
  font-weight: bold;
  text-align: right;
  border-right: solid 5px #FF7F00;
  float: left;
  margin-right: 10px;
  padding: 10px 10px 0 0;
}
h1 {
  height: 270px;
}
h2 {
  height: 310px;
}
p {
  color: #8E8485;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="Design">
<h1>デザインの話</h1>
<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>

<p>物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。</p>
</div>
<div id="Package">
<h2>パッケージの色</h2>
<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>

<p>パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。パッケージにはいろいろな色があります。歴史とともに多様な組み合わせが生まれてきました。</p>
</div>
</div>
</body>
</html>