以下の条件を満たしたボックスをスタイルシートで作りたいのです。
●ほぼ全てのブラウザに対応させたい。
・化石のようなブラウザは結構ですが、
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
テーブルの横に画像を
-
CSSで文字を一番下の中央に表示...
-
一つのテーブル内の文字色だけ...
-
スタイルシートで、画像の横に...
-
テーブルでスクロールを同期したい
-
複数のテーブルを無条件に中央...
-
<SPAN>で文字を右揃えにしたい...
-
table内にiframeでテーブルが崩...
-
tableのheight指定が効かない
-
HTMLでテーブルを横に並べる方法
-
ウィンドウのサイズを変えても...
-
テーブルを中央に配置
-
ヘッダー固定のスクロールが可...
-
HPの画面がすごくデカイので困...
-
HPに縦線を!!
-
インラインフレームの隣に画像...
-
html でのテキスト結合について
-
テーブルとテーブルの間隔について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
-
ウィンドウのサイズを変えても...
-
ヘッダー固定のスクロールが可...
-
HTMLでテーブルを横に並べる方法
-
テーブルの横に画像を
-
テーブル内に画像を表示したい。
-
tableのheight指定が効かない
-
【CSS】縦横スクロールテーブル...
-
箇条書きリストのすぐ横に画像...
-
CSSで文字を一番下の中央に表示...
-
テーブルを中央に配置
-
Dreamweaverでテーブルの列幅を...
-
2つのテーブルを左右に表示した...
-
<SPAN>で文字を右揃えにしたい...
-
ホームページのテーブルに斜線...
-
プルダウンの表示位置
-
更新するとずれる?
-
複数のテーブルを無条件に中央...
-
テーブルでスクロールを同期したい
おすすめ情報