<< コピペでできるCSS編集 バッ... ブラウザ毎にCSSの設定を切り分ける >>
 

コピペでできるCSSレイアウト(excite編)

はじめに

 ちょっとだけ、私のブログのスキンのレイアウトについて説明させて頂きます。(説明のため実際と違う部分もあります。)
 今回は最も基本となるCSSのレイアウトについてです。私よりも皆さんの方が素敵なデザインなので、ちょっと解説するのは恥ずかしいですが、頑張ってみようと思っています。
 基本的なことについては、詳しい解説サイトを最後に紹介しますので、そちらを参考にして下さいね。

a0031863_1511322.gif

図1 私のブログイメージ








レイアウト構造の説明

私が利用している2列レイアウトの概略を図2に示します。
 主な部分から説明すると、ブログのタイトルなどを表示する header 部分と、サイドのメニューなどを表示する menu 部分。そして本文の main 部分から構成されています。
menu 部分とmain 部分はCSS の floatをつかった回り込みを利用してレイアウトをしています。回りこみの解除を footer 部分で行っています。
 containerはセンタリングを行うために各部分を囲むように配置してあります。

a0031863_1514345.gif

図2 レイアウト構造図




HTML部分

このHTMLは図3に示すように、exciteブログの「D. 3列のレイアウト-左右にメニュー」を基に作成しています。
 実際に試される場合は、HTML部分をコピーし、3列レイアウトのメイン部分に貼り付けて下さい。(本文の部分についてはそのままでもOKです。理解を助けるためにこの部分をあえて説明してません。挑戦して見たい方は、ご自分で試して下さいね。)
a0031863_1522171.gif

図3 HTML編集部分




<div id="container">
  <div id="header">
    <div class="HEADER"><$header$></div>
    <div class="URL"><$blogurl$></div>
    <div class="USERMENU"><$adminmenu type=1$></div>
  </div>
  <div id="menu">
    <div class="PROFILE">
      <div align="center"><$logoimage type=1$></div>
      <$description$>
      <$nick$>
      <$calendar type=1$>
      <$menuleft$>
      <$menuright$>
      <$banner type=1$>
      <$xml$>
    </div>
  </div>
  <div id="main">
    <div id="mainbody"> <$post$></div>
    <$prepage type=1$>
    <$nextpage type=1$>
  </div>
  <div id="footer">Copyright (C) 2005 著作権者 all rights reserved.</div>
</div>






CSS編集

CSS編集の一番はじめの部分に以下のコードをコピーしてペーストすることでレイアウトが完成します。(exciteのCSSに追加するので、exciteのCSSのコードはそのままです。)



*{margin: 0; padding: 0;}
body {text-align: center;}
div {margin: 0 auto;}

#container{width:700px; text-align: center;}

#header{width:700px;height:100px;}

#menu{float: left; width:170px;text-align:center; }
#main{ margin-left:170px; width:520px;text-align:center;}
#mainbody{width:500px;}

#footer{width:700px;clear: both; text-align: center;}

.comment{word-break:break-all;}




参考になるサイト

floatで回り込みを利用したレイアウトについてのポイントは、float とサイズを指定することです。そして、clear: bothで回り込みを解除することを忘れないで下さいね。状況に応じて、margin-leftなどを利用したりすることが必要になってきます。詳しくは、以下のサイトをご覧になると、レイアウトが簡単にできるようになると思います。


スタイルシート(CSS)で段組を構成する 1 スタイルシートだけで段組を作る

スタイルシート(CSS)で段組を構成する4(前編)
 段の背景色が切れないようにする


スタイルシート(CSS)で段組を構成する4(後編)
 段の背景色が切れないようにする



注意点

floatで回り込みをする場合、各ブロックのサイズを指定しますが、サイズが収まりきれないと横に回りこまないで、下に表示されます。サイズを指定する場合は注意して下さいね。特に、ボーダを入れたときには、ボーダサイズとの差をwidthに指定する必要がります。 また、タグの閉じ忘れなどにもレイアウトが崩れますのでご注意下さい。
 
 このレイアウトを適応して表示が崩れる場合は、投稿欄に書かれている内容をチェックしてくださいね。写真のサイズが大きすぎたり、タグが閉じれてなかったりしただけでも崩れます。
(テーブルは自動調整があるので崩れにくいので気がつかないけど・・・)



最後に


 今回のレイアウトを基に今後説明をしたいと考えていますが、状況に応じてHTMLやCSSなど修正を行います。あらかじめご了承下さい。
 exciteの雛形はHTMLやCSSの規格とちょっとづれていますが、他のサイトで説明されている内容を実施できるように、そのままにしてあります。もし、ちゃんと記述したい方は修正して利用して下さいね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-01-08 15:02 | │├レイアウト | Trackback | Comments(4)
トラックバックURL : http://potto.exblog.jp/tb/2985117
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by shuduck at 2006-01-12 06:16
明けましておめでとうございます
本年も大変にお世話になると思います
よろしくお願いいたしまふ

投稿時にプレビュー画面が見れないのは
ブラウザの設定がおかしいのでしょうか
Sleipnir1.66を好んで使用しています
もちっと勉強がたりないかなぁ
Commented by potto37 at 2006-01-12 21:55
shuduckさん、明けましておめでとうございます。
本年もよろしくお願いいたします。

投稿時にプレビュー画面が見れない件ですが、「ポップアップ広告」の設定が有効の状態ではないでしょうか。
Sleipnir1.66の一番右下に×のマークと数字が表示されていると思います。
この部分をマウスの左クリックをするとブロックしたページが表示されます。ブロックしたページのURLをクリックして選択し、右側の許可ボタンを押してURL入力欄に以下のように入力します。

http://www.exblog.jp/blog/*


それでもできない場合は、一番右下に×のマークと数字の部分を右クリックし、「ポップアップ広告(B)」のチェックを外してから投稿時のプレビューを確認して下さい。
Commented by shuduck at 2006-01-13 19:34
リカバリーした直後なので
設定するの忘れてました
できましたありがとうございまふ~♪
Commented by potto37 at 2006-01-13 23:34
shuduckさん、うまくできたようでよかったです^^
リカバリーの後って、いろいろ設定があって大変ですね。
<< コピペでできるCSS編集 バッ... ブラウザ毎にCSSの設定を切り分ける >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。