dポイントプレゼントキャンペーン実施中！

詳しい人求む！

display:table-cell内でこんなに都合の良い改行は可能ですか？

解決済

  • 質問者：shoshin01
  • 質問日時：
  • 回答数：3件

display:table-cell内でこんなに都合の良い改行は可能ですか？

こんにちは。下のようにhtmlとCSSで定義しています。

<div class="parent">
<div class="child1">国</div>
<div class="child2">日本 中国 イギリス アメリカ ドイツ アラブ首長国連邦 メキシコ</div>
</div>

.parent{
display:table;
table-layout:fixed;
width:300px;
}
.child1{
display:table-cell;
width:100px;
}
.child2{
display:table-cell;
width:200px;
/*child2の横幅は全角文字6文字分*/
}

これを下記のように出力したいです。

ブラウザ
←child2の横幅は全角文字6文字分→
---------------
　｜日本 中国
　｜イギリス
国｜アメリカ
　｜ドイツ
　｜アラブ首長国
　　連邦
---------------
表示がうまくいってないかもしれないので言葉で説明します。

・child2の横幅は全角文字6文字分です。
・全角6文字以下の国名は改行無しで表示。
・日本と中国のように全角合計4文字で間が半角1文字という合計の全角6文字以内の場合、両者を同じ行に表示(半角スペースで分ける)
・アラブ首長国連邦のように全角6文字を超える場合は、前の国名の次に表示して、はみ出す分は改行して書く。


ググっていて、display:table-cell;を利用している場合は改行は普通と異なるとか見たり、
word-wrap:、overflow-wrap:、white-space:、text-wrap:、word-break:などを駆使してみましたが、
希望のことは出来ませんでした。

こんな都合の良い改行、可能ですか？

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

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

仕様書を通読されたら気づかれると思います。

仕様書全体にわたるコンセプトが理解できると思います。いくつか例を揚げておきます。
　必ずリンク先を読んでください。--理解できると思いますし、今後とも参考になるでしょう。
HTML4.01
『2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　DIVやspanは、それ自体意味を持たないマークアップですから、idやclassを併用する必要がありました。その反省から・・
『HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )』
　の中ほど・・「【問題2】文書内に埋め込まれた「意味」が不明確」

HTML5
『NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )』
　(訳)注意:著者には他により適切な要素ないときの最後の手段としてdiv要素を使用することが強く奨励します。div要素の代わりにより適切な要素を使用することは、読者のた​​めにはより良いアクセシビリティを作者のためには簡単な保守性につながります。
　他にも、HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ )とか・・

　HTML5が勧告(2014/10/28)されましたが、class名はHTML5の新しい要素を参考にすると良いでしょう。

さきのHTMLをHTML5で書くと
<figure>
　<h2>国</h2>
　　<p>
　　　　<span class="country">日本</span> <span class="country">中国</span> <span class="countr">イギリス</span> <span class="country">アメリカ</span> <span class="country">ドイツ</span>
　　</p>
</figure>
　となります。figureをどういう場面で使用するかは調べてください。

　spanはHTMLに用意されていない行内要素をclassなどをつけて識別するためです。

★HTML5だと、
body
　|-- +header
　|-- -section
　　　|-- figure
　　　　　|-- h2
　　　　　|-- p
　　　　　　　|-- span　.country

