ホームページ制作 島根県

WordPress：インクルードタグ

特定のファイル（phpファイル）の読み込み。

ファイル名を指定

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php comments_template(); ?>

TEMPLATEPATH/sidebar-2.phpを作製したとき

<?php get_sidebar('2'); ?>
sidebar-***.php の ***部分 2.5以上

特定のテンプレートの読み込み。

TEMPLATEPATH/header-singleを作製したとき

<?php include (TEMPLATEPATH . '/header-single.php'); ?>

デザイン的に変更箇所が多い場合はこちらが便利。

Category:Wordpress

clearfix：floatの解除

親ボックス内でfloatを解除する子ボックス[#footer{clear:both;}など]を設けない場合のfloat解除方法。

親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。

<div id="box">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

<div id="box" class="clearfix">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考：Clearing a float container without source markup

和訳：構造のマークアップなしでフロートをクリアする方法

とても参考になる記事：clearfixの決定版を作る－モダンブラウザ編－

Category:CSSプロパティ一覧,CSSレイアウトサンプル

Related Entries[関連記事一覧表示]

ダウンロードサイト

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。

設置したい箇所に下記ソースを挿入。

<?php related_posts(); ?>

プラグイン：Related Entriesの設定

Related Entriesを有効化するとプラグイン管理ページに[Related Posts Options]が表示されるので選択。

How many related posts would you like to show?:: 関連記事の表示数指定。
Before / After (Post Title) : / For example: <li></li>or<dl></dl>: 関連記事タイトルの表示設定。
Show excerpt?: 抜粋表示指定。
Excerpt length (No. of words):: 抜粋の文字数指定。
Before / After (Excerpt): / For example: <li></li>or<dl></dl>: 抜粋部分の表示設定
Show password protected posts?: パスワードで保護された記事の表示指定。

SQL Index Table Setup

SQL Index Table Setupが反映されない（上手くいかない）とき。

[phpMyadmin] [データベース] [データベース名] [SQL]から

ALTER TABLE `wp_posts` ADD FULLTEXT `post_related` (
  `post_name` ,
  `post_content`
  )

ALTER TABLE `データベースのテーブル接頭後_posts` ADD FULLTEXT `post_related` (,,,,,?

WordPressの使い方(運用例)

WordPressは[ID]と[パスワード]を発行する事により、ひとつのサイトを複数人で運営管理（更新作業）できます。今までのような、ホームページ制作担当者だけが更新作業をするより効率的に運営が可能となります。

wordpressの使い方(運用例)

各課単位で更新

wordpressの使い方(運用例)

商店街の各店単位、共同組合の各組合員単位で共同運営

wordpressの使い方(運用例)

(さらに…)

Category:Wordpress

Google Maps

ダウンロードサイト

制作者ページ

解説ページ：Google Mapsの新仕様に対応したWordPressのプラグイン -Google Maps Quicktag

Lightview for WordPress[画像拡大スクリプト]

ダウンロードページ：Lightview for WordPress

ダウンロードページ：Lightview 2.3.2

ダウンロードしたファイル（Zip）を解凍後、Lightview 2.3.2の中身 [CSSフォルダ] [imagesフォルダ] [lightview.js]をLightview for WordPressフォルダへ入れ、/wp-content/plugins/へアップロード。

class="lightview"をリンク部分へ入力。

<a href="画像.jpg" title="タイトル" class="lightview">****</a>

デモ表示

以下カスタマイズ参考：coliss

backgroundColor ----- 背景色
border ----- ボーダーのサイズ
buttons.opacity ----- ボタン不透明度
effects ----- Scriptaculousの効果
images ----- lightview.jsからみたディレクトリ
imgNumberTemplete ----- 画像のナンバリング
overlay ----- オーバーレイ
radus ----- 角丸の半径
sideshow.delay ----- スライドの表示タイミング
titleCaptionSplit ----- タイトルとキャプションの区切り
transition ----- リサイズのエフェクト
viewport ----- 画像の表示領域
zindex ----- zindexの値

Google (XML) Sitemaps Generator

制作者ページ

Sitemap.xmlの生成。

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。空ファイル[sitemap.xml]・[sitemap.xml.gz]を作成して、トップディレクトリにアップロード。パーミッション[606/666]

WP-PageNavi[ページナビ]

番号表示のページリンク[ページング]

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。

ページナビを設置したい箇所に下記ソースを挿入。

<?php wp_pagenavi(); ?>

ページナビゲーション：pagebar

番号表示のページリンク[ページング]

ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。

ページナビを設置したい箇所に下記ソースを挿入。

<?php wp_pagebar(array(’before’=>’Pages: ‘))?>

日本語版 All in One SEO Pack 1.4.6.14

All in One SEO Pack[seo]

ダウンロード

各ページのTitleタグ、Meta Keywords、Meta Descriptionの個別指定。

Breadcrumb Navigation XT[パン屑リスト]

<?php if ( class_exists('breadcrumb_navigation_xt') ) { ?>
    <div class="breadcrumb">
    <?php 
    // Display a prefix
    echo 'Navigation: ';
    // new breadcrumb object
    $mybreadcrumb = new breadcrumb_navigation_xt;

// Apply options: オプション設定
//    設定したい項目の行頭のスラッシュ2つを外すと有効になる。UTF-8で保存。
//    以下にセットしてある値は、true/false の項目は初期値の逆、その他は初期値。

// $mybreadcrumb-&gt;opt['static_frontpage'] = true;    // 「ページ」を使ってブログ以外のホームページを設けている（ブログがホームの下位レベルにある）場合。初期値は false（ホーム＝ブログ）
    // その場合のオプション
    // $mybreadcrumb-&gt;opt['url_blog'] = '';  // ブロクのURL。http://www.site.com/myweblog/にブログがあるなら '/myweblog/'
    // $mybreadcrumb-&gt;opt['home_display'] = false;   // 「Home」を表示しない場合。初期値は true（表示）
    // $mybreadcrumb-&gt;opt['url_home'] = get_settings('home');    // ホームへのリンクURI
    // $mybreadcrumb-&gt;opt['home_link'] = false;  // ホームにリンクを付けずテキストのみ表示。初期値は true（リンク付き）
    // $mybreadcrumb-&gt;opt['title_home'] = 'Home';    // ホームを表すテキスト

// その他のオプション
// $mybreadcrumb-&gt;opt['title_blog'] = 'Weblog';  // ブログのトップを表すテキスト
// $mybreadcrumb-&gt;opt['separator'] = ' / ';  /* 階層間の区切り文字 */
// $mybreadcrumb-&gt;opt['title_search'] = 'Search';    /* 検索結果ページを表すテキスト */
// $mybreadcrumb-&gt;opt['singleblogpost_prefix'] = 'Blog article: ';   /* 記事名の接頭辞 */
// $mybreadcrumb-&gt;opt['singleblogpost_suffix'] = '';     /* 同 接尾辞 */
// $mybreadcrumb-&gt;opt['page_prefix'] = '';   /* ページ名の接頭辞 */
// $mybreadcrumb-&gt;opt['page_suffix'] = '';   /* ページ名の接尾辞 */
// $mybreadcrumb-&gt;opt['urltitle_prefix'] = 'Browse to: ';    /* 上位ページのリンクにポインタを当てたときのツールチップの接頭辞 */
// $mybreadcrumb-&gt;opt['urltitle_suffix'] = '';   /* 同ツールチップの接尾辞 */
// $mybreadcrumb-&gt;opt['archive_category_prefix'] = 'Archive by category &amp;#39;';  /* カテゴリアーカイブの接頭辞 */
// $mybreadcrumb-&gt;opt['archive_category_suffix'] = '&amp;#39;';  /* カテゴリアーカイブの接尾辞 初期値はシングルクオート */
// $mybreadcrumb-&gt;opt['archive_date_prefix'] = 'Archive: ';  /* 年月日アーカイブの接頭辞 */
// $mybreadcrumb-&gt;opt['archive_date_suffix'] = '';           /* 年月日アーカイブの接尾辞  */
// $mybreadcrumb-&gt;opt['use404'] = false; /* 404エラーのときに次項の専用タイトルを表示しない場合。初期値は true（表示） */
// $mybreadcrumb-&gt;opt['title_404'] = '404';  /* 404エラー時の表示タイトル */
// $mybreadcrumb-&gt;opt['link_current_item'] = true;   /* 現在のページ名にリンクを付ける場合。初期値は false（テキストのみ） */
// $mybreadcrumb-&gt;opt['current_item_urltitle'] = 'Link of current page (click to refresh)';  /* 前項でtrueにしたときのツールチップ表示 */
// $mybreadcrumb-&gt;opt['current_item_style_prefix'] = ''; /* 現在のページ名の接頭辞（タグでもOK。&lt;span class=&quot;bc_current&quot;&gt;等） */
// $mybreadcrumb-&gt;opt['current_item_style_suffix'] = ''; /* 現在のページ名の接尾辞 */
// $mybreadcrumb-&gt;opt['posttitle_maxlen'] = 0;   /* 記事タイトルの表示文字数。0は無制限 */
// $mybreadcrumb-&gt;opt['singleblogpost_category_display'] = true; /* 単体記事表示時にカテゴリを表示。初期値は false（非表示） */
// $mybreadcrumb-&gt;opt['singleblogpost_category_prefix'] = '';    /* 前項でtrueにしたときのカテゴリ名の接頭辞 */
// $mybreadcrumb-&gt;opt['singleblogpost_category_suffix'] = '';    /* 同 接尾辞 */

// Display the breadcrumb
$mybreadcrumb-&gt;display();
?&gt;
&lt;/div&gt;&lt;!-- [breadcrumb] --&gt;

<?php } ?>

参考：power source

追記
コチラの方が使い勝手が良いです。Breadcrumb NavXT

FFFTPの設定について

各サーバー及びプロバイダ別のFFFTPの設定マニュアルページです。サーバー名アカウント名等は事前に控えを用意しておいて下さい。

Category:FFFTPの設定

padding指定の注意事項

標準準拠モードでは width 及び height に padding を含みません。

後方互換モードは width 及び height に padding を含みます。

詳細：CSSレイアウト崩れの原因について

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapper内の左右に10pxの余白とる場合

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 590px;
    float: right;
}

#sidebar{
    width: 190px;
    float: left;
}

