人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSS(スタイルシート)で、横幅が可変なボックスを作る方法を教えてください。
テーブルなら、こんなイメージです。
<table border="1">
<tr><td>あいおえお</td></tr>
</table>
「あいおえお」の文字列が長くななれば、ボックス(表組み)の幅も自動的に広がります。
これと同じようなことをCSSで表現したいのです。

●質問者: OlimarJp
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS あい イメージ スタイルシート ボックス
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● stnet
●100ポイント ベストアンサー

「ボックス」という表現の意図が正確につかめていませんが

<span style="border:solid 1px #000;">あいうえお</span>

ないしは

<p style="border:solid 1px #000;display:inline;">あいうえお</p>

でご期待のものになるかと

http://q.hatena.ne.jp/1181895906


2 ● ice_cube
●10ポイント

方法は3種類あります。

1. styleでタグに直接書く方法

2. <HEAD>内で定義する方法

3. 外部ファイル(.css)に定義する方法


(1)styleでタグに直接書く方法

<p style="border:1px #CCCCCC solid">あいうえお

</p>

↑※大文字です


(2)<HEAD>内で定義する方法

<html>

<head>

<style type=text/css></p> <p> p {border:1px solid #CCCCCC;}</p> <p> </style>

</head>

<body>

あいうえお

</body>

</html>


(3)外部ファイル(.css)に定義する方法

<html>

<head>

<link rel=stylesheet type=text/css href=test.css>

</head>

<body>

あいうえお

</body>

</html>

------------

[test.css]

p {border:1px solid #CCCCCC;}



詳細は下記URLを参考にして頂けますでしょうか。

スタイルシートリファレンス > border

http://www.htmq.com/style/border.shtml]

◎質問者からの返答

横幅一杯にボックスが広がりますね。

残念ながらNGです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