差分

このページの2つのバージョン間の差分を表示します。

--- css_divyoko [2018/05/14 21:16] – 作成管理者
+++ css_divyoko [2019/03/23 12:17] (現在) – [floatを使う] 管理者
@@ 行 1: / 行 1: @@
+{{tag>プログラミング関連 CSS}}
+[[start]]＞[[programming_start]]
+====== CSS DIVを横並びにする方法 ======
+DIVを横並びにするために、簡単そうな3つの方法、どれも一長一短あり。
+-----
+===== 共通部分 =====
+つの方法すべてで使用するHTMLとスタイルシート
+<code html>
+<style>
+/* わかりやすいように色と線をつける*/
+.b_gray{background:#eee;}
+.boder1{border:solid 1px #777;background:#fff;}
+</style>
+</code>
+<code html>
+<p>top</p>
+<div class="wrap b_gray"><!--
+--><div class="grid boder1"><p>グリッドその1</p></div><!--
+--><div class="grid boder1"><p>グリッドその2<br>グリッドその2</p></div><!--
+--><div class="grid boder1"><p>グリッドその3</p></div><!--
+--><div class="grid boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!--
+--><div class="grid boder1"><p>グリッドその5</p></div><!--
+--><div class="grid boder1"><p>グリッドその6</p></div><!--
+-->
+</div>
+<p>end</p>
+</code>
+※空のコメント要素はinline-block時で改行の打消しで使用してる、inline-block以外の場合はコメントタグを削除しても良い。
+===== PR =====
+<html>
+<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<!-- respon_0 -->
+<ins class="adsbygoogle"
+     style="display:block"
+     data-ad-client="ca-pub-9251612436023685"
+     data-ad-slot="1409739163"
+     data-ad-format="auto"></ins>
+<script>
+(adsbygoogle = window.adsbygoogle || []).push({});
+</script>
+</html>
+===== floatを使う =====
+<html>
+<style>
+/* わかりやすいように色と線をつける*/
+.b_gray{background:#eee;}
+.boder1{border:solid 1px #777;background:#fff;}
+.wrap1{overflow:hidden;zoom:1;} /* zoom:はIE6+7対策 */
+.wrap1:before,.a1_gridwrap:after{content: "";display: table;}
+.wrap1:after{clear: both;}
+.grid1{float:left;}
+</style>
+<div class="wrap1 b_gray"><!--
+--><div class="grid1 boder1"><p>グリッドその1</p></div><!--
+--><div class="grid1 boder1"><p>グリッドその2<br>グリッドその2</p></div><!--
+--><div class="grid1 boder1"><p>グリッドその3</p></div><!--
+--><div class="grid1 boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!--
+--><div class="grid1 boder1"><p>グリッドその5</p></div><!--
+--><div class="grid1 boder1"><p>グリッドその6</p></div><!--
+-->
+</div>
+</html>
+<code>
+<style>
+.wrap{overflow:hidden;zoom:1;} /* zoom:はIE6+7対策 */
+.wrap:before, .wrap:after{content: "";display: table;}
+.wrap:after{clear: both;}
+.grid{float:left;}
+</style>
+</code>
+  * 昔から使われている方法
+  * 折り返しが発生する場合は、gridに高さと幅を一定にしないと縦横共にズレてしまう。
+  * IE6はfloatで指定した方向のマージンが2倍になる不具合があるので注意が必要
+  * IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意
+===== inline-block を使う =====
+<html>
+<style>
+.grid2{display:inline-block;vertical-align:top;*display:inline;*zoom:1;} /* 後ろの2つはIE6+7対策 */
+</style>
+<div class="wrap2 b_gray"><!--
+--><div class="grid2 boder1"><p>グリッドその1</p></div><!--
+--><div class="grid2 boder1"><p>グリッドその2<br>グリッドその2</p></div><!--
+--><div class="grid2 boder1"><p>グリッドその3</p></div><!--
+--><div class="grid2 boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!--
+--><div class="grid2 boder1"><p>グリッドその5</p></div><!--
+--><div class="grid2 boder1"><p>グリッドその6</p></div><!--
+-->
+</div>
+</html>
+<code>
+<style>
+.grid{display:inline-block;vertical-align:top;*display:inline;*zoom:1;} /* 後ろの2つはIE6+7対策 */
+</style>
+</code>
+  * 個人的には最も使う方法。
+  * 折り返しが発生する時はgridに幅を一定にしないと縦方向にズレが発生する。（※floatのように高さは一定にしなくても横方向は揃う）
+  * HTML作成時に改行を使用すると隙間が発生するので、上記の共通HTMLのように改行をコメント要素で打ち消したりfont-size:0;を使う必要があり、スマートさに欠ける。
+  * IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意
+  * vertical-align:で中央揃えも可能
+===== table-cell を使う =====
+<html>
+<style>
+.grid3{display:table-cell;}
+</style>
+<div class="wrap3 b_gray"><!--
+--><div class="grid3 boder1"><p>グリッドその1</p></div><!--
+--><div class="grid3 boder1"><p>グリッドその2<br>グリッドその2</p></div><!--
+--><div class="grid3 boder1"><p>グリッドその3</p></div><!--
+--><div class="grid3 boder1"><p>グリッドその4<br />グリッドその4<br />グリッドその4<br />グリッドその4</p></div><!--
+--><div class="grid3 boder1"><p>グリッドその5</p></div><!--
+--><div class="grid3 boder1"><p>グリッドその6</p></div><!--
+-->
+</div>
+</html>
+<code>
+<style>
+.grid{display:table-cell;}
+</style>
+</code>
+  * 色々問題があるので使わない方が良い
+  * 折り返しが発生しないのでレスポンシブデザインには向かない。
+  * 内側ブロック(class=grid)にマージン設定ができない。
+----
+[[start]]＞[[programming_start]]