プライベートモードで閲覧中です。

sugar pot : 【cfdn_09】徹底研究ぅ~♪#4 ページの構成

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

【cfdn_09】徹底研究ぅ~♪#4 ページの構成

2005年10月06日(木) コメント:0 トラックバック:0

以前の【私家版・はじめてのFC2ブログカスタマイズ】シリーズではHTMLを前から一行ずつ追っていって、それがどこを表しているか読み解いた。今回は逆、実際に表されているものから、それがHTMLのどこにあるか見つけてみよう。

まずはトップページ。
[図1]

トップページは図1のように構成されている。この図を見ながら、このテンプレートのページ構造について、見ていこう。
新規ウィンドウで図1を開く


構造

container
  1. <div id="container"><!-- container -->
ここからcontainerだよ、と。container、つまりコンテナである。
header
ヘッダ。タイトルやタイトル画像が入る部分。
  1. <div id="header"><!-- header -->
  1. </div><!-- /header -->
search
このテンプレートでは検索部分が上部に表示されている。
  1. <div id="search"><!-- search -->
  1. </div><!-- /search -->
contents
中身。メインカラムとサイドバーが含まれる。
  1. <div class="section" id="contents"><!-- contents -->
primary-column
メインカラム部分。
  1.     <div class="primary-column"><!-- primary-column -->
  1.     </div><!-- /primary-column -->
secondary-column
サイドバー部分。
  1.     <div class="secondary-column"><!-- secondary-column -->
  1.     </div><!-- /secondary-column -->
コンテンツ部分ここまで。
  1. </div><!-- /contents -->
入れ子になっていることに注意。
footer
フッタ。
  1. <div id="footer"><!-- footer -->
  1. </div><!-- /footer -->
ここまで、ブログの中身はすべてピンクのコンテナに入れられている。締めくくりは</body>の直前のこの行。
  1. </div><!-- /container -->

大体の構造がお分かりいただけただろうか。<!-->~<-->で囲まれた(コメントアウトされた=実際にブラウザの画面では見えない)部分で示されているので、それを頼りにソースを見ると良い。

実際には、本文はメインカラム(primary-column)に、メニューはサイドバー(secondary-column)におさめられることになる。この構造を頭に置いて、次からのソースをご覧いただきたい。

#447
カテゴリ:101 インターネット(www)

trackback

<<考え過ぎると登録できない (BlogPet) | 【cfdn_09徹底研究ぅ~♪】#5 モードにかかわらず常に表示されるもの(1)>>

コメント(-0件)

コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/447-072d9b84

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。