• ベストアンサー

スタイルを

.title { border-color:navy; border-width:5px } として本文を <span class=title> ホビー </span> としたのですが輪郭ができません どうしたら輪郭を作れるのでしょうか?

  • keyguy
  • お礼率68% (895/1314)
  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

border-styleも指定しておきましょう。 border-style:solid; という風に。

keyguy
質問者

お礼

ありがとうございます 一気に解決しました

その他の回答 (1)

  • fukku22
  • ベストアンサー率57% (15/26)
回答No.2

border-style も指定しないと駄目だったと思います。 border-style: solid; 一度に全部指定する方法もあります。 border: 5px navy solid;

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 外部スタイルシートへの記入方法について

    外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • ホームページビルダーでスタイルシートを使ったのですが？

    今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • 表の作成をスタイルシートで

    皆さんはHTMLで表を作成する際、どのように作成していますか？ 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。 　　　■□□ 　　　■□□ 　　　■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0"> 　<tr> 　　<td class="title">6月7日</td> 　　<td>text</td> <td>text</td> <td>text</td> 　</tr> 　<tr> 　　<td class="title">6月8日</td> 　　<td>text</td> <td>text</td> <td>text</td> 　</tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01　{FONT-SIZE: 12px; border-collapse : collapse ; 　　　　border-width : 1px 0 0 1px ; border-style : solid ; 　　　　border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF; 　　　　} table.tb01 td　{border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ; 　　　　　　　　line-height:120%; border-color : #CDCDCD ; } td.title　{background-color:#ECECEC; 　　　　　} ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。

    • ベストアンサー
    • HTML
  • ネスケとＩＥを同じ表示にしたい

    文字をborderで囲ったものを二列に６つずつ並べて、サイトのメニューとして 使っています。 HTMLを以下のように記し、↓ <div> <span class="menu"><a href="#">AAA</a></span> <span class="menu"><a href="#">BBB</a></span> …… </div> <div> <span class="menu"><a href="#">CCC</a></span> <span class="menu"><a href="#">DDD</a></span> …… </div> これをcssで以下のようにしているのですが、ネスケで上手く表示されません 。 .menu { font-size: 13px; text-align: center; margin: 2px; border:1px solid gray; width: 97px; height: 15px; color: #808080; } どうも、marginとwidth、heightが反映されていないようなのですが、これを ネスケでも反映させるにはどうしたらいいでしょうか。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • このプログラムにある問題点を教えて下さい

    プログラムを自分で作ってみました。 形はイメージ通りですが自信がありません。 何か問題点があるように思えてなりません。 これで正しいのでしょうか？ <style type="text/css"> #aaa{ width: 850px; background-color: #eee; } .CCC { width: 750px; height: 133px; margin-left: 35px; margin-top: 15px; } .CCC ul{ margin: 0; padding: 0; list-style: none; } .CCC li.C0 { float: left; } .CCC li.C0 img { padding: 5px; border: 1px solid #ccc; } .CCC li.C1 { width: 200px; padding: 3px 20px 3px 12px; margin-left: 25px; font-size: 16px; font-weight: bold; font-family: "MS UI Gothic"; color: #F05; border-bottom: 1px solid #F05; float: left; } .CCC li.C2 { width: 300px; font-size: 14px; float: left; line-height:150%; margin-left: 50px; margin-top: 15px; } .CCC li.C3 { width: 160px; float: right; } .CCC li.C3 .C4 img{ border: 0; border-style: none; margin-bottom: 25px; } .cf { clear:both; font-size: 15px; color: #ccc; text-align: center; } </style> <div id="aaa"> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> </div>

    • ベストアンサー
    • HTML
  • spanタグ　無視される

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <style type="text/css"> span.test{ padding: 6px 0px; background-color: gainsboro; text-align:center; border: 1px gray solid; margin-top:10px; margin-bottom:8px; color: gray; width: 100px; } </style> </head> <body> <span class="test"> <a href="#A"> A</a> </span> <br> <span class="test"> <a href="#B"> B</a> </span> </body> </html> ------------------------- というソースで spanタグで padding: margin-top:10px; margin-bottom:8px; width: が無視されてしまうのですが なぜでしょう？ 更に画像のように文字が重なってしまいます。 padding: margin-top:10px; margin-bottom:8px; width: これらを適用させるにはどうすればいいでしょうか？ AとBは隣同士に表示したいため、divではなく、spanを使用しました。

    • ベストアンサー
    • HTML
  • Firefoxだとズレてしまう

    <h1 class="text">タイトル</h1><p class="navi"><a href="#">↑上↑</a></p> h1.text { width:69%; float:left; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 0px 1px 5px; border-style:solid; padding:0px 0px 0px 4px;} .navi { width:29%; float:left; text-align:right; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 1px 1px 0px; border-style:solid; padding:0px 2px 0px 0px;} このようにしたいのですけど、firefoxで見ると表示がズレてしまうので困っています（Explorerでも、ちょっと思ったよりも短くなってしまうけれども、一応表示される）。何かよい方法はないでしょうか。

    • ベストアンサー
    • HTML
  • スタイルシートで罫線をもっと細くしたい

    IE6.0です、 テーブルの罫線をもっと細くしたいのですが、 border-widthは1pxが一番細いのでしょうか？ この教えてgooくらい細くしたいのですが 他にやり方があれば教えてください。 TABLE { border-color: #8b4513; padding: 1px 1px 1px 1px; margin: 1px 1px 1px 1px; border-style: solid; border-width: 1px 1px 1px 1px; } 宜しくお願いします、

    • ベストアンサー
    • HTML
  • スタイルシートのheightについて

    お詳しい方どうか教えてください。 スタイルシートを使用してある文字列を、罫線で囲みたいと思っております。 以下のタグを作成したのですが、height=280が効いていないようなのです。 使用ブラウザは古いのですがNN4.51です。"height"はNN4.51では対応されていないのでしょうか？ 作成タグは以下です。 <SPAN STYLE="width: 650px; height: 280px; border: solid 1px black; background: white; color: white;">・・・・<SPAN> どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • マウスのロールオーバーについて

    ブログのサイトタイトルの下にメニューバーをつけました。 メニューバーにマウスが乗った時、色を変えたいのですがCSSを書いたどの箇所に、 a:hover {   color:#999; text-decoration:underline;   } などのタグを入れたらいいのが分かりません。 どなたかお教えお願いします。 ／＊HTML＊／ <div id="global"> <button class="button"> <span> </span> <span> </span> <span> </span> </button> <nav class="items"> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> <a href="#" class="item">サンプル</a> </nav> </div> <div id="overlday"> </div> ／＊CSS ＊／ #global { display: block; width: 100%; box-sizing: border-box; margin-top: 0px; background-color: #000000; } #global .button, #overlday { display: none; } #global .items { display: flex; justify-content: center; } #global .items > .item { display: block; color: #fff; text-decoration: none; box-sizing: border-box; padding: 30px 30px; border-right: 1px solid #fff; border-left: 1px solid #fff; } #global .items > .item:last-of-type { border-right: 1px solid #fff; } @media only screen and (max-width: 768px) { #overlday { display: none; position: fixed; z-index: 9; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .65); } #overlday.active { display: block; } #global { position: fixed; z-index: 10; left: 0; top: 0; text-align: right; margin-top: 0; background-color: transparent; } #global .button, #global .button > span { display: inline-block; transition: all .4s; box-sizing: border-box; } #global .button { position: relative; width: 40px; height: 30px; border: none; cursor: pointer; background: transparent; margin: 10px; } #global .button > span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #ffffff; border-radius: 4px; } #global .button > span:nth-of-type(1) { top: 0; } #global .button > span:nth-of-type(2) { top: 13px; } #global .button > span:nth-of-type(3) { bottom: 0; } #global.active .button > span { background-color: #fff; } #global.active .button > span:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); } #global.active .button > span:nth-of-type(2) { opacity: 0; } #global.active .button span:nth-of-type(3) { transform: translateY(-13px) rotate(45deg); } #global .items { display: none; flex-wrap: wrap; text-align: left; background-color: #9c9c9c; } #global.active .items { display: flex; } #global .items > .item { width: 100%; padding: 10px; border-right: none; border-bottom: 1px solid #fff; } #global .items > .item:last-of-type { border-bottom: none; } }

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する