今回は、全体の幅は800pxで固定する事としました。よって、左右にpaddingを10pxとるので#wrapperの幅は左右のpadding分を差し引いて780pxとしなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

後は、#wrapper内の#contentと#sidebarの幅を780pxに合うように変更すれば上手く段組み出来ます。

#header内に余白を設ける

#header内の上下に20px、左右に10pxの余白とる場合

#wrapper{ width: 800px; }

#header{
  height: 80px;
  padding: 20px 10px;
}

#headerの幅は#wrapperのwidthが基準となるので特に指定は要りませんが、高さは上下に設けた余白分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

#headerに背景画像を指定する際など重要です。

もうひとつの方法として、#header内に#header-innerを設ける方法があります。MTやWPなどのブログソフトウェアでよくある構造です。

(x)HTML

<div id="wrapper">
<div id="header">
<div id="header-inner">***データ***</div>
</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#header-inner{ margin: 20px 10px; }

#contentと#sidebar内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#contentと#sidebar共に、左右20pxのpaddingを設ける場合。

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
    padding: 0 20px;
}

#sidebar{
    width: 160px;
    float: left;
    padding: 0 20px;
}

#contentと#sidebar共に、左右に20pxのpaddingを設けたので、それぞれのwidthから40px分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

参考までに、もしwidth指定を変更しなかったら、標準準拠モードでは#contentの幅は640px、#sidebarの幅は240px、合わせて880pxと計算されます。

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapperと#content及び#sidebarとの間に余白を設けたい時など、基本的にmarginで余白を設定するのは難しいと考えて下さい。IE6の場合、floatプロパティで指定した方向と同方向にmarginをとると、marginで指定した長さの2倍余白をとるバグを抱えています。よって、簡単に余白を設ける場合は次頁の余白指定：paddingを参照して下さい。

