文字を内側にも色の付いた枠で囲む方法

質問

調べても調べても分からなくて、お手上げです。

文字を内側にも色の付いた枠で囲んで、枠の大きさも調整したいのですが、どうすればいいでしょうか。

<FONT STYLE=background:背景の色>コメント</FONT>
でやってみたのですが、これだと枠の大きさが調整できないですよね。

困っています。よろしくお願いします。

回答No.7

BLUEPIXY · ベストアンサー

返事が遅くなってごめんなさい。
＃６>こちらのサイトでいうと、記事検索や人気商品と書いてある部分が、作りたい部分です。
みてきました
.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#ECECEB;
font-family:Verdana;
}
というようになっていますので、
＃２でいうところのパディングで文字の位置を調整していることになります。
上記の部分を
<div style="…">コメント</div>
で書けば良いのですが、
すでに、そのようなスタイルの指定があるものを使う場合は、そのまま利用するのがよろしいかと思います。

<div class="sidetitle">コメント</div>

のように書けば、既に定義されている様式（スタイル）が適用されます。

お礼

やっと出来ましたー！本当にありがとうございました。

すごいですね～。自分もＨＴＭＬに詳しくなりたいです。自分のサイトを作っていると、次から次に分からない事が出てきて、ＨＴＭＬの知識があればとひしひし感じます。

ＨＴＭＬの本買って、あとBLUEPIXYさんのような親切丁寧に教えてくださる方が、集まっているサイトとか見つけて、勉強します。

感謝感謝です。ありがとうございました。

回答No.6

BLUEPIXY

#5補足>
やりたいことは、わかりましたけど、じゃあどうすればいいっていうことはその状況では言えませんね。
アドバイスとしては、試行錯誤するしかないって感じですかね～。
＃１様のようにテーブルを使うっていうのも方法だと思いますが・

＞サイドバーのタイトル部分と、同じものを作りたいんです。
ということであれば、多分、サイドバーのタイトルにＣＳＳなりなんなりで、センタリングをすでにやっていると思われるので、
そのサイトを表示した時の、ソースを見て、タイトル部分をどう表示しているのか調べた方が早いような気がします。（なにしろ既に表示できているんですから）
ソースを調べるのが難しいようなら、典型的なサイト（自分のサイトのアドレスを載せると削除されてしまうので、似ているサイト）のアドレスを教えてくれたら、ソースを見てみますけど・

補足

自分でソースを見ても何のことやら・・・。

ｓｅｅｓａブログで同じテンプレートを使ってあるサイトのＵＲＬを、見つけてきました。

http://kaoricafe.seesaa.net/　　　です。

こちらのサイトでいうと、記事検索や人気商品と書いてある部分が、作りたい部分です。

重ね重ねお手数かけます。

回答No.5

BLUEPIXY

#4>すみません。色々調整してみたんですが上手く出来ません・・・。
ブラウザのバージョンと、
現在のソースを見せて貰えませんか

補足

バージョンはInternet Explorerです。

説明不足でした。ｓｅｅｓａａブログで、両サイドバーのテンプレートの右側のサイドバーに、画像を縦に並べたくて、そのタイトルを作ろうとしています。

自由形式のコンテンツを追加して、他のタイトルと同じような見た目に作ろうとしているので、現在のソースというのは特にありません。

ライトグレー両サイドバーというテンプレートの、サイドバーのタイトル部分と、同じものを作りたいんです。

一応教えていただいたソースの数字の部分を、適当に変えてみたりしましたが、なにしろ意味が分かってないものですから、上手く調節できませんでた・・・。

すみません。お手数かけます。

回答No.4

BLUEPIXY

#3>FireFoxで、入れ子のなったＤＩＶの内側のＤＩＶでマージンを指定してもうまくいかない
についてですが、
色々と試した結果、
外側にテキスト（とか表示されるもの）がないとダメなようです。
<div style="background-color:LightCyan;width:300px;height:400px;font-weight:bold;">&nbsp;<div style="width:100px;height:20px;margin-left:100px;margin-top:170px;background-color:white;text-align:center">コメント</div></div>
のように、外側のＤＩＶに&nbsp;（スペース)を書くと、FireFoxでも縦のマージンがうまく効くようです。
そうすると
そのために、縦の位置が変わってしまうので、
margin-topの位置を若干上げています。
なにわともあれこれで、ＩＥとＦｉｒｅＦｏｘで同じような見栄えでセンタリングできます。

補足

すみません。色々調整してみたんですが上手く出来ません・・・。

文字一行分の横長の四角の中に、左からはほんのちょっと離して、上下の位置は中央に置きたいのですが。

回答No.3

BLUEPIXY

＞文字を太くして
文字の太さを調整するにはスタイルでは
font-weight:
を使います。
normal,bold,lighter,bolder
または、100～900の数字で指定します

＞それを真ん中に丁度よく置きたいのですが。
サンプル１：
<div style="background-color:LightCyan;width:300px;height:400px;font-weight:bold;"><div style="width:100px;height:20px;margin-left:100px;margin-top:190px;text-align:center">コメント</div></div>
サンプル２：<div id="outer" style="background-color:LightGreen;width:300px;height:400px;font-weight:bold;"><div id="my" style="width:100px;height:20px;margin-left:expression(outer.clientWidth/2-my.clientWidth/2);margin-top:expression(outer.clientHeight/2-my.clientHeight/2);text-align:center">コメント</div></div>
外側のボックスの中で、内側のボックスの位置を調整するには、
マージンを使います。
margin-left:
margin-top:
で左からの位置、上からの位置を調整できます。
外側のボックスのサイズと内側のボックスのサイズが分かっている時には、
センタリングするためには、
margin-left:
=外側の幅／２-内側の幅／２
で計算できます。
サンプルでいうと、
外側のボックスが３００、内側が１００なので、
３００／２－１００／２＝１００になります。
検算：左の余白（マージン）１００、内側の箱の幅１００、残り１００
なので、センタリングできることがわかると思います。

ＩＥの場合、実行時にそうした計算をさせることができます。
それが、サンプル２です。
そういう計算は、javascriptを使ってもできます。

※FireFoxでも試してみたのですが、入れ子のなったＤＩＶの内側のＤＩＶでマージンを指定してもうまくいかないようです（；＿；）

回答No.2

BLUEPIXY

<p><span style="background-color:MistyRose;padding:20px">コメント</span><p>
<div style="background-color:LightCyan;width:250px;height:400px">コメント</div>
って感じですかね。
paddingを使うと回りの空間の空きを指定できます。
divでは、縦・横サイズを指定できます。

お礼

divでサイズを調整したら出来ました。ありがとうございます！

今度は文字の問題が出てきたのですが・・・よろしければ答えて頂けますか？

文字を太くして、位置が枠の上にくっ付いた所にあるので、それを真ん中に丁度よく置きたいのですが。

回答No.1

noname#67354

好きな大きさのテーブルに文字を入れる感じではだめですか？

補足

内側に色の付いた枠になるのであれば、どういうやり方でも構いません。

テーブルというと表みたいな感じのでしょうか？

表じゃなくて１コだけの四角でいいのですが。

すみません。ＨＴＭＬのことはあまり分からない初心者なものですから・・・。