人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

html、CSSについての質問です。こちらのサイト(ttp://petit-mall.jp/)は、ソースを見ると
トップ→真ん中の記事→左のメニュー→右のメニュー
という構成になっています。
わたしは、同じような表示のサイトを作っていますが
トップ→左のメニュー→真ん中の記事→右のメニュー
という順番で作っています。

真ん中の記事を先に表示した方が、SEO的にもいいかと思うのですが
どのようにしたらよいのでしょうか?

ちなみに、参考記事の冒頭hを取ってますので、hを加えてからご参照いただければと思います。

●質問者: yuki1113
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:.jp CSS HTML SEO ttp://
○ 状態 :終了
└ 回答数 : 2/3件

▽最新の回答へ

1 ● pahoo
●35ポイント

トップ、左メニュー、中央記事、右メニューを別々の「ボックス」にして、CSSでボックスの配置方法を指定すれば、HTML上ではどんな順番にでもできます。

◎質問者からの返答

意外と大変な作業なんですね。

でも、これができれば自由にレイアウトできそうです。

時間があるときに、じっくり取り込んでマスターしたいです


2 ● rouge_2008
●35ポイント ベストアンサー

CSSの記述を確認してみてください。

メインコンテンツと左のメニューのボックスの外側にさらにボックスがあります。

この外側のボックスを「float:left;」で左側に配置し、右のメニュー用のボックスを「float:right;」で右に配置しています。

※外側のボックスの中に入っているボックスには、それぞれ「float:right;」(メイン)、「float:left;」(左のメニュー)を指定して配置しています。

大体のHTML構造だけ書くと以下のような感じになります。

<div id="container">

一番外側のボックス(※ボックス内包用)

※配置指定なし

<div id="header">

ヘッダーのボックス

※配置指定なし

</div>

<div id="threeColmn">

外側のボックス(※メインとメニューのボックス内包用)

※左に配置指定する

<div id="story">

メインコンテンツのボックス

※右に配置指定する

</div>

<div id="firstMenu">

左のメニューのボックス

※左に配置指定する

</div>

</div>

<div id="secondMenu">

右のメニューのボックス

※右に配置指定する

</div>

<div id="footer">

フッターのボックス

※配置指定なし

※回り込み解除の指定をする

</div>

</div>


CSSは、大体以下のようになります。(各ボックスの数値は適当です。)

#container {

width: 780px;

}

#header {

}

#threeColmn {

float: left;

width: 600px;

}

#story {

float: right;

width: 420px;

}

#firstMenu {

float: left;

width: 180px;

}

#secondMenu {

float: right;

width: 180px;

}

#footer {

clear: both;

}


※floatによる配置をするボックスには、必ずwidthで横幅を指定する必要があります。

※floatによる配置をした後は、回りこみの解除が必要になります。(上記の例ではfooterに回り込みの解除を指定しました。)



以下のサイトで配布されているテンプレートを使用しているようですので、HTMLソースやCSSを確認してみてください。

http://design.affiliatetek.net/


3段組レイアウトの勉強には、以下のサイトが参考になると思います。

http://css.uka-p.com/

※実践講座を試してみてください。

実際に順番に作ってみるとわかりやすいと思います。

◎質問者からの返答

おぉぉぉ!!あのサイトのテンプレートが入手できるとは!!

ず〜〜〜っと探していたんですよぉぉ(3年くらい)

本当に助かりました!ありがとうございます。

取り急ぎ、サイトを作りたいので、こちらのテンプレを使い

その後、自分でアレンジできるようにしたいと思います。

ありがとうございました!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