参考までにmargin指定で余白をとる場合

1：#wrapperの中にもうひとつボックス（#wrapper-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="wrapper-inner">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/* 左右に10pxとったので、実際の入力可能範囲は 780pxである事に注意  */
#wrapper-inner{ margin: 0 10px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 780pxに納まるように指定  */
#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

2：#contentと#sidebarの中にもうひとつボックス（#content-innerと#sidebar-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">
<div id="content-inner">***データ***</div>
</div>
<div id="sidebar">
<div id="sidebar-inner">***データ***</div>
</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 右に10pxとったので、実際の入力可能範囲は 590pxである事に注意  */
#content-inner{ margin-right: 10px; }

#sidebar{
    width: 200px;
    float: left;
}

/* 左に10pxとったので、実際の入力可能範囲は 190pxである事に注意  */
#sidebar-inner{ margin-left: 10px; }

#footer{ clear: both; }

#header下に余白を設ける

#header{
  height: 120px;
  margin-bottom: 50px;
}

#contentと#sidebarの間に余白を設ける

全体の幅は800pxで固定する事として解説します。

最も簡単な方法

#contentと#sidebarのwidth指定で800px以下になるように指定します。#contentはfloat:right;で右側に、#sidebarはfloat:left;で左側にいっぱい寄るので設けたい余白分、どちらかのwidthを小さくするか、あるいは両方小さくするかで自然な余白を設ける事ができます。

