島根県ホームページ制作-ウェブマジック

島根県ホームページ制作-ウェブマジック http://www.hp-webmagic.com 島根県松江市Web標準ホームページ制作とビジネスブログ制作(Wordpress) Sun, 14 Dec 2008 15:27:33 +0000 http://backend.userland.com/rss092 ja 無料テンプレート｜デザイン3-3 無料ホームページテンプレート/デザイン3-3 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/302 無料テンプレート｜デザイン3-2 無料ホームページテンプレート/デザイン3-2 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/301 無料テンプレート｜デザイン3-1 無料ホームページテンプレート/デザイン3-1 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/300 無料テンプレート｜デザイン2-3 無料ホームページテンプレート/デザイン2-3 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/299 無料テンプレート｜デザイン2-2 無料ホームページテンプレート/デザイン2-2 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/298 無料テンプレート｜デザイン2-1 無料ホームページテンプレート/デザイン2-1 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/297 無料テンプレート｜デザイン1-3 無料ホームページテンプレート/デザイン1-3 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/296 無料テンプレート｜デザイン1-2 無料ホームページテンプレート/デザイン1-2 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/294 無料テンプレート｜デザイン1-1 無料ホームページテンプレート/デザイン1-1 [商用利用可] ダウンロードしてすぐにご利用いただける、ウェブ標準XHTML+CSSレイアウトの無料デザインテンプレートです。テンプレート一覧 http://www.hp-webmagic.com/archives/293 プラグイン：Category Order[カテゴリーの並び変え] このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードサイト：David Coppit's Code Page 最下部 Category Order 2.0.1 をダウンロード[2008/10/30現在] ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。使い方はいたってシンプル。 [Insert spacer before this item] カテゴリー行間が開く(上)。 [Insert spacer after this item] カテゴリー行間が開く(下)。 [Put the Post Count Inside the Category Link] 投稿数までリンクに含まれる(リンク領域が広がる)。選択後は[Put the Post Count Outside the Category Link]と表示される(解除)。 [Reset the Order to Single Level , Alphavetical] デフォルトの状態へ。参考：Category Order：カテゴリーの順序を並び替え http://www.hp-webmagic.com/archives/269 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'); ?> デザイン的に変更箇所が多い場合はこちらが便利。 http://www.hp-webmagic.com/archives/256 Wordpress：条件分岐指定タグ特定のページにだけ特定内容を表示させたい時などに使用。 index.phpにだけ特定内容を表示 page.phpにだけ特定内容を表示 single.phpにだけ特定内容を表示など <?php if(タグ): ?> ～ <?php endif; ?> 指定サンプル:1 <?php if(is_home()): ?> <h1>AAAAAAAAAA</h1> <?php endif; ?> <?php if(is_archive()): ?> <h1>BBBBBBBBBB</h1> <?php endif; ?> 指定サンプル:2 <?php if(is_home()): ?> <h1>AAAAAAAAAA</h1> <?php else: ?> <h1>BBBBBBBBBB</h1> <?php endif; ?> メインページ <?php if(is_home()): ?> ～ <?php endif; ?> フロントページサイトのフロントページが表示されている場合。投稿の場合とページの場合あり。管理画面の「設定>表示設定>トップページの表示」で、「最新の投稿」が選択されているか、「固定ページ (以下を選択)」で現在のページが表示されている場合。注: この条件タグはバージョン 2.5 で追加。 <?php if(is_front_page()): ?> ～ <?php endif; ?> シングルページ <?php if(is_single()): ?> ～ <?php endif; ?> 記事を含むページ <?php if(comments_open()): ?> ～ <?php ... http://www.hp-webmagic.com/archives/255 min-width：最小幅指定 min-widthプロパティは要素の最大の横幅を設定。IE6以前のバージョンは未対応な点に注意。プロパティ min-width 値 em | px | % 対象すべての要素(tableは除く) 継承の有無なし通常は最小幅[max-width]と同時指定します。 <div id="box"> <div id="***"></div> <div id="***"></div> <div id="***"></div> </div> ---- CSS ---- #box { min-width: 700px; max-width: 900px; } IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。 IE独自拡張スクリプトを記述 #box { min-width: 700px; max-width: 900px; width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%"); position: relative; } IE用CSSファイルを読み込む <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <!--[if gte IE 6]> <link rel="stylesheet" href="IE用.css" type="text/css" ... http://www.hp-webmagic.com/archives/254 max-width：最大幅指定 max-widthプロパティは要素の最大の横幅を設定。IE6以前のバージョンは未対応な点に注意。プロパティ max-width 値 em | px | % 対象すべての要素(tableは除く) 継承の有無なし通常は最小幅[min-width]と同時指定します。 <div id="box"> <div id="***"></div> <div id="***"></div> <div id="***"></div> </div> ---- CSS ---- #box { min-width: 700px; max-width: 900px; } IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。 IE独自拡張スクリプトを記述 #box { min-width: 700px; max-width: 900px; width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%"); position: relative; } IE用CSSファイルを読み込む <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <!--[if gte IE 6]> <link rel="stylesheet" href="IE用.css" type="text/css" ... http://www.hp-webmagic.com/archives/253 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 { ... http://www.hp-webmagic.com/archives/252 プラグイン：Related Entries[関連記事一覧表示] このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードサイトダウンロードしたファイル（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 ... http://www.hp-webmagic.com/archives/251 Wordpressの使い方(運用例) Wordpressは[ID]と[パスワード]を発行する事により、ひとつのサイトを複数人で運営管理（更新作業）できます。今までのような、ホームページ制作担当者だけが更新作業をするより効率的に運営が可能となります。各課単位で更新商店街の各店単位、共同組合の各組合員単位で共同運営 Wordpressについて以下はWordPress 日本語ローカルサイトからの引用文です。ブログの運用と管理柔軟なファイル配置 Wordpressの関連ファイルの配置を自由に配置することが出来ます。これらのファイルは公開されているブログの重要な構成ファイルで、ブログと同じディレクトリに配置することも、違うディレクトリに配置することも出来ます。例えば、http：//example.com（サーバー上のディレクトリ：public_html）というブログの関連ファイルをhttp：//example.com/wordpress（サーバー上のディレクトリ：public_html/wordpress）に配置することが可能です。ユーザー管理 Wordpressでは、各機能に対するユーザーアクセス権を管理する為に、ユーザーレベルを使用しています。ユーザーレベルを変更することによって、ブログ内のコンテンツの編集や作成等といった、各ユーザーの権限を制限することが出来ます。簡易なインストール、アップデート「たった５分！」Wordpressは、インストールがシンプルで、操作性に富んでいます。また、最新バージョンへのアップデート作業は簡単で、インストールよりも時間が掛かりません。動的なページ生成ブログを更新する度にウェブページを再構築するといったような事は必要ありません。全てのウェブページは、ブログ読者の要求に応じて、データベースやテンプレートを使用して生成されます。これは、ブログの更新やデザインを、可能な限り早くすることが出来ることを意味し、そしてなによりもサーバー容量を最小限に抑えています。国際化と現地語化選択により現地語に対応したブログを作成する事や、また選択した言語で配信する事ができます。gettextを使用する事により、翻訳や現地語化を最大限に行う事が出来ます。ブログの配信フィード Wordpressは、RSS 1.0 (aka RDF), RSS 2.0、そしてATOM等の規格に完璧に対応しています。さらに、作成した全てのページに対して、読者が購読出来るように関連したフィードを生成します。例えば、最新の記事に対してやカテゴリー等、つまり必要とする全てに対してのフィードが用意されています。より多くの読者が個々の項目を把握し続けたいと思えば、筆者はより簡単に伝えたい内容を広く配信することが出来ます。乱雑さのなくなったパーマリンクブログ内の個々のページへのURLは、標準的で乱雑さのない方法に従っています。また、それらURLは構造的で、実用的で、そして人やコンピュータ（検索エンジン含む）が理解しやすいリンクになっています。簡潔なURLは、検索エンジンの最適化や向上したユーザーエクスペリエンスに不可欠です。ブログ間の伝達増加し続けるインターネットの中で、Wordpresは、PingBack（ピンバック）とTrackBack（トラックバック）機能を備えるようになりました。他のブログとの伝達手段としては最も有用で、他のブログからもPingbackやTrackbackを受けることが出来ます。デザインのカスタマイズテンプレートベースのデザイン Wordpressでは各ページを動的に生成するためにテンプレートを使用しています。テンプレートエディターとテンプレートタグでテンプレートを編集することにより各コンテンツの表示を管理できます。テンプレートとファイルエディタ Wordpressには、テンプレートや関連ファイルを編集するための、ファイルエディタが備わっています。編集するために該当ファイルをダウンロードしたり、アップロードをしたりといった必要はなく、その場でブラウザ上から編集出来ます。テンプレートタグテンプレートタグにより、ブログに表示される情報や内容を、より簡単にデザイン出来ます。ブログをデザインするためにPHPの達人にある必要はありません。テーマ手軽に利用可能なテーマやスタイルを使用して、ブログの外観を変更できます。また、自作のテーマやスタイルを作成したり、共有することが出来ます。プラグインプラグインによりブログの機能を拡張することが出来ます。ユーザーによって開発された多くのプラグインは、既に入手可能で、ブログに必要と思われる全てのことに対して使用可能です。コンテンツの作成パスワードによる保護ある複数人でブログの内容を共有し、全ての人には公開したくない場合、その記事にパスワード保護を掛けることにより簡単に出来ます。投稿スラグもし簡潔なパーマリンクを使用しているのであれば、各記事に対して投稿スラグを使用することによりリンクを定義することが出来ます。事前投稿今日書いた記事を、自動的に将来のある時点でブログに表示させることが出来ます。複数ページ投稿もし長い記事になってしまった時、読者が最後までずっとスクロールする必要がない様に、記事をいくつかのページに分けることが出来ます。ファイル・画像のアップロード画像やファイルをアップロードして、記事に表示したりリンクを付けることが出来ます。それらをアップロードする際にはサムネイルを作成するオプションもあります。カテゴリーカテゴリーやサブカテゴリーとドンドン細分化して記事を体系化することが出来ます。感情表現 WordPressは、":)"の様なスマイリーを的確に認識し、これに対応する画像イメージに変換します。草稿の保存未完成の記事を保存し、後で編集し、終わった時に投稿することが出来ます。記事のプレビュー【投稿】ボタンを押す前に、思った通りになっているか確認するために、記事のプレビューを見ることが出来ます。実際、プレビューは即座に行われるためいつでも確認できます。アーカイブと検索アーカイブ化長期間ブログを続けた後問題になってくるのは、どの様に上手く記事を構成するかです。そのためにWordpressは、全ての過去記事を含んだアーカイブを表示するために、既存のオプションをいくつか備えています、例えば、年間、月間、日別、週間、著者別(author-wise)から選択することが出来ます。そして、テンプレートタグを使用して、これらのアーカイブページへのリンクを生成することで、簡単にメインページ（もしくはそれ以外のページ）からアーカイブページへリンクすることが出来きます。Wordpressは動的に各ページを生成するので、サーバー容量を別途消費することはありません。検索 Wordpressは、最初から検索機能ツールが備わっていて、ブログ訪問者が単語単位で検索できます。また、search-hilite pluginを使用したWordpressであれば、検索した単語を強調表示します。これにより、さらに、より簡単に訪問者が、検索したものを見つけることが出来ます。これに付け加えて、このプラグインは、googleの様な検索エンジンの検索結果をクリックして訪問した読者に対しても同じように動作します。全てを含めて、Wordpressでの検索は快適です。コメント及びディスカッション HTMLタグの使用全ての人が悪い人だというわけではないが、ご自身のブログで使用可能なHTMLタグを決める事によって、悪い人たちを抑制します。Wordpressで許可されているデフォルトで利用可能なHTMLは、サーバーやデータの危険性を落とすことない妥当な選択で、読者にコメント時にHTMLを使用出来るようにしています。適正化管理を徹底したい人のために、Wordpressは、いくつかの適正化オプションを提供しています。例えば、ブログに表示されている全てのコメント特定の言葉を含むコメント特定のIPアドレスから投稿されたコメント許可している数以上のリンクを含むコメントこれら全てスパムやサイトの破壊行為を抑制します。通知 Wordpressは、新しいコメント、承認待ちのコメント等の、最新情報をお知らせするためにメールを送信することが出来ます。 http://www.hp-webmagic.com/archives/250 プラグイン：Google Maps このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードサイト制作者ページ解説ページ：Google Mapsの新仕様に対応したWordPressのプラグイン -Google Maps Quicktag http://www.hp-webmagic.com/archives/243 プラグイン：Lightview for WordPress[画像拡大スクリプト] このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードページ：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の値 http://www.hp-webmagic.com/archives/242 プラグイン：Google (XML) Sitemaps Generator このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードページ制作者ページ Sitemap.xmlの生成。ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。空ファイル[sitemap.xml]・[sitemap.xml.gz]を作成して、トップディレクトリにアップロード。パーミッション[606/666] http://www.hp-webmagic.com/archives/241 プラグイン：WP-PageNavi[ページナビ] このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードページ作者ページ番号表示のページリンク[ページング] ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。ページナビを設置したい箇所に下記ソースを挿入。 <?php wp_pagenavi(); ?> ページナビゲーション：pagebar ダウンロードページ作者ページ番号表示のページリンク[ページング] ダウンロードしたファイル（Zip）を解凍後、/wp-content/plugins/へアップロード。ページナビを設置したい箇所に下記ソースを挿入。 <?php wp_pagebar(array(’before’=>’Pages: ‘))?> http://www.hp-webmagic.com/archives/240 プラグイン：All in One SEO Pack[seo] このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロード日本語版 All in One SEO Pack 1.4.6.14 作者ページ各ページのTitleタグ、Meta Keywords、Meta Descriptionの個別指定。 http://www.hp-webmagic.com/archives/239 プラグイン：Breadcrumb Navigation XT[パン屑リスト] このページは、私がWordpess/ワードプレスでブログサイトを制作する上で必要とするプラグインを書き留めたものです。よって、下記Wordpess/ワードプレス用プラグインの使用方法を解説したページではありません。ダウンロードページ作者ページ <?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: オプション設定 // ... http://www.hp-webmagic.com/archives/238 FFFTPの設定について各サーバー及びプロバイダ別のFFFTPの設定マニュアルページです。サーバー名アカウント名等は事前に控えを用意しておいて下さい。さくらインターネット xrea.com ステップサーバーロリポップ CPI OCN ぷらら Yahoo Geocities DION So-net http://www.hp-webmagic.com/archives/229 CSSレイアウト-余白指定：padding 余白（padding）の指定ついて解説します。CSS:floatレイアウトの基本で使用したサンプルレイアウトを例にします。余白の指定はレイアウトに影響を及ぼすので注意が必要です。特にウェブ標準に準拠したホームページ作成ではpaddingの指定は重要になります。基本をしっかり覚えましょう。以下は、ウェブ標準に準拠した場合の解説となります。 (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; ... http://www.hp-webmagic.com/archives/225 CSSレイアウト-余白指定：margin 余白（margin）の指定ついて解説します。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; ... http://www.hp-webmagic.com/archives/222 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; ... http://www.hp-webmagic.com/archives/219 CSS:floatレイアウトの基本 CSS：floatレイアウト（段組）の基本解説です。CSS：floatプロパティを使ったホームページの作り方を、初心者用に解りやすく解説します。尚、CSSは外部CSSを利用したと仮定しています。以下はCSS：floatプロパティを使った最も簡単な段組の基本部分をイメージ画像にしてみました。 floatレイアウトの基本は、上記のように親ボックスの中で左右に配置させたい子ボックスをfloat指定により回り込ませ、最後に回り込みを解除するのが最も簡単な段組です。では、親ボックスと子ボックスを実際の作成例に沿って置き換えてみます。まずそれぞれの要素（div要素）を用意します。 (x)HTML <div></div> <!-- 親ボックス -- > <div></div> <!-- 子ボックス -- > <div></div> <!-- 子ボックス -- > <div></div> <!-- 子ボックス -- > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 親ボックス内に子ボックスを配置するので <div> <!-- 親ボックス -- ... http://www.hp-webmagic.com/archives/214 レイアウト崩れ：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レイアウト崩れの原因についてで確認して下さい。 http://www.hp-webmagic.com/archives/193 レイアウト崩れ：文書型定義（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 ... http://www.hp-webmagic.com/archives/191