ベストアンサー

<div>で改行させない方法

2013/12/09 16:25

下記のサイトを見てページを作ってるのですが、どうしても<div>ごとに改行されてしまいます。ほぼコピペしただけなのですが、デモページではきちんと改行されずに表示されていますよね。どうして改行されてしまうのでしょうか。対処法があれば教えていただけると助かります。当方ど初心者ですので一番わかりやすいのをお願いします(＞人＜;) http://coliss.com/articles/build-websites/operation/css/css-only-pinterest-style-by-kushagra.html

runway173
お礼率54% (37/68)

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

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

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

ベストアンサー

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

2013/12/09 18:16 回答No.1

質問がどの部分を指しているのか意味が分かりませんが、divはブック要素ですから、スタイルシートで変更しない限り『ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )』はずです。　スタイルシートで、displayの値を、inline、inline-blockなどに指定しない限り、ブラウザのもつデフォルトのスタイルで整形されます。 ★老婆心ながら、この手のサイト、余りはまらないほうが良いですよ。　CSS3のcolumnを使ったレイアウトの説明ですが、1999年に勧告されたHTML4.01以来の「文書構造とプレゼンテーションの分離」が全くされていません。 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/2012/CR-html5-20121217/grouping-content.html#the-div-element )---著者は、他に適当な要素がないときの最後の手段としてdiv要素を使用することを強く推奨する』言い換えれば原則DIVは使いません。　デザインのためにHTMLを書いてはならない!!!という原則を外れています。 ★culumnは、単純に「段組」のための仕組みですから、単純にその要素をinline-blockにして整形すればよいだけです。 HTML5的に書くと <body> 　<header> 　</header> 　<section> 　　<ul> 　　　<li><img src="" width="" height="" alt=""> 　　　　　<p>説明</p> 　　　</li> ・・・・という形にHTML4.01でしたら <body> 　<div class="header"> 　</div> 　<div class="section"> 　　<ul> 　　　<li><img src="" width="" height="" alt=""> 　　　　　<p>説明</p> 　　　</li> になります。それを単純に（細部を省くと）　section ul,section ul li{list-style:none;margin:0;padding:0;} 　section ul{column-count: 3;} 　section ul li{display:inline-block;} ないし、　div.section ul,div.section ul li{list-style:none;margin:0;padding:0;} 　div.section ul{column-count: 3;} 　div.section ul li{display:inline-block;} にすればよい。　そしてこれは印刷には向かないので、印刷用は　section ul,section ul li{list-style:none;margin:0;padding:0;} とか・・　もちろん検索エンジンには素のHTMLとして画像リストとして理解させることになります。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2013/12/11 14:40 回答No.3

デモページのどの部分を見て<div>の改行と判断されてますか？ <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> というHTMLドキュメントがあるとして、（別に<li>でも<section>でも何でも良いです。）参考サイトの用にcolumnを使用してレイアウトすると、 1 4 2 5 3 6 という順番で表示されます。 floatを使用すると、 1 2 3 4 5 6 という順番で表示されます。もし表示順を考慮する必要があるのなら、 floatとcolumnに互換性はありませんので、各オブジェクトの高さが違うからcolumnを使えばよいという物ではありません。デザインにあわせてCSSを書いてみてください。

ログインすると、全ての回答が全文表示されます。

barusu0126
ベストアンサー率23% (67/286)

2013/12/10 14:52 回答No.2

-------------------------------------------------------- <style> .clear { clear:both; } .clear hr { display:none; } </style> <div style="width:100px; background:#999; float:left;">box1</div> <div style="width:100px; background:#CCC; float:left;">box2</div> <div class="clear"></div> <div style="width:100px; background:#999; float:left;">box3</div> <div style="width:100px; background:#CCC; float:left;">box4</div> -------------------------------------------------------- ↑これで横並びに設置できます。「flort:left;」で横に配置し、上のstyle部分で横並びを解除してます。解除しないと延々横に配置されます。

ログインすると、全ての回答が全文表示されます。