#contentと#sidebarの間に40px余白を設ける場合

#contentを小さくする

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarを小さくする

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
両方小さくする

#wrapper{ width: 800px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

#footer上に余白を設ける

clearプロパティが指定してある要素に、上方向のmarginを指定しても指定は反映されません。

#footer上に余白を設ける時は、#contentと#sidebarの方に下方向のmargin指定をします。

#footer上に50pxの余白を設ける場合

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
    margin-bottom: 50px;
}

#sidebar{
    width: 200px;
    float: left;
    margin-bottom: 50px;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#content,
#sidebar{ margin-bottom: 50px; }

#footer{ clear: both; }

CSSレイアウト-横幅を変更するには：#wrapper

ホームページ全体の横幅の変更方法について解説します。前頁 CSS:floatレイアウトの基本で使用したサンプルレイアウトを例にします。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

ヘッダー部分（#header）、コンテンツ部分（#content）、サイドバー部分（#sidebar）、フッター部分（#footer）はすべて親ボックスの#wrapperの中に包括されています。よって、ホームページ全体の横幅を変更するにはcssの#wrapper部分のwidthを変更してやります。

この時、ヘッダー部分（#header）とフッター部分（#footer）は幅指定をしていないので、今回のようにホームページ全体の横幅を変更しても、レイアウトに及ぼす影響はありません。（今回は、最も簡単でシンプルな段組を採用しています。）#wrapperのwidthに合わせて伸縮します。

コンテンツ部分（#content）とサイドバー部分（#sidebar）はwidth指定と、float指定でそれぞれ左右に配置しているので、#wrapperのwidthに合わせて変更してやらなければなりません。

横幅計算の基本

横幅を変更する際の簡単な四則計算について説明しておきます。

仮にサンプルの横幅を760pxとした場合サンプルホームページはどうなるでしょう。この場合は#sidebarが#contentの下へ落ちてしまいレイアウトが著しく崩れてしまいます。cssソースを見ても一目瞭然で、#contentのwidthが600px、#sidebarのwidthが200px、合計で800pxなので760px内に納まるわけがありません。

横幅変更の際だけでなく、ホームページを作成する際の横幅は、基準となる要素（今回は#wrapper）の中にそれぞれの内包要素が納まるように指定しなければなりません。

今回は、各要素の余白（ margin padding ）やborder指定をしていませんが、これらの指定を加えていくと、初心者の場合、必ずと言っていいほどレイアウト崩れを起こします。その場合でも、基準となる要素内にそれぞれの要素が上手く納まるように計算するのが基本です。つまり、簡単な足算と引算が最も重要という事です。

関連：CSSレイアウト崩れの原因について

横幅を小さくするには

横幅を小さくする（狭くする）指定について説明します。今回は#wrapperを760pxとして解説します。

