楽A

楽しくをモットーに気になる事や学んだ事を紹介する異種雑学サイト

サイト作成のためにレスポンシブレイアウトを学ぶ?!

001

レスポンシブレイアウトとは、サイトを見る画面幅に応じて横幅が拡大・縮小して最適なレイアウトにする方法です。

レスポンシブレイアウトでは、1つのHTMLファイルを、CSS3(Media Queries)によってPCサイズ、タブレットサイズ、スマートフォンサイズなど 横幅によってレイアウトを変える事ができます。

だから わざわざ PC用のサイトを作ったり、スマートフォン用のサイトを作らなくても、レスポンシブレイアウトを学べばいっぺんに作る事が出来るんです。

 

1つのHTMLファイルを、CSS3(Media Queries)によって、異なる画面サイズに応じてページのレイアウトをするので、異なる画面サイズ毎にHTML修正する必要が無いので 一度作れば 更新作業などが楽に出来ます。

しかし 最初のHTML・CSSの設計を行う際には、調整が難しくて大変です。

そして 画像などのファイルは、画面上での縮小になりますので、画像が多いとスマホなどでは、重くなる場合もあります。

 

〇レスポンシブレイアウト作り方について簡単に説明します。

WEBサイトを作る時は、HTMLファイルを作りながらCSS3でデザインを調整していきます。

基本は同じなんですが、横幅によって どのスタイルを使えって事を記述する必要があります。

@media screen and (min-width: 0px) and (max-device-width: 640px) {
※スタイルの記述(スマホ用 横幅が0px~640pxまでのスタイル)
}
@media screen and (min-width: 641px) and (max-device-width: 768px) {
スタイルの記述(タブレット用 横幅が641px~768pxまでのスタイル)
}
@media screen and (min-width: 769px) {
スタイルの記述(PC用 横幅が769以上のスタイル)
}

上記のようにCSS3(Media Queries)を設定して記述する必要があるって事です。

他にも IE8以下の為に設定する事などもありますので、もっと詳しくは下記のサイトで学んで下さい。

→ 必読!5分でわかる流行のレスポンシブWebデザインまとめ 制作編

002

私がレスポンシブレイアウトについて学んだサイトを紹介しておきます。

 

☆レスポンシブレイアウトについて学べるサイト

レスポンシブWebデザインの作り方(簡単設定方法)

レスポンシブWEBデザイン概論

Bootstrap3でさくっとレスポンシブ化してみる

CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう

CSSの基本 レスポンシブレイアウトのおさらい

上記のサイトでレスポンシブレイアウトについてある程度学べますね。

 

003

☆レスポンシブレイアウト テンプレート紹介

すぐに使いたい!レスポンシブWebデザイン対応の無料HTMLテンプレート10選

レスポンシブ対応のWordPressフリーテーマ素材まとめ

テンプレートを使う事で簡単にレスポンシブレイアウトのサイトを作る事も出来ますし、テンプレートの細部をみる事でレスポンシブレイアウトを作る為に いろいろな事が学べます。

 

004

☆レスポンシブレイアウトのサイトを探せ

レスポンシブWebデザインを集めたギャラリーサイト

レスポンシブレイアウトで どんなサイトを作れるのかを見て学べます。

 

☆もっと素敵なレスポンシブレイアウトサイトを作る為に

動きのあるグリッドレイアウトWebデザイン40個 + 無料プラグイン6個まとめ

レスポンシブなレイアウトに役立つ25個のjQueryプラグイン

レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル

レスポンシブレイアウトを使う事で いろいろなデバイスに対応したサイトを作る事が出来ます。

レスポンシブレイアウト チャレンジしてみてはいかがですか?

 - WEB