「レスポンシブWebデザインについて」の編集履歴（バックアップ）一覧はこちら

レスポンシブWebデザインについて - (2015/05/22 (金) 17:21:50) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

今日はレスポンシブウェブデザインの基礎について書いていきたいと思います。~
まずはレスポンシブウェブデザインの意味について。~
レスポンシブウェブデザインとは、ひとつのHTMLでＰＣ、タブレット、スマートフォンなどの様々なデバイスに対応できるウェブサイトの作り方をいいます。~
主にCSSで調整をしていきます。一番簡単な方法は@media(){}を利用する方法です。~
これは、画面のサイズを指定して、画面のサイズが○○以下、以上であればこのスタイルシートを適用すると指定できるプロパティです。○○は()の中に入れます。(○○をブレイクポイントという)今回も実際の例を挙げて説明してみます。~

例）パソコンで閲覧する場合は図1のように表示させたいが、スマートフォンで表示させる場合は、図2のように表示させたい。

図1
#image(width=150,after.png)
図2
#image(width=150,before.png)


まず、図1と図2は「boxの並列、分割について」の記事で使ったものと同じものです。
768ｐｘ(iPadの画面)をブレークポイントに設定したいと思います。つまり、iPad以上の画面のサイズを持ったデバイスで見ると図1のように表示されるという事です。

 @media(min-width: 768px){
  
 .X:after {
      content: "";
      display: block;
      clear: both;
 }
 box2 {
     float: left;
     width: 50%;
 }
 box3{
     float: left;
     width: 50%;
 }
 }

と記述します。これで768ｐｘ以上ではこの大括弧内のＣＳＳが適用されます。
また、768px以下の時のために図2のシンプルなコードを通常通り書いておけばその通り表示されます。

今日はレスポンシブウェブデザインの基礎について書いていきたいと思います。~
まずはレスポンシブウェブデザインの意味について。~
レスポンシブウェブデザインとは、ひとつのHTMLでＰＣ、タブレット、スマートフォンなどの様々なデバイスに対応できるウェブサイトの作り方をいいます。~
主にCSSで調整をしていきます。一番簡単な方法は@media(){}を利用する方法です。~
これは、画面のサイズを指定して、画面のサイズが○○以下、以上であればこのスタイルシートを適用すると指定できるプロパティです。○○は()の中に入れます。(○○をブレイクポイントという)今回も実際の例を挙げて説明してみます。~

例）パソコンで閲覧する場合は図1のように表示させたいが、スマートフォンで表示させる場合は、図2のように表示させたい。

図1
#image(width=150,after.png)
図2
#image(width=150,before.png)


まず、図1と図2は「boxの並列、分割について」の記事で使ったものと同じものです。
768ｐｘ(iPadの画面)をブレークポイントに設定したいと思います。つまり、iPad以上の画面のサイズを持ったデバイスで見ると図1のように表示されるという事です。

 @media(min-width: 768px){
  
 .X:after {
      content: "";
      display: block;
      clear: both;
 }
 box2 {
     float: left;
     width: 50%;
 }
 box3{
     float: left;
     width: 50%;
 }
 }

と記述します。これで768ｐｘ以上ではこの大括弧内のＣＳＳが適用されます。
一番最後の行の}は、@mediaの閉括弧です。
また、768px以下の時のために図2のシンプルなコードを通常通り書いておけばその通り表示されます。