基準要素の幅が760pxとなるので、#content、#sidebarのwidthを760px、もしくは760px以下に指定しなければなりません。考えるのは、#contentのwidthを小さくする、あるいは#sidebarのwidthを小さくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:760px;と同等か、あるいは760px以下になるように計算する事です。以下は、横幅を小さくする（狭くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

横幅を大きくするには

横幅を大きくする（広くする）指定について説明します。今回は#wrapperを860pxとして解説します。

基準要素の幅が860pxとなるので、サンプルの指定のままでは#contentと#sidebarの間に60pxの空白が生じてしまいます。（これは実際には、レイアウトを崩さない為の指定テクニックです。）よって#content、#sidebarのwidthを860px、もしくは860px以下になるように指定します。考えるのは、#contentのwidthを大きくする、あるいは#sidebarのwidthを大きくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:860px;と同等か、あるいは860px以下になるように計算する事です。以下は、横幅を大きくする（広くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 660px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 260px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 640px;
    float: right;
}

#sidebar{
    width: 220px;
    float: left;
}

#footer{ clear: both; }

CSS:floatレイアウトの基本

CSS：floatレイアウト（段組）の基本解説です。CSS：floatプロパティを使ったホームページの作り方を、初心者用に解りやすく解説します。尚、CSSは外部CSSを利用したと仮定しています。以下はCSS：floatプロパティを使った最も簡単な段組の基本部分をイメージ画像にしてみました。

css:floatレイアウトのイメージ

floatレイアウトの基本は、上記のように親ボックスの中で左右に配置させたい子ボックスをfloat指定により回り込ませ、最後に回り込みを解除するのが最も簡単な段組です。では、親ボックスと子ボックスを実際の作成例に沿って置き換えてみます。

まずそれぞれの要素（div要素）を用意します。

(x)HTML

<div></div> <!-- 親ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
親ボックス内に子ボックスを配置するので
<div> <!-- 親ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
</div> <!-- 親ボックスの終わり -- >

idセレクタ名をつける

上記サンプル図のボックスに、それぞれ任意のセレクタ"名をつけます。セレクタ名は一目でわかる言葉（単語など）を指定します。ここでは下記のように指定します。

親ボックス(div)を wrapperとする。
ひとつ目の子ボックス(div)を contentとする。
ふたつ目の子ボックス(div)を sidebarとする。
最後の子ボックス(div)を footerとする。

上記の条件で、サンプル図の解説分を読み替えてみます。

wrapper内でcontentとsidebarを左右に配置。
wrapper内で回り込みを解除（footer）。という事になります。

(x)HTML

<!-- wrapper内に各要素（ボックス）を配置 -->
<div id="wrapper">
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css
#wrapper{ 各種指定 }
#content{ 各種指定 }
#sidebar{ 各種指定 }
#footer{ 各種指定 }

CSS指定/レイアウトを考える

実際に各要素のCSS指定をしていきます。

まず最初に考える事は、全体の幅（width）をどうするかです。固定幅にするのか、可変幅（リキッドレイアウト）にするのか、コンテンツ部分の幅（width）、サイドバーの幅（width）、右サイドバータイプ、左サイドバータイプなどを考えます。ここでは以下の条件で指定していきます。

全体の幅（#wrapper）を800pxの固定幅とする。
左サイドバータイプとする。
コンテンツ部分の幅（#content）を600pxとする。
サイドバー部分の幅（#sidebar）を200pxとする。

css

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;  /* 右に配置 */
}

#sidebar{
    width: 200px;
    float: left;  /* 左に配置 */
}

#footer{ clear: both; }  /* float解除 */

ワンポイント

右サイドバータイプにする場合、上記の#contentと#sidebarのfloat指定を逆にします。CSS指定で左右の変更が簡単に出来るのがCSSレイアウトのメリットです。

右サイドバータイプにする場合の別の方法として、単に#sidebarのfloat指定をleftにしても良いのですが、#contentと#sidebarのfloat指定は左右別々にした方が、レイアウト上でかなり融通がききます。

右サイドバーにする時のCSSソースサンプル

css

#content{
    width: 600px;
    float: left;  /* 左に配置 */
}

#sidebar{
    width: 200px;
    float: right;  /* 右に配置 */
}

ヘッダーを追加する

