以下の条件を満たしたボックスをスタイルシートで作りたいのです。
●ほぼ全てのブラウザに対応させたい。
・化石のようなブラウザは結構ですが、
IE、FireFox、ネスケ、Operaには
崩れる事なく表示できるようにしたいです。
●tableタグを使用したくない。
・tableを使用せずにこのボックスを実現したいのです。
●幅や高さは固定ではなく%で指定したい。
・ブラウザのウィンドウサイズによって変化させたいのです。
●角を丸く、その外側は透過させたい。
・(bodyの)バックグラウンドカラーが凝っていて、%で指定したい為、
丸くさせた角の外側を透過させる必要があります。
参照1はかなり近いイメージなのですが、
角丸の外側が透過していません。(bodyのカラーと同じ色にしている)
ちなみにこれを透過させると上下のバックグラウンドカラーや
左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。
(参照1)http://www.sovavsiti.cz/css/corners.html
●左から右へとグラデーションをかけたい。
・希望しているボックスがグラデーションの為、
参照2の黄色の縦線のように太くしたボーダーではできない。
(参照2)http://phrogz.net/CSS/roundcorner.html
●影を付けたい。
・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。
●画像はcssで表示させたい。
・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、
cssでバックグラウンドカラーなどで表示させたいと思っています。
※これは変更・妥協可。
●ボックスの中には文字などが入ります。
調べても考えても糸口が見つかりません。
もしご存知でしたら是非教えて下さい。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
現在検討中のCSS3ではブロックの角を丸くする、グラデーションをかける、テキストに影を付けるなどが検討されています。
(ブロックへの影は・・なかったかも。)しばらく待てば多くのブラウザで苦もなく実現できるようになるかもしれません。CSSはまだまだ過渡期なんです。
現在検討中ということは逆に現時点ではあまりよい方法はないということです。
divブロックを幾重にも重ねるとか、そうしたやり方で実現できるかもしれませんが、そうして装飾のためだけにタグを重ねる手法は本質的にテーブルをレイアウトに使うのと変わらない気がします。ってことで無理せずテーブルを使っちゃうか、意味がわかっていてテーブルを使うのを嫌っているのならできないものとして諦めるのがよいかと。
参考URL:http://www.fromdfj.net/html/divsyndrome.html
確かにおっしゃるとおりですね。
今まではそんな事無かったのに、
“角を丸くしたい”と思う心が
病を発症させてしまったようです。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
tableのheight指定が効かない
-
一つのテーブル内の文字色だけ...
-
インラインフレームについて
-
ホームページのテーブルに斜線...
-
テーブルの大きさについて
-
【CSS】左右可変、中央固定の3...
-
【CSS】縦横スクロールテーブル...
-
テーブルでスクロールを同期したい
-
HTMLでテーブルを横に並べる方法
-
テーブル内に画像を表示したい。
-
縦に画像を並べるときのCSS
-
テーブルの入れ子でテーブルが...
-
DWで、デザインビューに表示さ...
-
<th>タグを使っても太字にしな...
-
tableにul,または,olを入れられ...
-
HTMLのテーブルで桁をそろ...
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
HTMLでテーブルを横に並べる方法
-
テーブル内に画像を表示したい。
-
tableのheight指定が効かない
-
【CSS】縦横スクロールテーブル...
-
ウィンドウのサイズを変えても...
-
CSSで文字を一番下の中央に表示...
-
更新するとずれる?
-
ヘッダー固定のスクロールが可...
-
テーブルの背景を透過する方法
-
箇条書きリストのすぐ横に画像...
-
プルダウンの表示位置
-
テーブル内でdlタグ使った際の...
-
画像と、セルのつなぎ目に白い...
-
テーブルのスクロール(HTML)
-
Dreamweaverでテーブルの列幅を...
-
【CSS】左右可変、中央固定の3...
-
スタイルシートでテーブルをセ...
おすすめ情報