重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

可変長要素を中は左寄せのまま中央寄せ

解決済

  • 質問者：hidhidssisz
  • 質問日時：
  • 回答数：2件

widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。

次のようにテーブルを使えばできたのですが、
テーブルを使わずにやることはできますか？

　　　　<style>
　　　　　　　　.outer{
　　　　　　　　　　　　width:500px;
　　　　　　　　　　　　margin:0 auto;
　　　　　　　　　　　　background:#eee;
　　　　　　　　　　　　text-align:center;
　　　　　　　　}
　　　　　　　　.inner{
　　　　　　　　　　　　background:yellow;
　　　　　　　　　　　　margin:0 auto;
　　　　　　　　　　　　text-align:left;
　　　　　　　　}
　　　　</style>
　　　　<div class='outer'>
　　　　　　　　<table class='inner'>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<td>可変長の文字列・・・・・・・・・・</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<td style='padding:20px 0;'>aaa</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<td>bbbbbbbbbbbbbb</td>
　　　　　　　　　　　　</tr>
　　　　　　　　</table>
　　　　</div>


display:inline-blockを使っても中央寄せにはなりますが、
「行間」の設定が困難でこれではだめでした。
（１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる）

　　　　<div class='outer' >
　　　　　　　　<span class='inner' style='display:inline-block'>
　　　　　　　　　　　　<span>可変長の文字列・・・・・・・・・・・・・・</span><br>
　　　　　　　　　　　　<span>「行間」の設定はできないのでだめ</span>
　　　　　　　　</span>
　　　　</div>


宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

それはできないのです。

（無理やりは可能でしょうが)
理由は
・並列した要素は互いに他に属していないために、他の要素の子孫足りえない。
　あなたのあげられたサンプルでいうと、三行目の新たな要素の巾が３つの要素の巾を決定したとしても、他の要素がそれを参照できることはない。
　※無理やりなら可能です。
　display:table,display:table-rowを指定してもダメです。
　　三番目の要素がもっとも長いと分かっていれば、それを元に親要素の巾を決定し、他の要素はその親要素の子孫としてabsoluteないしrelativeで指定する。

　理由はお気づきのようにtableは、その描画方法が特殊だからです。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシートを利用する最大の目的は「構造とプレゼンテーションの分離(

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。【デザインのためにHTMLは書かないということ】
　divのclass名は【文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )】だということ。

＞「行間」の設定が困難でこれではだめでした。
　行間と行高さを区別しましょう。
　HTMLでは段落が変わるところは必ず<p></p>です。Mbr>は通常はまったく使わないはずです。brは「forced line break」強制改行ですから、「一つの段落でありながら改行する」、HTML5だと『br 要素は、詩や住所のように、改行自体がコンテンツの一部をなすような改行に対してのみに使わなければなりません。br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.』
　段落間のマージンが行間になります。
　<br>で強制改行されたときは、行高さ-文字高さがテキスト間にあきます。

★class名は文書構造を示すものに、inerとかouterなんて使わない。
★必ず基点セレクタを書くようにしましょう。
　.innerはCSS1の時代の名残で、一応解釈はしてくれるけど。div.innerとか*.innerとか・・
　http://momdo.s35.xrea.com/web-html-test/spec/CSS …
　でも基本は、タイプセレクタですよ。

<body>
　<div class="header">
　　<h1>サンプル</h1>
　</div>
　<div class"section">
　　<h2>本文</h2>
　　<div class="section">
　　　<h3>項目見出し</h3>
　　　<p>
　　　　widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。
　　　</p>
　　　<p>
　　　　次のようにテーブルを使えばできたのですが、テーブルを使わずにやることはできますか？
　　　</p>
　　　<p>
　　　　display:inline-blockを使っても中央寄せにはなりますが、「行間」の設定が困難でこれではだめでした。（１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる）
　　　</p>
　　</div>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
において、
html,body{margin:0;padding:0;}
body{background-color:gray;line-height:1.6em;}
p{margin:0;text-indent:1em;}
div.header,div.section,div.footer{
width:50%;/* ボックス中央寄せ */
margin:0 auto;
padding:5px;
}
div.section div.section{
width:auto;
margin:0 100px;
}
div.header{background-color:aqua;}
div.section{background-color:silver;}
div.footer{background-color:lime;}
div.section div.section{background-color:white;}

ちなみにHTML5だと
<body>
　<header>
　　<h1>サンプル</h1>
　</header>
　<section>
　　<h2>本文</h2>
　　<section>
　　　<h3>項目見出し</h3>
　　　<p>
　　　　widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。
　　　</p>
　　　<p>
　　　　次のようにテーブルを使えばできたのですが、テーブルを使わずにやることはできますか？
　　　</p>
　　　<p>
　　　　display:inline-blockを使っても中央寄せにはなりますが、「行間」の設定が困難でこれではだめでした。（１行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる）
　　　</p>
　　</section>
　</section>
　<footer>
　　<h2>文書情報</h2>
　</footer>
</body>

html,body{margin:0;padding:0;}
body{background-color:gray;line-height:1.6em;}
p{margin:0;text-indent:1em;}
header,section,footer{
width:50%;/* ボックス中央寄せ */
margin:0 auto;
padding:5px;
}
section section{
width:auto;
margin:0 100px;
}
header{background-color:aqua;}
section{background-color:silver;}
footer{background-color:lime;}
section section{background-color:white;}

この回答への補足

ありがとうございます。

section section{
width:auto;
margin:0 100px;
}

これだと、「子ボックス」のwidthは明示的には指定していませんが、「親要素のwidth-左margin100px-右margin100px」となり、親要素のwidthに対して常に固定幅ですよね。
私がやりたかったことは、「子ボックス」の文字数に応じて、「子ボックス」のwidthを可変にしたいということでした。

分かりやすく例えると親ボックスが「20文字」の幅を持っているて、子要素のテキストが短いもの（「ああ」と「いいいい」）の場合、
教えて頂いたものだと次のようになると思います。
（「マ」はマージン）
　親親親親親親親親親親親親親親親親親親親親
　ママああ　　　　　　　　　　　　　　ママ
　ママいいいい　　　　　　　　　　　　ママ

そうではなくて、この場合子要素のテキストの最長の「いいいい」の長さで中央寄せになるようにしたいのです。

　親親親親親親親親親親親親親親親親親親親親
　ママママママママああ　　ママママママママ
　ママママママママいいいいママママママママ

子要素のテキストが長くなればそれによって次のようになる

　親親親親親親親親親親親親親親親親親親親親
　ママママママああ　　　　ママママママママ
　ママママママいいいい　　ママママママママ
　ママママママううううううママママママママ

始めに質問したとおりテーブルを使えばこのようにできたのですが、
テーブルを使わずに、ORUKA1951様のような綺麗なhtmlで書くことは可能でしょうか。

補足日時：2014/11/23 12:20
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報