ホームページらしく、ヘッダー部分を追加します。今回ヘッダー部分は#headerとします。指定は簡単で#wrapper内に#headerを挿入するだけです。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/*
高さだけ指定しています。
#headerの幅は指定しなくても#wrapperのwidth分広がります
*/
#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

レイアウト崩れ：float指定

CSS指定によるレイアウト崩れの原因についてのチェック項目です。（標準準拠モードで表示する事を想定しています）

floatに関する指定について

以下はfloat指定の際の注意項目です。確認してみて下さい。

width指定をしていない。

すべてのブラウザで起こるわけではありませんが、Mac IE5ではfloat指定の際widthも指定しなければ回り込みが上手く反映されません。

widthを指定する事は、余白を設定する場合やリンク領域を要素全体に広げたい際にも重要になります。普段から記述する事をお勧めします

floatを指定した同方向にmarginを指定している。

サンプル

#sample{
float: left;
width: 180px;
margin-left: 20px;
}

IEではfloatと同方向にmarginを取ると、幅が2倍で表示されます。

widthの計算。

全体の幅を超えていないか
余白分差し引いているか
border分差し引いているか

以下のCSS指定サンプルではレイアウトは崩れます

#wrapper{ width: 700px; }

#content{
    width: 500px; /* この場合なら 489px */
    float: left;
    margin: 0 10px 0 0;
    border-right: 1px solid #000;
}

#sidebar{
    width: 200px;
    float: right;
}

#footer{ clear: both; }

標準準拠モードと後方互換モードに関する部分です。詳細はCSSレイアウト崩れの原因についてで確認して下さい。

レイアウト崩れ：文書型定義（DTD）

CSS指定によるレイアウト崩れの原因についてのチェック項目です。（標準準拠モードで表示）

どの文書型定義（DTD）に従って記述しているかを明確にします。以下はDTDとレタリングモードの一覧です。

DOCTYPE宣言とブラウザレタリングモード表
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
互換モード	互換モード	互換モード	互換モード	互換モード	互換モード
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	標準準拠	標準準拠	標準準拠	標準準拠	標準準拠
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	標準準拠	標準準拠	標準準拠	標準準拠	互換モード
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN” “http://www.w3.org/TR/html4/strict.dtd”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	標準準拠	標準準拠	標準準拠	標準準拠	標準準拠
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	標準準拠	標準準拠	標準準拠	標準準拠	標準準拠
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	互換モード	標準準拠	標準準拠	標準準拠	標準準拠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	標準準拠	標準準拠	標準準拠	標準準拠	標準準拠
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	互換モード	標準準拠	標準準拠	標準準拠	標準準拠
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	標準準拠	標準準拠	標準準拠	標準準拠	標準準拠
<?xml version="1.0" encoding="文字コード"?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
IE7	IE6	Firefox	Opera	Safari	MacIE5
標準準拠	互換モード	標準準拠	標準準拠	標準準拠	標準準拠

XML宣言について

上記レタリングモード一覧にもあるように、IE6ではXMLを宣言すると強制的に互換モード表示になります。CSS側での対応も可能ですが、現状ではXMLを宣言しない方が（記述しない）望ましいです。

レイアウト崩れ：セレクタ名

CSS指定によるレイアウト崩れの原因についてのチェック項目です。（標準準拠モードで表示）

この項目はレイアウト崩れにはあまり関係がありませんが、この項目も(X)HTMLの見直しと同様に基本的な部分であり、CSSの指定が反映されない時などは、下記のパターンが大半です。

id or classの記述ミス
セレクタ名の記述ミス

id or classの記述ミス

例えば、(X)HTML側で<div id=”sample”>としているにも関わらずCSS側では.sampleとしている。

セレクタ名の記述ミス

例えば、(X)HTML側で<div id=”sidebar“>としているにも関わらずCSS側では#left-sidebarとしている。

例えば、(X)HTML側で<div id=”left-sidebar“>としているにも関わらずCSS側では#left_sidebarとしている。

初歩的なミスですが、実際この手の記述ミスは案外多いものです。

レイアウト崩れ：(X)HTMLの見直し

