【PC用】レスポンシブでレイアウトを組み替える【スマホ用】

パソコン用とスマートフォン用のサイト・ブログデザインで一番変わるところと言えば、レイアウトです。

例えば、PC用のレイアウトにはサイドバーがありますが、スマートフォン用のデザインにはサイドバーがありません。

また、PC用のサイト・ブログのヘッダー部分には色々な部品やカテゴリーへのリンクを設置していることが多いですが、スマホのヘッダーはすっきりしていることが多いです。

その代わり、三本線のアイコンを表示して、ヘッダー部分にあるはずだった部品をポップアップで表示したり、アコーディオンで表示したり、ページを切り替えたりして表示します。

このように、PC用とスマートフォン用のサイト・ブログでは、レイアウトに大きな違いがあります。

サイドバーをどうするか？

PC用のサイトやブログでサイドバーがないと、他のページへの内部リンクやサイトやブログなどの情報が見れないので、直帰率が高くなります。
（サイトやブログの構造や内部リンクの状態にもよりますが、一般的には、PCからのアクセスよりも、スマートフォンからのアクセスの方が直帰率が高くなりやすいです）

ですので、できればPC用のサイトでもサイドバーを設置したいところです。

では、スマートフォンの時はどうするか？
これが問題になってきます。

DIVタグでサイドバーを設置する

※　注

こちらのページでは、スタイルとレイアウトを分かりやすくするために、敢えてリンクをDIVタグやテーブル用のタグに直付けしています。

DIVタグでレイアウトを組めば、スマートフォンでのアクセスの場合は、float:left; のスタイルをなくすだけで、サイドバーとして横並びにならず、一列に並びます。

スマートフォンからのアクセスとPCからのアクセスで、適用するスタイルを変更する方法は、以下のページをご覧ください。

【CSS3編】サルでもわかるレスポンシブの基本の基本

【HTML5編】サルでもわかるレスポンシブの基本の基本

ですので、DIVタグでレイアウトを組むのが一つの方法です。

<div>ヘッダー</div>  <div style="float: left;"> ページタイトル <br><br> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 </div>  <div style="float: left;">サイドバー</div>  <div style="clear: left;">フッター</div>

これで一応、こんな感じで表示されます。

それをこんな感じで縦並びにしてしまいます。

<p>ヘッダー</p> <p> ページタイトル <br><br> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 <p>サイドバー</p> <p>フッター</p>

先程も書いたように、やり方としてはスマートフォン用のCSSの float:left; を外してやるだけです。

これで、スマートフォン用のレイアウトとPC用のレイアウトの切り替えができます。

テーブルでサイドバーを設置する

絶対に崩れないレイアウトの定番がテーブルによるレイアウトです。
このようなテーブルでサイドバーを表示できます。

<table><tr> <td colspan="2">ヘッダー</td></tr> <tr><td> ページタイトル <br><br> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 </td> <td>サイドバー</td> </tr><tr> <td colspan="2">フッター</td> </tr></table>

ただし、テーブルですのでサイドバーを下に持ってくることはできません。
そこで、このような形にしてサイドバーを非表示にしてしまいます。

<table><tr> <td colspan="2">ヘッダー</td> </tr><tr> <td> ページタイトル <br><br> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 </td>  <td style="display:none;">サイドバー</td> </tr><tr> <td colspan="2">フッター</td> </tr> </table>

このように、スマートフォンからのアクセスの場合はサイドバーを非表示にすることによって、サイドバーが消えてなくなります。

非表示にするには、スマートフォン用のサイドバーのスタイルに display:none; を指定すればOKです。

ただし、この方法ですと、完全にサイドバー全部が非表示になってしまいますので、サイドバーの部品や内部リンク毎に表示・非表示を切り替えることができないです。

ですので、サイドバーの中にスマートフォンでも表示したい部品や内部リンクがある場合は、記事＋タイトルの下に移動させるか、PCの時はスマートフォン用の部品や内部リンクは非表示で、スマートフォンの時は表示させるようにすると良いです。

でも、この方法の場合、読み込まれはするものの非表示になるものが多くなりますので、サイトやブログの見た目よりも重く、サーバーの負荷がかかりやすいサイトやブログができてしまうかもしれません。

また、2016年6月現在は大丈夫なようですが、最悪の場合、Googleのペナルティの対象になる可能性もありますので、その点には注意が必要かと思います。

DIVタグでサイドバーとページタイトル＋本文を並べる方法

DIVタグで、サイドバーを設置する場合、ページタイトル＋本文とサイドバーを上手く並列させないといけません。
そのために必要なのは 『％』 です。

例えば、ページタイトル＋本文 を ７０％。
サイドバー を ３０％ で表示させたい時。
このようにスタイルを指定します。

<p>ヘッダー</p>  <div style="float: left; width: 70%;"> ページタイトル <br><br> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 </div>  <div style="float: left; width: 30%;">サイドバー</div>  <div style="clear : left;">フッター</div>

これで、ウィンドウサイズを変更しても、ページタイトル＋本文とサイドバーが同じ比率で拡縮します。

ページタイトル＋本文70%、サイドバー30%なのにサイドバーが落下

DIVタグの場合、理論上は、ページタイトル＋本文が70%、サイドバーが30% で合計 100% でサイドバーが落下せずに横に貼りつくのですが、その通りに指定してもサイドバーが落下してしまうことがあります。

このような場合、サイドバーの数値（％）か、ページタイトル＋本文の数値（％）のどちらかを削ってやると治ります。

ただ、その場合はテーブルでのサイドバーとは違い、端に謎の空白ができやすくなります。
（画面サイズによっては、できたりできなかったりしますが）

ですので、どうしてもそれが許せない！と言う場合には、テーブルでのレイアウトをすると良いと思います。
（絶対にサイドバーが落下しませんしね。（;´_`;））

フッターがサイドバーに貼りつく件

DIVでサイドバーを設置する場合、もう一つ起きがちなのが、フッターがサイドバーに貼りつくことです。
これは何故起きるのかと言うと、フッターに clear:left の指定が入っていないからです。

でも、たまに何らかの理由で clear:left の指定が効かなくなってしまうことがあります。

そのような場合は、空のDIVタグを用意し、そこに clear:both; （両方の回り込みを解除する）のスタイルを入れてやるとOKです。
ほとんどの場合、これでフッターがサイドバーに貼りつくことはなくなります。

また、今は大丈夫に見えるけど、念の為にこれをフッターとサイドバーに突っ込んでおくというのもありなのではないかと思います。

<p>ヘッダー</p>  <div style="float: left; width: 70%;"> ページタイトル <br><br> 文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章 </div>  <div style="float: left; width: 30%;">サイドバー</div>  <div style="clear: both;"></div>  <div style="clear: left;">フッター</div>

次ページ

【レスポンシブ化の準備】忍者メールフォームの作成＆設定方法

前ページ

【無料で使える】レスポンシブデザインをチェックするためのツール

このカテゴリの記事

その他のカテゴリを見る