- ベストアンサー
スマホで横並びdivについての質問
- スマートフォンで横並びのdivを実現する方法について質問です。本文が長いと日付の下に本文が来てしまうため、本文の末尾が消えないようにしたいです。
- スマートフォンのdiv横並びに関する質問です。本文の長さによっては、日付の下に本文が表示されてしまうことがあります。本文の末尾を切り捨てずに、div横並びを実現したいです。
- スマートフォンでのdiv横並びについての問題です。本文が長い場合、日付の下に本文が表示されてしまいます。本文の末尾を欠損せずに、div横並びを達成する方法を教えてください。
- sakura_question
- お礼率62% (5/8)
- CSS
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
できるだけDIVは使わない。使うときも「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」が原則です。HTML5では、より厳しく「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )訳すと「適切な他の要素がないときの最後の手段としてdiv要素を使用することが強く奨励される。」」 例えば、 <body> <div class="header"> ヘッダ </div> <div class="section"> <h2>タイトル</h2> <dl> <dt>2013.08.29</dt> <dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd> <dd>よろしくお願いします。</dd> <dt>2013.08.30</dt> <dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd> <dd>よろしくお願いします。</dd> </dl> </div> と率直にHTMLを書いて、日付を左に表示したいとすれば、そのようにスタイルシートを書けばよいだけです。将来気が変わったら他のデザインにすることも容易です。 別にdl(定義リスト)でなくても何でも良いです。 <div class="section"> <h2>見出し</h2> <h3>2013.10.29</h3> <p></p> <h3>2013.10.29</h3> <p></p> だろうが・・・・文書構造を示す最適なマークアップにすればよい。スタイルシートを使う目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」なのですから、好きにデザインできるのですよ。HTMLには構造しか書いてないので作るほうも、スタイルシートでデザインを変えるのも楽ですし・・・ ★日付のfloatと本文のmarginを組み合わせてあります。 ★ウィンドウ幅には依存しません。スマホ縦でも横でも、幅広のパソコンでも ウィンドウ幅を変更してみましょう。 ★タブは＿に置換してあるので戻す。 [HTML4.01strict]汎用(PC/スマホ兼用) <!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@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{ width:80%;min-width:460px;max-width:800px; margin:0 auto; padding:5px; background-color:white; } div.section dl dt{ float:left; } div.section dl dd:after{ content:""; display:block; clear:left; } div.section dl dd{ margin-left:6em; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>タイトル</h2> ＿＿<dl> ＿＿＿<dt>2013.08.27</dt> ＿＿＿<dd>本文が長いと</dd> ＿＿＿<dt>2013.08.29</dt> ＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd> ＿＿＿<dd>よろしくお願いします。</dd> ＿＿＿<dt>2013.08.30</dt> ＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd> ＿＿＿<dd>よろしくお願いします。</dd> ＿＿</dl> ＿</div>＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-10-30</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> [HTML5]★スマホおよび、IE9以降のモダンブラウザ用 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;background-color:gray;} header,section,footer{ width:80%;margin:0 auto; padding:5px; background-color:white; } section dl dt{ float:left; } section dl dd:after{ content:""; display:block; clear:left; } section dl dd{ margin-left:6em; } --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>タイトル</h2> ＿＿<dl> ＿＿＿<dt>2013.08.27</dt> ＿＿＿<dd>本文が長いと</dd> ＿＿＿<dt>2013.08.29</dt> ＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd> ＿＿＿<dd>よろしくお願いします。</dd> ＿＿＿<dt>2013.08.30</dt> ＿＿＿<dd>本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？</dd> ＿＿＿<dd>よろしくお願いします。</dd> ＿＿</dl> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
その他の回答 (1)
- chocotarosu
- ベストアンサー率40% (2/5)
こんな感じでいかがでしょうか？ <!doctype html> <html> <head> <meta charset="utf-8"> <title>title</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <style> #information{ width:100%; } #information div{ height:30px; line-height:30px; overflow:hidden; float:left; } .clear { height:0; font-size:1px; line-height:0px; clear:both; } </style> </head> <body> <div id="information"> <div style="width:15%;">日付</div> <div style="width:85%;">本文が入ります。本文が入ります。本文が入ります。本文が入ります。</div> <div class="clear"></div> </div> </body>
補足
日付、本文のdivに%で幅指定すると表示されました。 スマホの端末ごとで幅が違うので 出来れば日付のdiv幅は固定、 本文のdiv幅は可変で横幅が広がった分だけ 本文のdivが広がってほしいと考えております。 わざわざ答えていただいたのに言葉足らずで 大変申し訳ございません。
お礼
大変詳しく書いてくださりありがとうございます。 このサンプルでは想定したようにできなかったのですが、 下記のようにしたら出来ました。 ORUKA1951様のサンプルをいじっていたら想定したようになりました。 ありがとうございます。 #section dl{ height:15px; display: -webkit-box; /* Safari,Google Chrome用 */ display: -moz-box; /* Firefox用 */ } #section dl dt{ width:90px; } #section dl dt,dl dd{ height:15px; overflow:hidden; margin:0; } <div id="section"> <dl> <dt> 00:00:00</dt> <dd>本文本文本文本文本文本文本文本文</dd> </dl> </div>