CSS指定によるレイアウト崩れの原因についてのチェック項目です。（標準準拠モードで表示）

CSSのプロパティ等についての知識が豊富でも、肝心な(X)HTMLの記述がおろそかでは何の意味もありません。ウェブ標準仕様に従うのであれば、(X)HTMLの正確なマークアップと正しい使い方をしなければなりません。

CSSの指定を調べる前に、(X)HTMLの記述が正しく行われているかを確認しましょう。

CSSレイアウト崩れの原因について

CSS指定によるレイアウト崩れの原因について、初心者の方々でも分かりやすく解説していきます。例えば、下記のような場合の対処です。

IEでは上手く表示しているのに、Firefoxで表示したらサイドバーが落ちていた。
IE6では上手く表示しているのに、IE7で表示したらサイドバーが落ちていた。
Macで表示したらレイアウトが崩れていた。

CSS指定によるレイアウト崩れの原因については、さまざまな要因が考えられますが、基本は(X)HTMLのマークアップが正しく記述されているかを最初に確認しておきましょう。

以下のレイアウト崩れに関する解説は、CSSハックの解説ではありません。IE7の登場によりIE6で使用可能だったハックがIE７では無効となるように、ブラウザ側の対応も次第に改善方向に向かいます。ハックは取り敢えずの処置と考え、CSS指定の基本を理解しましょう。

ボックスモデルの概念

レイアウトの場合だけでなく、<div> <h1> <img>等の各要素にもCSS指定をしますが、これらの各要素はすべてボックスという概念を持っています。

ボックスモデル

CSS指定でのレイアウト崩れの原因の多くは、上記サンプル図の padding と border によるところが大半です。

標準準拠モードと後方互換モード

標準準拠モードと後方互換モードのCSS解釈の違いについて解説します。

表示モードについて

標準準拠モードは width 及び height に padding 及び border を含みません。

後方互換モードは width 及び height に padding 及び border を含みます。

簡単なサンプルとして下記のような指定をした場合、

div.sample{
    width: 400px;
    padding: 20px;
    border: 10px solid #000;
}

後方互換モードは width 及び height に padding 及び border を含むので幅は400pxです。

標準準拠モードは width 及び height に padding 及び border を含まないので下記サンプルのようになります。

ボックスのCSS解釈について

上記のように、CSSで指定した width:400px; はcontent領域(データ領域)の幅を意味します。つまり、上記サンプル指定では、content領域(データ領域)が400px、paddingが左右で40px、borderが左右で20px、合計460pxがdiv.sampleの横幅になります。尚、今回、高さについては無視していますが基本は同様です。

標準準拠モードでwidth:400px;にする場合は下記のように指定します。

標準準拠モード指定サンプル

全体の幅を400pxとしたいので、400pxからpadding:20px;（左右で40px）とborder:10px;分（左右で20px）を差し引いたものがwidthとなります。

関連情報：DOCTYPE宣言とレタリングモード表

標準準拠モードによるwidth指定サンプル1

実際の指定にありうるパターンで解説します。

サイドバー部分200px（#sidebarとする）
余白を左右に10px（今回はpaddingとする）

#sidebar{
    width: 180px;
    float: right (or left);
    padding: 0 10px;
}

表示上での幅は200pxですが、実際に#sidebar内に記述できるのは180pxという点に注意。180pxを超えるバーナーやイメージ画像等を入力するとサイドバーがもしくは本文部分が落ちます。

標準準拠モードによるwidth指定サンプル2

ウェブサイトの段組みを例にしてみます。

全体の幅を700px（#wrapperで包括）
記事部分を500px,左寄せ（#contentとする）
記事部分の余白を左右に10px（今回はpaddingとする）
記事部分の右側にborder（1pxとする）
サイドバー部分200px,右寄せ（#sidebarとする）
余白を左右に10px（今回はpaddingとする）

#wrapper{ width: 700px; }

#content{
width: 479px;
float: left;
padding: 10px;
border-right: 1px solid #000;
}

#sidebar{
width: 180px;
float: right;
padding: 10px;
}

#footer{ clear: both;}

標準準拠モードは width 及び height に padding 及び border を含まないので、borderの1px分も差し引きます。