スマホで横並びdivについての質問

2023/10/28 08:29

このQ&Aのポイント

スマートフォンで横並びのdivを実現する方法について質問です。本文が長いと日付の下に本文が来てしまうため、本文の末尾が消えないようにしたいです。
スマートフォンのdiv横並びに関する質問です。本文の長さによっては、日付の下に本文が表示されてしまうことがあります。本文の末尾を切り捨てずに、div横並びを実現したいです。
スマートフォンでのdiv横並びについての問題です。本文が長い場合、日付の下に本文が表示されてしまいます。本文の末尾を欠損せずに、div横並びを達成する方法を教えてください。

ベストアンサー

スマホで横並びdiv

2013/10/29 00:50

お世話になっております。スマートフォンでdivの横並びをしようとしたのですが、 <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> </head> <body> <div style="height:30px;line-height:30px;width:100%;"> <div style="overflow:hidden;float:left;width:50px;">日付</div> <div style="overflow:hidden;float:left;">本文</div> </div> </body> とした場合、本文が長いと日付の下に本文が来るようになってしまいます。本文の末尾が消えてdivが横並びになるようにしたいのですが良い方法はないでしょうか？よろしくお願いします。以上です。

sakura_question
お礼率62% (5/8)

CSS
回答数2
ありがとう数5

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/10/30 11:00 回答No.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">  ＿</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">  </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>

質問者

お礼 2013/10/31 02:42

大変詳しく書いてくださりありがとうございます。このサンプルでは想定したようにできなかったのですが、下記のようにしたら出来ました。 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>

その他の回答 (1)

chocotarosu
ベストアンサー率40% (2/5)

2013/10/29 10:09 回答No.1

こんな感じでいかがでしょうか？ <!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>

質問者

補足 2013/10/29 17:49

日付、本文のdivに%で幅指定すると表示されました。スマホの端末ごとで幅が違うので出来れば日付のdiv幅は固定、本文のdiv幅は可変で横幅が広がった分だけ本文のdivが広がってほしいと考えております。わざわざ答えていただいたのに言葉足らずで大変申し訳ございません。

関連するQ&A

Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css">  </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
firefoxでdivタグの体裁崩れ
お世話になります。以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。・これはIE or FireFoxのバグになるのでしょうか？・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
【スマホ・タブレット】floatの高さ可変マージン
スマホやタブレットにて画面サイズが違っていても常に横幅を１００％で表示させたいと思っています。ただfloatで回り込ませた場合、Link１に右と下にマージンができません。またborder-radiusを付けた場合下部が角丸にならず、何かうまく表示される方法はないかと悩んでいます。この様な場合どのようにソースを書けばいいのかアドバイスを頂ければと思います。またLink1やLink2の部分の高さの中央揃えにしたい場合もご教授頂ければ幸いです。宜しくお願いいたします。 <style type="text/css">  </style> </head> <body> <div id="boxArea" class="cl"> <img src="http://www.universe-s.com/img/news/2004/0520_01.jpg" style="float:left; background:#000; width:20%; height:auto;" /> <div style="width:80%"> <div style="width:100%;"><div>aaaaa</div></div> <div id="two"> <div style="background:#F00; margin:5px 5px -32767px 5px; padding:5px 5px 32767px 5px; width:100%; border-radius:10px;">Link1</div> </div> <div id="three"> <div style="background:#060; margin:5px; padding:5px; padding-bottom: 32767px; margin-bottom: -32767px; width:100%; border-radius:10px;">Link2</div> </div> </div> </div> </body>
- 締切済み
- CSS
横並びdivで一部の初期高さがずれる理由について
いつもお世話になっております。きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。 divブロックを横並びにして、divブロック４つ、検索formを含んだdivフォームを1つ配置したいのですが、 [css] #hoge{ overflow: hidden;} #head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;} #head div { display: inline-block; margin: 0px; border: 1px solid;} #test1{ width:100px; height:33px;} #test2{ width:100px; height:33px;} #test3{ width:100px; height:33px;} #test4{ width:100px; height:33px;} #test5{ width:250px; height:33px;} #Form input{ margin:auto 0px; font-size: 70%; width: 150px; } #Form button{ font-size: 70%; width: 50px; } [html] <div id="hoge"> <div id = "head"> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div> <div id="test4"></div> <div id="test5"> <form id = "Form"> <input name="list"/> <button>テスト</button> </form> </div> </div> </div> この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。また、divとdivの間に余計な隙間が作られてしまいます。ここで分からないことは、１．たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか？２．div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は？３．cssのinline-block等の属性を変えずに隙間を詰めることはできるか？等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m
- ベストアンサー
- CSS
divの背景を高さ100%表示
以下のように、divをつかって背景色を設定した際、右のピクセル指定の背景は、スクロールバーが出た場合でも指定された高さまで背景色が表示されるのですが、左の100%表示指定の方はウィンドウで隠れた部分で切れてしまいます。色々調べたのですが、過去にも同じような内容で質問があり、min-heightを追加する事で解決するとありました。同じように試してみたのですが、思ったように表示がされません。指定している場所が間違っているのでしょうか？ <style type="text/css"> html{ height:100%; } body { height:100%; } #test1 { height:auto !important; height:100%; min-height:100%; float:left; width:400px; background-color:black; } #test2{ float:right; height:800px; width:400px; background-color:black; } body > #test1 { height: auto; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>
- ベストアンサー
- HTML
高さを指定せずに子divにスクロールバー
お世話になっております。内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？何がしたいのかと言えば高さを規定した親div内に、問題の子divを入れます。この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？お詳しい方、何卒ご教授下さい。だいぶ簡略化したものですが、下記コードがイメージに近いです。汚いコードですが・・・ <style type="text/css">  </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>
- 締切済み
- CSS
htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困
htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。 2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。具体的には、下で記述した場合、 <div id="test"> テスト </div> が、右寄せにならないのですが、何がいけないのでしょうか？【-------------html-------------】 <DIV id="wrap"> <div id="head"> <div id="logo"> ロゴ配置予定 </div> <div id="test"> テスト </div> </div> <div id="menu"> メニュー </div> <div id="left"> レフト </div> <div id="right"> メインコンテンツ </div> <div id="foot"> フッタ </div> </dib 【-------------css-------------】 /* レイアウトの設定*/ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:600px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:600px; height:350px; background-color:#CC9999; div#logo{ position: absolute; float: left; width:200px; height: 30px; } div#test{ width:100px; height: 30px; float: right; } } /* ヘッダーの設定*/ #menu{ width:600px; height130px; background-color:#CC9900; } /* 左側の設定*/ #left{ width:150px; height:300px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:450px; height:300px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:30px; background-color:#CCFFCC; clear:both; }
- ベストアンサー
- その他（プログラミング・開発）
このcssをIEで見ると？
お世話になります。下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML

スマホで横並びdivについての質問

スマホで横並びdiv