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

CSSについて教えてください。YahooやAmazon、その他いろいろなサイトのトップページでメニューなどがボックスで囲まれています。そして中央あたりに本文が書かれいます。例えばAmazonで言うと、「ブラウズ」「気になるこのアイテム」「ヘルス&ビューティー トップセラー」などボックスで囲まれているものです。このようなデザインをCSSで実現したいと思っています。tableでできるのは知っていますが、CSSでこのようなボックスで囲んでそのボックスの配置の仕方が説明されているサイトを教えてください。ちなみにホームページビルダー12を使っています。"ボックス","CSS"での検索はすでにしていますので、もの凄くわかりやすく例題がのっているページを教えてください。

●質問者: popattack
●カテゴリ:ウェブ制作
✍キーワード:Amazon CSS Yahoo アイテム サイト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● KUROX
●27ポイント

http://weblibrary.s224.xrea.com/weblog/css/cat15/456bereastreet....

HTMLソースレベルではこれが分かりやすいと思います。

◎質問者からの返答

ありがとうございます。参考になります。


2 ● drowsy
●27ポイント

引用元のテンプレサイト

http://www.netmania.jp/templates/deco_css.php

とりあえずこれ↓をコピペしてhtmlに貼り付けて保存してみてください。ボックスができます。

<div style="padding:5px;border-color:#009900;border-width:1px;border-style:solid;height:50px;width:80px;">TEXT<br>TEXT<br></div>

説明は以下の通り。(分かりやすいように意訳してます)

<div style="       ←ここから四角(ボックス)が始まります
padding:5px;       ←枠と中身のスペース。テーブルのセル余白みたいな。
border-color:#990000;  ←枠の色
border-width:1px;    ←枠の太さ
border-style:solid;   ←枠の種類solidは直線、点線ならdotted
height:50px;       ←ボックスの高さ
width:80px;">      ←ボックスの横幅
TEXT<br>TEXT<br>    ←ここに中身
</div>        ←ボックスはここで終わりです。
◎質問者からの返答

ありがとうございます。参考になります。


3 ● asagohan001
●26ポイント

スタイルシートによる崩れない2カラム・3カラムデザイン

http://desperadoes.biz/style/dan/index.php

サンプルもあります。いつもここを参考にしています。

◎質問者からの返答

ありがとうございます。参考になります。

関連質問


●質問をもっと探す●



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