「レスポンシブWEBデザインテンプレート(スタイルシートで複数記述編)」の編集履歴(バックアップ)一覧はこちら

レスポンシブWEBデザインテンプレート(スタイルシートで複数記述編)」(2015/10/09 (金) 22:26:05) の最新版変更点

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

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

一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事 ~ ~ 目次 #contents ~ ~ ---- ~ *HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>レスポンシブWEBデザインテンプレート</title> </head> <body> </body> </html> *CSS ***スマホ(縦横共通),iPad(縦横共通),iPhone(高密度デバイス),普通PC,高解像度PC こちらの方は共通の部分もあるため、コードはコードは少くなります。 @charset "utf-8"; /* iphone6などの解像度密度の高いデバイス ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { body{ background: #F00; } } /* スマートフォン (縦横向き両対応) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body{ background: #0F0; } } /* iPad (縦横向き両対応) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { body{ background: #00F; } } /* デスクトップやノートPC ----------- */ @media only screen and (min-width : 1224px) { body{ background: #FF0; } } /* 高解像度ディスプレイ ----------- */ @media only screen and (min-width : 1824px) { body{ background: #F0F; } } ***スマホ(縦横別),,iPad(縦横別),iPhone(高密度デバイス)普通PC,高解像度PC こちらの方は別々に記述するためコードが多くなります。 @charset "utf-8"; /* iphone6などの解像度密度の高いデバイス ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { body{ background: #F00; } } /* スマートフォン (縦向き) ----------- */ @media only screen and (max-width : 320px) { body{ background: #0F0; } } /* スマートフォン (横向き) ----------- */ @media only screen and (min-width : 321px) { body{ background: #00F; } } /* iPad (縦向き) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body{ background: #FF0; } } /* iPad (横向き) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body{ background: #F0F; } } /* デスクトップやノートPC ----------- */ @media only screen and (min-width : 1224px) { body{ background: #0FF; } } /* 高解像度ディスプレイ ----------- */ @media only screen and (min-width : 1824px) { body{ background: #DDD; } } *まとめ お好きな方をどうぞ。色々なデバイスで確認してみてください。 参考記事:http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事 ~ ~ 目次 #contents ~ ~ ---- ~ *HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>レスポンシブWEBデザインテンプレート</title> </head> <body> </body> </html> *CSS ***スマホ(縦横共通),iPad(縦横共通),iPhone(高密度デバイス),普通PC,高解像度PC こちらの方は共通の部分もあるため、コードは少くなります。 @charset "utf-8"; /* iphone6などの解像度密度の高いデバイス ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { body{ background: #F00; } } /* スマートフォン (縦横向き両対応) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body{ background: #0F0; } } /* iPad (縦横向き両対応) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { body{ background: #00F; } } /* デスクトップやノートPC ----------- */ @media only screen and (min-width : 1224px) { body{ background: #FF0; } } /* 高解像度ディスプレイ ----------- */ @media only screen and (min-width : 1824px) { body{ background: #F0F; } } ***スマホ(縦横別),,iPad(縦横別),iPhone(高密度デバイス)普通PC,高解像度PC こちらの方は別々に記述するためコードが多くなります。 @charset "utf-8"; /* iphone6などの解像度密度の高いデバイス ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { body{ background: #F00; } } /* スマートフォン (縦向き) ----------- */ @media only screen and (max-width : 320px) { body{ background: #0F0; } } /* スマートフォン (横向き) ----------- */ @media only screen and (min-width : 321px) { body{ background: #00F; } } /* iPad (縦向き) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body{ background: #FF0; } } /* iPad (横向き) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body{ background: #F0F; } } /* デスクトップやノートPC ----------- */ @media only screen and (min-width : 1224px) { body{ background: #0FF; } } /* 高解像度ディスプレイ ----------- */ @media only screen and (min-width : 1824px) { body{ background: #DDD; } } *まとめ お好きな方をどうぞ。色々なデバイスで確認してみてください。 参考記事:http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

表示オプション

横に並べて表示:
変化行の前後のみ表示: