- ベストアンサー
文字をボックスで囲うことができるタグは？
dolittle0の回答
- dolittle0
- ベストアンサー率26% (11/42)
<p> タグの場合は、borderプロパティを設定すれば囲うことができます。 余白はpaddingプロパティで調整できます。
関連するQ&A
- pタグ 改行しない 文字位置指定
pタグを使うけど改行しない、 なおかつ文字は中央に表示する とするにはどうすればいいでしょうか？ <style type="text/css"> p.mi{ text-align:center; display:inline; } </style> </head> <body> <p class="mi">テキスト</p>あああ </body> これだと、改行はされませんが、中央に表示されません。
- ベストアンサー
- HTML
- htmlタグについて
htmlタグについて探しています。 同じページにおいてリンクをクリックすると、ページ自体は変わらないのですが、下に少し下がり、新たな文字が出てくる、といったタグは何ですか？ 分かりにくくてすみません。 場所が飛ぶのではなく、今まで出ていなかった文字などが新たに出てくるのです。 ページ自体は変わりません。 間違っているかもしれませんが、そのようなタグが使われていたページのソースを見ると、 <P onClick="document.all.g.style.display =document.all.g.style.display=='none' ? '':'none'"> のようなカンジのものが書いてありました。
- 締切済み
- その他（インターネット・Webサービス）
- olタグ・liタグで一部のリストを横並びにした
olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。
- ベストアンサー
- CSS
- display blockできません
初めまして、現在左側の5段メニューボタンを作成中なのですが、 テキストで書いたリンクの文字が出てきたり、 display blockできなかったり、 IEでは5段積みでも、firefoxではつぶれた5段積みで 表示されてしまいます。 私のCSSの書き方がおかしいのでしょうか？ どなたかご指導をお願い致します。宜しくお願い致します。 html <div id="left"> <div class="left_style6"> <p><a href="##.htm">aaa</a></p> </div> <div class="left_style7"> <p><a href="##.htm">bbb</a></p> </div> <div class="left_style8"> <p><a href="##.htm">ccc</a></p> </div> <div class="left_style9"> <p><a href="##.htm">ddd</a></p> </div> <div class="left_style10"> <p><a href="##.htm">eee</a></p> </div></div> css .left_style6 { background: url(img/aaa.gif) no-repeat; width : 170px; height : 30px;} .left_style6 p a { margin: 1px 0 0 5px ; display : block; } .left_style7 { background: url(img/bbb.gif) no-repeat; width : 170px; height : 30px;} .left_style7 p a { margin: 1px 0 0 5px ; display : block; } .left_style8 { background: url(img/ccc.gif) no-repeat; width : 170px; height : 30px;} .left_style8 p a { margin: 1px 0 0 5px ; display : block; } .left_style9 { background: url(img/ddd.gif) no-repeat; width : 170px; height : 30px;} .left_style9 p a { margin: 1px 0 0 5px ; display : block; } .left_style10 { background: url(img/eee.gif) no-repeat; width : 170px; height : 30px;} .left_style10 p a { margin: 1px 0 0 5px ; display : block; }
- ベストアンサー
- CSS
- CSSセクレター 子孫のみに適用する方法
子孫の要素のみに、CSSを適用する方法を教えてください。 下記は適用方法が分からないため、<a>に適用させていますが、 理想としては<a>の中の<div>要素に適用させたいのです。 ※（最後のbox1margin:rgiht:0px;になりそれ意外のブロックが全てmargin:rgiht:10px;になる） よろしくお願いします！ <!--HTMLの記述--> <div class="box-wrapper"> <a href=""><div class="box1">ブロック１</div></a> <a href=""><div class="box1">ブロック２</div></a> <a href=""><div class="box1">ブロック３</div></a> </div> /*CSS側の記述*/ .box1{ width:100px; height:20px; background:#C6F; text-align:center; display:inline-block; } .box-wrapper > a{ margin:0 10px 0 0; } .box-wrapper > a:last-child{ margin:0; }
- ベストアンサー
- その他（インターネット・Webサービス）
- ビルダーのCSS「タグの候補」について
CSSスタイルの設定ダイアログボックス「タグの候補」のリンク項目に（A）と（A:LINK）とありますが、 これはどのような違いがあるのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- テキストボックスを横並びで表示
テキストボックスを２つ作り横並びに表示したいのですがどうしても縦ならびに表示されてしまいます。 display:inlineをCSSで入れても変化がありません。 <input style="display: inline;" type="text" name="post_1" value="<?=$_SESSION["post_1"]?>">-<input style="display: inline;" type="text" name="post_2" value="?=$_SESSION["post_2"]?>"> 他に関係する要素はあるのでしょうか？
- ベストアンサー
- HTML
- inlineでテキストの入ったボックスを横に並べる
いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1～6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします！！ <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>
- ベストアンサー
- HTML
- リンク文字変化のタグについて
リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。 色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。 ↓これは[head]～[/head]の間に注入するタグのようなのですが <STYLE type="text/css"> <!-- A:HOVER{ position : relative; top:3px; left:3px;} A{text-decoration : none; } --> </STYLE> このように[head]～[/head]の間に挿入するタイプのものではなく 個別で指定するにはどのように記述すればいいでしょうか？ ↓例えばコレは[head]～[/head]に入れて下線を消すタグですが <style type="text/css"> A{text-decoration:none;} </style> ↓こっちは個別に消す下線を消すタグです <a href="ページのアドレス" style="text-decoration:none"> リンクする文字</a> このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- タグに関する質問（文字に影をつける）
リンク付きの文字に影をつけたのですが、文字の抜けている部分が押せなくなってしまいました。 えっと、かなりわかりづらいですよね； 例えば「十」という文字を □□■□□ □□■□□ ■■■■■ □□■□□ □□■□□ と現すと、通常なら□の部分も■の部分も押せますよね？ でも影をつけると□の部分は押せなくなってしまうんです； 解決策はあるでしょうか？ タグは <P style="WIDTH:100%;FILTER:Shadow(color=#335588,direction=120)"> <A href="a.htm">りんく</A> </P> といった感じです。 それと、同じ質問に入れるか迷ったのですがテーブルの外枠だけを半透明にする方法もあったらお願いします；
- ベストアンサー
- HTML