上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 もう、ここまで読んで理解出来れば、もうほとんどオリジナルブログは作れる技能を取得したも同然です。
 今回は、チュートリアルを行いながら、問題点、細かいカスタマイズ課題点を抽出していきます。

 ブログの中に、ミニブログを作成してみましょう。


ブログの骨格を作る


ヘッダー、メインカラム、サイドバー、フッターを作る。

 まず、4コの<div>ボックスを組み上げてみます。
 HTML部分は「<div>~</div>」を4個。
 そして、CSS部分と対応させるため、旗印(クラス)を適応します。
 これで、箱に高さや幅を指定できるようになります。
 さらに、どういう状況なのか把握するため、箱に「background:#~;」で、背景色を設定。


HTMLCSS
<div class="header">
ヘッダー
</div>

<div class="main">
メイン
</div>

<div class="side">
サイド
</div>

<div class="footer">
フッター
</div>
.header {
width : 300px ; (幅)
height : 20px ; (高さ)
background : #995555 ; (背景色)
}

.main {
width : 190px ;
height : 100px ;
background : #559955 ;
}

.side {
width : 100px ;
height : 100px ;
background : #555599 ;
}

.footer {
width : 300px ;
height : 20px ;
background : #995599 ;
}
表示結果
ヘッダー
メイン
サイド
フッター


 これでは、ブログらしくないので、前回の「フロート」を使用します。
 ポイントは「float」と、それを解除するための「clear : both ;」でした。

HTMLCSS
<div class="header">
ヘッダー
</div>

<div class="main">
メイン
</div>

<div class="side">
サイド
</div>

<div class="footer">
フッター
</div>
.header {
width : 300px ;
height : 20px ;
background : #995555 ;
}

.main {
width : 190px ;
height : 100px ;
background : #559955 ;
float : left ;
}

.side {
width : 100px ;
height : 100px ;
background : #555599 ;
float : right ;
}

.footer {
clear : both;
width : 300px ;
height : 20px ;
background : #995599 ;
}
表示結果
ヘッダー
メイン
サイド
フッター


 サイドが吹っ飛びました…
 こういう場合はどうするか。
 そう、このヘッダーなんかの「部品」を、大きな箱の中に入れてやればいいのです。
 クラス(旗印)は何でもいいのですが、とりあえず「conteinar」(コンテナ)に決定。
 横幅は320pxの、ミニブログにおおよそ(*1)合わせた幅に設定します。
 高さは指定せず、パソコンに勝手に計算してもらいます。
 状況を分かりやすくするため、破線のボーダーを入れてみましょう。


HTMLCSS
<div class="conteinar">

<div class="header">
ヘッダー
</div>

<div class="main">
メイン
</div>

<div class="side">
サイド
</div>

<div class="footer">
フッター
</div>

</div>
.conteinar {
width : 320px ;
border : 4px dashed #ff0000 ;
}

.header {
width : 320px ;
height : 20px ;
background : #995555 ;
}

.main {
width : 190px ;
height : 100px ;
background : #559955 ;
float : left ;
}

.side {
width : 100px ;
height : 100px ;
background : #555599 ;
float : right ;
}

.footer {
clear : both;
width : 300px ;
height : 20px ;
background : #995599 ;
}
表示結果
ヘッダー
メイン
サイド
フッター



 どうでしょう?
 順を追って組み立てていくと、CSSはそこまで難しくないことがわかってきたのではないかと思います。
 稀にブログレイアウトで使用される「tableタグ」なんかは、これより遥かに難しかったりします。(しかも、テーブルでのレイアウトは、検索エンジン側が嫌うと言われています)

*1

 ブロックを組んでいく時は、計算してあまりきっちりサイズを決めていくと、ブラウザによってカラム落ちなどの現象が発生することがあります。
 そのため、サイズに余裕を持たせたレイアウトを取ることが基本になってきます。



実際に表示確認してみる(編集可)
【HTML】

【CSS】





☆実際にDIVボックスを、リアルタイムにフロートさせてみよう。
divフロートチェックツール(リアルタイム)

■次は、ブログ全体のセンタリングです。
ブログの中にブログ?・ミニブログのセンタリング

■divボックスフロート徹底講座。
実際にdivブロックを記事で利用する

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Mon.03.29.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。