mtde.info

Movable Type Developers Express

このカテゴリでは、プレーンなXHTML文書へ表現を追加するCSSの定義一例を紹介しています。

『CSSを適用する』カテゴリ内のエントリ一覧

XHTML文書へCSSの参照を追加

2008年3月 4日 21:08 | Writer: apstar | 記事本文

XHTMLとCSSの役割を完全に分担（XHTML：構造、CSS：表現）させますので、CSSは外部ファイルとし、XHTMLから参照するためのコードを書き足します。このファイルを、UTF-8文字コードで「index.html」という名前で保存します。

次に、index.htmlのある同じフォルダ内へ、UTF-8文字コードで「styles.css」というファイル名でファイルを新規に作成してください。

<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="ja" lang="ja" id="sixapart-standard">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="styles.css" type="text/css" />
   <title>○○株式会社 会社案内</title>
</head>

<body>
   <div id="headcontent">
      <h1>個人情報の取り扱いについて</h1>
   </div>

   <div id="maincontainer">

      <div id="maincontent">

         <h2>個人情報の取り扱いの定義</h2>

         <p>○○株式会社（以下弊社）は、よりご満足いただける商品・サービスを提供・持続するためにお客様の個人情報を活用させていただくことがあります。</p>
         <p>弊社では、お客様の個人情報を慎重に取り扱い、個人情報がプライバシーに関わる重要な情報であると認識したうえで、個人情報を適切に保護し、ご本人の意向に沿って活用しなければならないと考えています。</p>

         <dl>
         <dt>対象</dt>
         <dd>当プライバシーポリシーは、弊社で取り扱う全ての個人情報を対象とします。</dd>
         <dt>法令の遵守</dt>
         <dd>個人情報を取り扱う上で関係する法令・政令・ガイドライン等を遵守します。</dd>
         <dt>利用</dt>
         <dd>個人情報の利用にあたっては、利用目的を明確にし、その利用目的の達成に必要な範囲内で取り扱います。</dd>
         <dt>取得</dt>
         <dd>個人情報は、適法かつ適正な方法で取得します。</dd>
         </dl>

         <h2>個人情報の取扱いに関するお問い合わせ</h2>

         <p>○○株式会社<br />
         〒xxx-xxxx ○○市○○区○○x-xx-x<br />
         電話番号：xx-xxxx-xxxx</p>

      </div>
      <div id="subcontent">
         <dl>
         <dt>会社案内</dt>
         <dd>
         <ul>
            <li>会社概要</li>
            <li>沿革</li>
            <li>採用情報</li>
            <li>会社所在地</li>
            <li>お問い合わせ</li>
         </ul>
         </dd>
         </dl>
      </div>
   </div>

   <div id="footcontent">
      <address>2008 ○○株式会社</address>
   </div>

</body>
</html>

CSSに共通のスタイルを追加

2008年3月 4日 21:10 | Writer: apstar | 記事本文

CSSファイル内に先に共通部分のコードを書きます。以下の例では、すべての要素の余白とマージンを明示的にゼロにしています。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

CSSの調整では、できれば、複数のブラウザで確認したほうがいいです。

Internet Explorer 7 でのプレビュー

xhtml_0040_ie7.png

FireFox 2 でのプレビュー

xhtml_0040_ff2.png

見出しのスタイルを定義

2008年3月 4日 21:14 | Writer: apstar | 記事本文

見出しの見た目を調整するコードを書き足します。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

Internet Explorer 7 でのプレビュー

xhtml_0050_ie7.png

段落のスタイルを定義

2008年3月 4日 21:16 | Writer: apstar | 記事本文

段落の見た目を調整するコードを書き足します。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{
	margin: 10px 5px 10px 15px;
}

Internet Explorer 7 でのプレビュー

xhtml_0060_ie7.png

dlリストのスタイルを定義する

2008年3月 4日 21:18 | Writer: apstar | 記事本文

dlリストの見た目を調整するコードを書き足します。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{
	margin: 10px 5px 10px 15px;
}

dl{
	margin: 20px 0 10px 15px;
	padding: 0;
}

dt{
	margin: 15px 0 0 0;
	padding: 0;
	font-weight: bold;
}

dd{
	margin: 5px 0 5px 15px;
	padding: 0;
}

Internet Explorer 7 でのプレビュー

xhtml_0070_ie7.png

ulリストのスタイル定義

2008年3月 4日 21:20 | Writer: apstar | 記事本文

ulリストの見た目を調整するコードを書き足します。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{

	margin: 10px 5px 10px 15px;
}

dl{
	margin: 20px 0 10px 15px;
	padding: 0;
}

dt{
	margin: 15px 0 0 0;
	padding: 0;
	font-weight: bold;
}

dd{
	margin: 5px 0 5px 15px;
	padding: 0;
}

ul{
	margin: 0 0 10px 5px;
	padding: 0;
	list-style-type: none; 
}

li{
	margin: 0 0 5px 0;
	padding: 0;
}

Internet Explorer 7 でのプレビュー

xhtml_0080_ie7.png

各領域のブロックを定義

2008年3月 4日 21:22 | Writer: apstar | 記事本文

各領域ブロックを定義します。

状態を把握しやすいように色をつけてみました。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

div#headcontent{
	background-color: #aaaaaa;
}

div#maincontainer{
	background-color: #aaffaa;
}

