- ベストアンサー
CSSでの枠線付きの丸角ボックスの作り方
テーブルタグを使わずに CSS で枠線付きの丸角ボックスを作成するには、どのようにしたらいいでしょうか。 ・背景色 #FFFFFF ・前景色 #FFFFFF ・枠線色 #CCCCCC ・枠線の太さ 1px ・丸角の半径 5px ・ボックスの横幅は固定ではなくパーセントで指定したい。 よろしくお願いします。
- osakan_budi
- お礼率63% (19/30)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
現状では、Mozilla系のブラウザででしか通用しないけど、CSS一行書き足すだけできます。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050322A/ 将来、CSS3では角を丸くする設定が実装されるようです。 あとは4隅（角丸）の画像を用意して、それを表示させるか。 基本的な考え方はテーブルでやるのとほぼ同じです。 http://www.7korobi8oki.com/mt/archives/000075.html 画像を使わずに、JavascriptとCSSだけでやる方法もあるようですが、ソース見るだけでいやになります。 http://blog.3ot.net/design/css/20070111200407.html
関連するQ&A
- cssを使った枠線の表示について
css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか？ (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか？ (3)文字列と枠線との間隔を調整することは可能でしょうか？ 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 枠線をつけたい
IEの新しいバージョンでテーブルのborder colorが効かない？ようなのでCSSで指定しようとしているのですが、うまくいきません。。 別のCSSファイルに指定する方法で、 テーブルと、その中のセルの枠に、薄くて細いグレー（#CCCCCC)の細い枠線をつけたいのですが、どのように指定すればよいでしょうか。 なお、同ページに他のテーブルもあり、枠線をつけたいのは特定の1つのテーブル内のみです。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- cssを用いてボックスを作りたいです。
cssを用いてボックスを作りたいのですが、うまくいかず困っています。 http://www.tagindex.com/stylesheet/box/width_height.html ↑内容はここの中段にある使用例から参照しました。 operaではきちんと表示されるのですが、safariでは文字のみの表示となり青色の領域が表示されません。 htmlタグはこれです。 <div id="contents"> <div class="box">横幅50%×高さ100px</div> </div> cssは下記です。 #contents div.box { width: 50%; height: 100px; background-color: #85b9e9; } ※ちなみに#contentsのwidthは770pxあります。 現在、dreamweaverの「ブラウザでプレビュー」で確認してるのですが、この方法が間違っているのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- テーブルの枠線（外内両方）をすべて同じ太さ(1px)にしたい
はじめまして。 cssから初めて、いま初めてテーブルタグを触っているのですが・・・ おそらくとても初心者なことだと思うのですが、tableタグの枠線の太さを揃える方法がわかりません・・・ <table ～>で直接HTMLで指定すると重なり合う2つのborderのおかげで2px分のテーブルが表示されます。 これを1px分だけの細い（ここのサイトもそうだと思います。）テーブルを作りたいのですが、こちらはCSSでそれぞれのセルに対してこのセルはbottomだけ、このセルはleftだけ、というように指定していかなければいけないのでしょうか？ テーブル自体ほとんど触ったことはないのですが、なぜか余計にややこしいことをしているような気がして質問させていただきました。 どうかよろしくお願致します。
- ベストアンサー
- HTML
- CSSによるスクロールバーの色の反映がされない
CSSによるスクロールバーの色の反映がされないのですが、原因がよく分かりません。 環境 windows2000SP4 IE6.0.2 ソース html,body{ background-color:#FFFFFF; font-size:14px; margin:0px; scrollbar-3dlight-color : #FFFFFF; scrollbar-arrow-color : #336666; scrollbar-base-color : #FFFFFF; scrollbar-darkshadow-color : #FFFFFF; scrollbar-highlight-color : #CCCCCC; scrollbar-shadow-color : #CCCCCC; scrollbar-track-color : #FFFFFF; } 外部CSSを読み込む感じなのですが、他のCSSは反映されているので、外部CSSへのリンクが違うということはないです。 また、おそらくスクロールバーの色を変更しているサイトのスクロールバーを見てもデフォルトの灰色です。 また、IEのインターネットオプションのユーザー設定には何もチェックはいれていません。 何かあやしい点があれば、教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで背景全体の設定方法とサイト本体の枠線がわかりません。
はじめまして。 現在CSS勉強中でサイトを作成しています。 なんとか枠組み自体はおぼろげながら作ることができたのですが、背景の色や画像の設定方法や、サイトそのもの？の枠線や背景画像の設定方法がわからなく困っております。 http://www.rigna.com/ たとえばこちらのサイトですと、大理石？のような模様の背景に茶色がかったグレーがサイトそのものの背景色として指定されています。 今回私はサイトそのものに左右と下部分に枠線を設定したいのですが、やり方がわかりません・・・ どうか教えていただけないでしょうか？
- ベストアンサー
- HTML
- CSSを利用して、丸角の背景を作る方法
タイトルのままなのですが、CSSを使用してボックスの背景を丸角の画像にしたいのですが、どうやればいいのかよくわかりません どなたかわかる方いらっしゃいましたら教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- Tableの枠線（内・外）色を変更
Tableの枠線（内・外）色を変更する場合、 CSSだと、 .Table { border-color:#FFFFFF; } .Table TD{ border-color:#FFFFFF;} .Table TR{ border-color:#FFFFFF;} で変更できますが、 これをJacasvriptで対応するにはどのようにしたらいいのでしょうか？ FireFoxもIEも対応したいと思っています。 BorderColor="#FFFFFF"だけだと、 FireFoxで枠線の外側しか変更できません。 たぶんCSSと組み合わせる必要があると思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSS3で三角形の描画にシャドウをつけると
CSS3で三角形を作って、シャドウをつけると 三角の下に四角い影がついてしまうのですが、これはどうにもならないのでしょうか？ "▲"の下に"□"こんな感じで影が付きます。 ソースは以下のとおりです。 width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; -moz-box-shadow:0 0 3px #cccccc; -webkit-box-shadow:0 0 3px #cccccc; box-shadow:0 0 3px #cccccc; アドバイスお願いします。
- ベストアンサー
- HTML
- CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい
CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる１つのボックス(Aとする)の中に２つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。（参考イメージ上参照） この隙間を無くすにはどのようにすれば良いのでしょうか？ この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }
- ベストアンサー
- HTML
お礼
> あとは4隅（角丸）の画像を用意して、それを表示させるか。 この方法でいけました。 素晴らしいです。 どうもありがとうございました。