- ベストアンサー
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)各文字列や値の前後にスペースを入れる理由を教えてください。
- ka-kichi
- お礼率89% (195/218)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
説明するの面倒なので…。 (1) <span class="waku">文字列</span> (2) <div class="waku" style="width:50%">文字列</div> (3) <span class="waku" style="padding:6px">文字列</div> (4) 見やすくしているだけです。 要素と要素の間には空白類文字を好きなように入れても問題ありません。 HTML文法上は問題ありませんが、全ての要素は小文字で記述することが勧められています。 そのCSSの記述であれば、 .waku{border:5px #ffffff solid} とした方がよいかもしれません。 属性中の値は引用符で括りましょう。<class="waku"> 詳しいことを言い過ぎてもあれなので、このくらいで…。
その他の回答 (2)
- quads
- ベストアンサー率35% (90/257)
＞(1)はdivの方が思ったものに近くなりました。 ぅ～ん、ブロック要素で指定すると文字列の長さに関係なく囲われると思うんだけど…。 何か他の指定加えたのかな？ ＞追加質問で申し訳ありませんが、スタイルシートは小文字が推奨されているとのことですが、HTMLも同様でしょうか？ 要素などは小文字で定義されています。その上でHTMLは大文字小文字が大抵区別されないので大文字でも問題ないということです。 ただ、推奨ということで小文字の方がよいでしょう。 ＞また、属性中の値を引用符で括らなくとも同じ結果になるように思えるのですが、いかがでしょうか？ 難しい話をしてもあれなので…。こちらも推奨という形で認識しておいてください。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#quote-attribute-value 他にも分からないことがあったらどうぞ。
お礼
再度ご回答ありがとうございます。 divをspanに変えてみたところ、うまくいきました。 前回は何が違ったのか忘れました。(^^ゞ が、複数行の文字列を、 Σ(コを左右反転した感じ) ＝＝＝＝ ＝＝＝＝ ＝＝＝コ こんな感じで囲み線が表示されました。（わかりにくいですかね？） もっと勉強してみます。 ありがとうございました。
- tsubaki39
- ベストアンサー率61% (77/125)
cssに関しては、ここで一つ一つ聞かれるよりも ご自身で1冊本を買われると分かりやすいと思いますよ。 リファレンスとしては「スタイルシートサンプルブック」 http://www.amazon.co.jp/exec/obidos/ASIN/488337405X/250-8362801-6454655 tipsとしては「スタイルシートスタイルブック」をオススメします。 http://www.amazon.co.jp/exec/obidos/ASIN/4798105856/ref=pd_sim_dp_4/250-8362801-6454655 web上なら参考URLで。 ちなみに(2)(3)は可能です。 (2)はその中に「width:500px;」などと記述すればOK。 (3)は「padding:★★;」みたいに設定しますが、これは4方向全て同じにすることもできますし、 上下左右それぞれ設定することもできます。 (4)は、そのように記述するソフトもあるようです。 手打ちでやっている人は…見やすいのかも？
お礼
ありがとうございました。 お勧めの本を書店で探して検討してみます。
関連するQ&A
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- 枠線が表示されません
初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか？ 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線（太さ・色・スタイル）solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色：青 */ .white{ background-color: #FFFFFF; } /* セル色：白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }
- 締切済み
- CSS
- 文字と枠線がくっつきすぎている
たとえば、 ←枠と文字の距離を離したいのですが、どうすればいいでしょうか。 普通のテーブルでは、cellpaddingで指定しますよね。下のような場合、どうすればいいでしょうか。 <BODY bgColor=#ffffff> <DIV class=block3 style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 10px solid; WIDTH: 400px; BORDER-BOTTOM: 0px solid; HEIGHT: 30px">←↑ くっついてるのを離したい<BR>くっついてるのを離したい</DIV> </BODY> </html> よろしくお願いします。
- ベストアンサー
- HTML
- ホームページ 点線の入った表の書き方（CSSを使って）
表を作っています。 何度もチャレンジしながらやりましたが・・ギブアップ・・・分かりません。。わかる方がいらっしゃったら教えてください。 http://hw001.gate01.com/with-flower/tesuto/article04.html (1)1つの枠の中（物件）で区切りに点線を入れたいのですが、どのようにしたらいいでしょうか？ (2)上下に重なった枠線を片方だけにできないでしょうか？ または改行を入れようと思ったのですが、間隔が広すぎておかしくなります。改行幅の指定はできるのでしょうか？ ↓CSS .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc;}
- ベストアンサー
- Windows XP
- cssの書き方について
始めましてpcckitと申します。cssには全くの初心者ですがよろしくお願いします。メモ帳でcssで構成したホームページを作成しようと考えております。そこでまずは下記のように記述をしました。 body {background-color: #87ceed; text-align: center} div#border {border-style: solid; border-width: 2px; padding: 20px; background-color: #ffffff; width: 700px} 上記のようにしたところ、画面に枠が出来て、その枠の中に740×458 の画像を入れて確認をしたところ、枠からはみ出してしまいました。 やはりこれは、width: 700px}にしているからでしょうか？ 上記の状態でＩＥでは正常に表示されるのですがFire foxで見ると やはり画像が枠からはみ出していたり、枠そのものが左に寄ったりしています。 また、枠の中に文字や画像を入れて中央ぞろえや、両端ぞろえなどしたいのですが、うまく行きません。ご指導の程よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- CSS 左右違う大きさのボックスでheightを合わせたい
外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス（で良いのでしょうか？）を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか？ また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか？ どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>
- ベストアンサー
- HTML
- CSSでいろいろな線種をだしたい
お世話になります。HTMLのファイルと、外部CSSを使ってつくろうとしています。 （初心者です） 外部CSSファイルに （箱のかたち） .table { float: left; border: 10px blue; border-style: double; width: 200px; height:100px; } というふうにかきました。 Solidの線種（ふつうのやつ？）だとちゃんと表示されるのですが、 doubleとかほかの線種に「border-style: double;」← こちらをいろいろと変更してみてもSolid表示のままです。。 なにがまちがっているのかわかりません。。 おねがいいたします。
- ベストアンサー
- HTML
- [CSS]枠線がうまく出来ない。
商品名と価格のリストを掲載しようとしています。 1列目に商品名、2列目に商品名と価格が引っ付かないように空白用枠(幅15px)、3列目に価格を掲載しています。 当初は枠に線を引こうとしたのですが、項目名なども枠内に入ってしまうため、カッコ悪かったです。 なので、TDにCSSで枠線を引こうと考えました で、色々とやってみたのですが、以下の問題が… (ソースを張ろうと思ったのですが、文字数制限に引っかかっちゃいました。) 1.なぜか上だけ濃い。後は薄い? 2.行の間が開かない(枠線が引っ付いてしまう) なんとも説明が下手ですみませんが、こんな状況です。 綺麗にするにはどうしたらいいでしょう?
- ベストアンサー
- CSS
- CSSでtext-align
不思議な現象が起きてます。 2行7列の表を作って、 2行目の3～5列と7列目を右寄せにしたいがために、 <td class="right"> で外部CSSに .right{ text-align:right; } と記述したところ適用されませんでした。 しかしインラインで <td style="text-align:right;"> と書くと右寄せになるんです・・・ 原因がわからずこまっています。 ちなみに <td align="right"> でも表示されませんでした・・・ table全体には以下のCSSが外部で適用されてます、 div.gray_box { background-color: #FFFFFF; border-color: #CCCCCC; border-style: solid; border-width: 1px; padding: 1px 0 1px 0; } table.wide_table_border { border: 1px solid #FFFFFF; border-collapse:collapse; margin: 0px auto; padding: 5px; width: 100%; } あまり関係ないとは思うのですが一応載せておきます。 目的としては、必ず外部CSSに記述することです。
- ベストアンサー
- HTML
- floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
お礼
ありがとうございました。 (1)はdivの方が思ったものに近くなりました。 追加質問で申し訳ありませんが、スタイルシートは小文字が推奨されているとのことですが、HTMLも同様でしょうか？ また、属性中の値を引用符で括らなくとも同じ結果になるように思えるのですが、いかがでしょうか？