パソコン好きのサラリーマンのブログ

福岡市のサラリーマンがアフィリエイトで稼ぐブログ

今話題のレスポンシブデザインを自分で作る(スマホ対応ホームページ)

福岡で働くソフトウェア会社社員が、複業で稼ぐようになるまでのブログ。いろんなホームページを沢山作って、アクセス増加を目指します。

こんにちは。

この記事では今話題のレスポンシブデザインを簡単に作る方法をご説明します。

 

私が作ったテンプレートを活用していきます。

まずは、ここからファイルをダウンロードしてください。

①index.html

②style.css

上の2種類のファイルがダウンロードされたと思います。

これを同じフォルダに保存してもらいます。

<画像>

保存が終わったら、index.htmlを開いてみます。

<画像>

こんな表示になったらOKです。

このレイアウトはレスポンシブ2カラムレイアウトというレイアウトです。

参考に、画面幅を小さくしていくと、どこかで2列目のサイドバーが一列目に回り込む様子がわかります。

<画像>

これは、スマホ用に横幅767px以下の画面幅の場合は2列だコンテンツが見にくくなってしますので2列ではなく1列に変更するようにデザインを調整しているからです。

これを「レスポンシブ」といいます。

なぜ2カラムレイアウトを推奨するのか

これは、例えば2CHまとめブログや大手ニュースサイトでは