- 締切済み
影のついたページの作り方
http://www.cosme.net/ のページのように、ページ全体に影がついてるのはどうやって作るのでしょうか。 あと枠（画像？）の中に文字が入ってるのはどうやって作るんでしょう。（たとえば右の「注目口コミランキング」です） 使っているソフトはドリームウィーバーMXです。 よろしくお願いします。
- yoshino0724
- お礼率40% (86/212)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
補足です（質問者様がどの程度CSS/HTMLに精通してらっしゃるかわからないので）。 > あと枠（画像？）の中に文字が入ってるのはどうやって作るんでしょう。（たとえば右の「注目口コミランキング」です） 参照先の「注目口コミランキング」の部分は結構な入れ子構造なので、もしあまり慣れていないのであれば、いきなりああいう構造のものをお手本にするのはお奨めしません。シンプルな「枠」をつけるだけなら、画像を使わなくてもborderのスタイルを定義すればできますし。角丸枠で囲むレイアウトにチャレンジする場合も、最初はせいぜい上角丸ブロック（<img>で配置or背景画像no-repeat）＋中コンテンツブロック（背景画像repeat-y）＋下角丸ブロック（<img>で配置or背景画像no-repeat）程度の構成に留めておく方が宜しいかと思います。
- abril
- ベストアンサー率69% (388/560)
> ページ全体に影がついてるのはどうやって作るのでしょうか。 （上記の場合は）"top_main_bg.gif"という左右にドロップシャドウを付けた画像を<body>直下の<div id="top"></div>の背景画像として垂直方向にレンダリングさせているだけです。 > あと枠（画像？）の中に文字が入ってるのはどうやって作るんでしょう。（たとえば右の「注目口コミランキング」です） （上記の場合は）大枠は、上角丸画像を<img>としてマークアップ、下角丸画像を背景画像としてそのブロックのスタイルとして定義。<div>等を入れ子にすることで細部のスタイルに対応させ、テキストを配置。 自分のやりたいスタイルを実現しているサイトを見つけたら、とりあえず丸コピーでもいいからHTMLとCSSを再構成して、中味を検証して見ることです。CSSはHTMLファイル内からの参照先を見ればダウンロードできます。まずHTMLのマークアップを見て、そのマークアップに対して適用されているスタイルをCSS中から見つけだし、その定義を読んで「何をやっているか」を理解する。そしてそれをヒントに自分のニーズを満たす用にカスタマイズする。このステップの繰り返しで、自分のスキルとして身に付けて下さい。疑問に思ったらまずソースを見る、この習慣をつける事が必須です。
