ホーム
WEB制作
レスポンシブデザイン

【レスポンシブで必須】 横並びと縦並びのスタイルをマスターする

レスポンシブでは、テーブル（表）が使いにくいです。
なぜなら、テーブルは幅の長さは変更できても縦並びと横並びを変更できないからです。

スマートフォンの縦サイズ、特に iPhone5 程度の狭い横幅の端末の場合、縦に並べないと操作性が悪化します。

ですので、レスポンシブ・ウェブデザインでは、横並びと縦並びのスタイルをマスターすることが重要になります。

横並びと縦並びのスタイルの違い

横並びとは、リンクなどが横にズラズラと並ぶスタイルのことです。

パソコンやサイズの大きいタブレット端末で縦並びにしてしまうと、右に大きな空白ができてしまいますので、そのような場合には横並びが向いています。

縦並びとは、縦にリンクなどがズラズラと連なっているスタイルです。

スマートフォンなどの横幅の狭い端末で横並びにしてしまうと、右端からはみ出してしまったり選択しづらかったりしますので、そのような場合は縦並びの方が向いています。

横並びのスタイルにする方法

float:left; を使って横並びにします。
他の方法もありますが、多分、これが一番基本的で確実なやり方です。

DIVタグにクラス名を与えてあげます。
ここでは仮に 『 yoko 』 と言うクラス名を与えます。
全ての要素に対して、この 『 yoko 』 と言うクラス名をつけていきます。

<!-- 横並び -->
<div>
   <div class="yoko">カテゴリー１</div>
   <div class="yoko">カテゴリー２</div>
   <div class="yoko">カテゴリー３</div>
   <div class="yoko">カテゴリー４</div>
   <div class="yoko">カテゴリー５</div>
</div>

<!-- float left 解除 -->
<div class="clear"></div>

最後に、clear:both; のスタイルを充てた 空のDIVタグ を入れます。
ここでは仮に 『 clear 』 というクラス名にします。

今まであれやこれやとやってきたんですが、こうやって空のDIVタグを作り、 clear:both; を指定してfloat:left を解除してあげるやり方が一番無難でした。

他のやり方もあるにはあるんですが、何かしら弄ったり高さや幅が変わった時に、レイアウトが壊れることが多々ありましたので、結局はこれに落ち着きました。
（全サイト・全ページで数千ページありますので、一々全部のページをくまなくチェックすることが困難なので、結局は一番無難なこの方法に落ち着いています）

/* 横並び */

.yoko{

   float:left;/* 横並びにする */

   /* ボタンのスタイル */
    color:#fff;
   margin:10px;
   padding:10px;
   border-radius: 3px;
   box-shadow: 1px 1px 3px 0px #f3f3f3;
   background: #80c217;
   background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
}

/* float left解除 */
.clear{clear:both;}

clear:both;と言うのは、左右両方の float を解除する方法です。
空のDIVにこのスタイルを適用すると、上下の float をこの部分でクリアすることができます。

float が適用された要素の下には float を適用したくない場合、このやり方だと確実にクリアしてくれます。

縦並びのスタイルにする方法

先ほどのスタイルから float:left; を取り去れば、そのまま縦並びのスタイルになります。

<!-- 縦並び -->
<div>
   <div class="yoko">カテゴリー１</div>
   <div class="yoko">カテゴリー２</div>
   <div class="yoko">カテゴリー３</div>
   <div class="yoko">カテゴリー４</div>
   <div class="yoko">カテゴリー５</div>
</div>

<!-- float left 解除 -->
<div class="clear"></div>

ただし、そのままだとリンクをタップしにくいですので、リンクやボタンのスタイルをタップしやすいスタイルに変更します。

/* 縦並び */
.yoko{

   /* ボタンのスタイル */
   margin:20px 10px 20px 10px;
   padding:0px 0px 0px 30px;
   color:#fff;
   line-height:3;
   border-radius: 3px;
   box-shadow: 1px 1px 3px 0px #f3f3f3;
   background: #80c217;
   background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
}

/* float解除 */
.clear{display:none;}

段落指定する方法

スマートフォンの端末用のスタイルでも、float:left; でボタン型の画像やボタン型のリンクをツラツラと横並びに配置し、はみ出す部分は折り返すようにすることも可能です。

やり方は上記のやり方と一緒です。
ただ、スマートフォン用でも float:left; を入れるだけです。

横並びだと誤クリックを誘発しやすいですので、ボタンやリンクのスタイルの指定で、できるだけ誤クリックが生じないようにすることが大切です。

【高さを変える】リンクとリストのレスポンシブ化

/* 横並び */
.yoko{

   float:left;

   font-size:14px;
   line-height:3;
   width:30%;

   /* ボタンのスタイル */
   text-align:center;
   margin:5px 5px 5px 5px;
   padding:0;
   color:#fff;
   border-radius: 3px;
   box-shadow: 1px 1px 3px 0px #f3f3f3;
   background: #80c217;
   background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
}

/* float解除 */
.clear{display:none;}

次ページ

【誤操作＆誤表示防止】 レスポンシブ対応で気をつけた方が良いこと

前ページ

【画像】 ファイルの圧縮とサーバー 【CSS】

広告

このカテゴリの記事
その他のカテゴリを見る