section figure p span.country{}
　のセレクタをご覧になると分かるように、メンテナンス性が向上するのは実際にウェブを開発されていると分かると思います。他人も自身も半年後に、HTMLの変更、デザインの変更などのメンテナンスをする事を想像されると良いでしょう。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済
★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
div.section div.figure{
＿width:10em;
＿margin:0 auto;
＿position:relative;
＿border-style:dotted none;
＿border-color:gray;
＿border-width:1px 0;
}
div.section div.figure p{
＿margin:0 0 0 5em;
＿text-indent:0;
＿line-height:1.6em;
}
div.section div.figure h3{
＿margin:0;
＿font-size:1.2em;
＿position:absolute;
＿top:0;left:0;
＿width:4em;height:100%;
＿display:table-cell;
＿text-align:center;
＿border-right:gray 2px solid;
}
div.section div.figure p span.country{
＿display:inline-block;
＿max-width:6em;
＿background-color:yellow;
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿＿<div class="nav"><!-- ここはナビゲーション(ヘッダ内のあるのでグローバル) -->
＿＿＿<ul>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/products">製品</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>本文</h2>
＿＿<div class="figure">
＿＿＿<h3>国</h3>
＿＿＿<p>
＿＿＿＿<span class="country">日本</span> <span class="country">中国</span> <span class="country">イギリス</span> <span class="country">アメリカ</span> <span class="country">ドイツ</span> <span class="country">アラブ首長国連邦</span> <span class="country">メキシコ</span>
＿＿＿</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h3>文書情報</h3>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

＞htmlには装飾などデザインは書いていないつもりでした。ですので、『全てCSSに書いた』つもりでした。
<div class="parent">
　<div class="child1">国</div>
　<div class="child2">
　後日、分かりますか？
<figure>
　<h2>国</h2>
　　<p>
　　　　<span class="country" title="Japan">日本</span>
たとえ、今回はデザインで<span class="country">が必要ないにしても、書いておくと役立つ
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2015/08/26 07:36

No.3

  • 回答者： Ogre7077
  • 回答日時：

child2 の中身を、箇条書きに変更


<ul>
<li>日本
<li>中国
<li>タイ
<li>グレートブリテンおよび北部アイルランド連合王国
<li>...
</ul>

箇条書きの各項目を "inline-block" で表示させる
<style>
.child2 ul { list-style:none; padding:0; margin:0; }
.child2 ul li { display:inline-block; margin-right:1ex; } /* 前後の間隔は半角1字程 */
</style>

これで
* 項目が同じ行に収まる → 同じ行に表示
* 項目が同じ行に収まらない → 改行してから表示
* 項目が一行に収まらない → 自分自身を途中で改行させる
が実現できます
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

通報する
お礼日時：2015/08/26 07:36

No.1

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

デザインのためにHTMLを書いたらダメです。

基本中の基本ですよ。
たとえば、
<div class="figure"><!-- figureはTML5では他から参照されうるデータ -->
<h2>国</h2>
　　<p>
　　　　<span class="country">日本</span> <span class="country">中国</span> <span class="countr">イギリス</span> <span class="country">アメリカ</span> <span class="country">ドイツ</span> <span class="country">アラブ首長国連邦</span> <span class="country">メキシコ</span>
　　</p>
</div>

とマークアップされていたとします。この時点では、デザインは考えずひたすら文書構造をマークアップします。
★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　HTML4.01(1999年勧告)以降、最も重要なDIV,SPANの使い方
　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

・child2の横幅は全角文字6文字分です。
　その場合、幅はemで指定します。視角弱者のブラウザは文字が大きい場合があるので

・全角6文字以下の国名は改行無しで表示。
・日本と中国のように全角合計4文字で間が半角1文字という合計の全角6文字以内の場合、両者を同じ行に表示(半角スペースで分ける)
・アラブ首長国連邦のように全角6文字を超える場合は、前の国名の次に表示して、はみ出す分は改行して書く。

★タブは＿に置換してあるので戻す。

div.section div.figure{
＿width:11em;
＿margin:0 auto;
＿position:relative;
＿border-style:dotted none;
＿border-color:gray;
＿border-width:1px 0;
}
div.section div.figure p{
＿margin-left:5em;
＿text-indent:0;
＿line-height:1.6em;
}
div.section div.figure h3{
＿font-size:1.2em;
＿position:absolute;
＿top:0;left:0;
＿width:4em;height:100%;
＿display:table-cell;
＿text-align:center;
＿border-right:gray 2px solid;
}
div.section div.figure p span.country{
＿display:inline-block;
＿max-width:6em;
＿background-color:yellow;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、ご回答ありがとうございます。

＞デザインのためにHTMLを書いたらダメです。基本中の基本ですよ。
はい、ORUKA1951さんが教えてGooで答えられている数々のご回答を見てきてそう思い、htmlには装飾などデザインは書いていないつもりでした。ですので、『全てCSSに書いた』つもりでした。

お答え頂いて大変失礼かと存じますが、どの辺がデザインになっていますでしょうか？
divをdivで囲んだところでしょうか？それとも国名をスペースで区切ったところでしょうか？

前者の場合、ORUKA1951さんお答えのdivでh2を囲んだりspanやpを囲んだり、pでspanを囲んだりする部分とどう違うのかと？？？です。
後者の場合、正直知りませんでした。

ORUKA1951さんのお答えをまだ試していないので、ダメな時はまた質問させて下さい。

ありがとうございました。

通報する
お礼日時：2015/08/19 20:04

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報