div#maincontent{
	background-color: #aaaaff;
}


div#subcontent{
	background-color: #ffffaa;
}


div#footcontent{
	background-color: #ffaaff;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{
	margin: 10px 5px 10px 15px;
}

dl{
	margin: 20px 0 10px 15px;
	padding: 0;
}

dt{
	margin: 15px 0 0 0;
	padding: 0;
	font-weight: bold;
}

dd{
	margin: 5px 0 5px 15px;
	padding: 0;
}

ul{
	margin: 0 0 10px 5px;
	padding: 0;
	list-style-type: none; 
}

li{
	margin: 0 0 5px 0;
	padding: 0;
}

Internet Explorer 7 でのプレビュー

xhtml_0090_ie7.png

各領域のブロックのサイズを指定

2008年3月 4日 21:24 | Writer: apstar | 記事本文

各領域ブロックのサイズを指定し、レイアウトを決定します。

幅（width）や高さ（height）を、px（ピクセル）で指定すると固定レイアウト、%（パーセント）で指定するとリキッドレイアウトとなります。今回は固定レイアウトで作成してみます。

あらかじめデザインしたレイアウトどおりにレイアウトを行います。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

div#headcontent{
	background-color: #aaaaaa;
	width: 500px;
	height: 100px;
}

div#maincontainer{
	background-color: #aaffaa;
	width: 500px;
}

div#maincontent{
	background-color: #aaaaff;
	width: 300px;
}


div#subcontent{
	background-color: #ffffaa;
	width: 180px;
}


div#footcontent{
	background-color: #ffaaff;
	width: 500px;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{
	margin: 10px 5px 10px 15px;
}

dl{
	margin: 20px 0 10px 15px;
	padding: 0;
}

dt{
	margin: 15px 0 0 0;
	padding: 0;
	font-weight: bold;
}

dd{
	margin: 5px 0 5px 15px;
	padding: 0;
}

ul{
	margin: 0 0 10px 5px;
	padding: 0;
	list-style-type: none; 
}

li{
	margin: 0 0 5px 0;
	padding: 0;
}

Internet Explorer 7 でのプレビュー

サイドバーが落ちた状態になっています。

xhtml_0100_ie7.png

サイドバー周りの調整

2008年3月 4日 21:26 | Writer: apstar | 記事本文

先ほどまでの作業段階では、サイドバーが落ちた状態になっていました。これを修正するには、floatで周りこみ指定を行います。

回り込みはfootcontentで解除しています。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

div#headcontent{
	background-color: #aaaaaa;
	width: 500px;
	height: 100px;
}

div#maincontainer{
	background-color: #aaffaa;
	width: 500px;
}

div#maincontent{
	background-color: #aaaaff;
	width: 300px;
	float: left;
}

div#subcontent{
	background-color: #ffffaa;
	width: 180px;
	float: right;
}


div#footcontent{
	background-color: #ffaaff;
	width: 500px;
	clear: both;
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: #ffffff;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{
	margin: 10px 5px 10px 15px;
}

dl{
	margin: 20px 0 10px 15px;
	padding: 0;
}

dt{
	margin: 15px 0 0 0;
	padding: 0;
	font-weight: bold;
}

dd{
	margin: 5px 0 5px 15px;
	padding: 0;
}

ul{
	margin: 0 0 10px 5px;
	padding: 0;
	list-style-type: none; 
}

li{
	margin: 0 0 5px 0;
	padding: 0;
}

Internet Explorer 7 でのプレビュー

xhtml_0110_ie7.png

完成

2008年3月 4日 21:28 | Writer: apstar | 記事本文

レイアウトチェック用の背景色を削除し、headcontentとfootcontentへ背景画像を入れてみました。また、h1の背景色を透明にしています。

今回は、これで完成とします。

styles.css コード

* {
	margin: 0;
	padding: 0;
}

div#headcontent{
	width: 500px;
	height: 100px;
	background-image: url("back.png");
}

div#maincontainer{
	width: 500px;
}

div#maincontent{
	width: 300px;
	float: left;
}

div#subcontent{
	width: 180px;
	float: right;
}


div#footcontent{
	width: 500px;
	clear: both;
	background-image: url("back.png");
}

h1{
	margin: 15px 0 10px 0;
	padding: 3px;
	font-size: 130%;
	font-weight: bold;
	background-color: transparent;
}

h2{
	margin: 15px 0 10px 5px;
	padding: 3px;
	font-size: 120%;
	font-weight: bold;
	background-color: #eeeeee;
	border-left: 8px solid #ff0000;
}

h3{
	margin: 15px 0 10px 10px;
	padding: 0;
	font-weight: bold;
}

p{
	margin: 10px 5px 10px 15px;
}

dl{
	margin: 20px 0 10px 15px;
	padding: 0;
}

dt{
	margin: 15px 0 0 0;
	padding: 0;
	font-weight: bold;
}

dd{
	margin: 5px 0 5px 15px;
	padding: 0;
}

ul{
	margin: 0 0 10px 5px;
	padding: 0;
	list-style-type: none; 
}

li{
	margin: 0 0 5px 0;
	padding: 0;
}

Internet Explorer 7 でのプレビュー

xhtml_0120_ie7.png
エントリ
タグ
はじめに
導入編
ローカル環境
変数
サンプル
その他
トラブル集
2008 mtde.info