ResponsiveDesign をテンプレートにして作成

開始行:
*レスポンシブデザイン ~ レスポンシブデザインとは、PC、タブレット、スマートフォン... PCとモバイル機器とで、ブラウザの基本仕様が異なっていた時... レスポンシブデザインの技術を使うと、ブラウザのウインドウ... ~ ***CONTENTS #contents2_1 ~ **はじめに 多くのモバイル機器のブラウザは、実際の表示領域幅ではなく... しかし、これでは見づらいので、特にスマホなどの小さな画面... スマートフォン、タブレット等での表示幅・拡大率等の設定は... <meta name="viewport" content="width=device-width, initi... この記述は、スマートフォン、タブレット等での表示幅・拡大... ~ ~ **レスポンシブデザインの実現方法 一般に、''HTML側の meta タグで viewport指定を行うとともに... ~ ***HTMLの設計 -はじめに、HTMLファイルの＜head＞内に＜meta＞タグを使って... <meta name="viewport" content="width=device-width, initi... -閲覧するデバイスの画面幅に応じてレイアウトを変更できるよ... 　したがって、CSSの変更のみでレイアウト変更が簡単にできる... ~ ***CSSの選別 デバイスのタイプと特性に応じて、CSSファイルを''分けて読ま... -HTML＞head の linkタグに media属性を記述して選別 -親CSS において子CSS を @import する際に選別 -CSS内の @media で書き分ける 参考： [[CSS/MediaQueries]] ~ ***HTML＞head の linkタグに media属性を記述して選別 -以下の記述を HTML の link タグで行います。 <link rel="stylesheet" href="読み込むファイルのパス" med... -例）640px以下の場合は mobile.css を読み込む <link rel="stylesheet" href="mobile.css" media="screen a... ~ ***親CSS において子CSS を @import する際に選別 -CSSを分割・階層化するとともに、以下の記述を親となるCSS ... @import url( '読み込むファイル' ) メディアタイプの指定 a... -記述例）640px以下の場合は mobile.css を読み込む @import url('mobile.css') screen and (max-width: 640px); -具体例）規模の大きなサイトのスタイル開発を複数のスタッフ... ''main.css'' /* CSS の文字コード */ @charset "UTF-8"; /* 共通CSS */ @import url('base.css') screen; /* Mobileサイズのみに適用 */ @import url('mobile.css') screen and (max-width: 768px); /* PCサイズのみに適用 */ @import url('pc.css') screen and (min-width: 769px); /* 当該サイト固有のテーマ（追加のCSS）*/ @import url('theme.css') screen; /* プリンタ出力用のCSS */ @import url("print.css") print; ~ ***CSS内の @media で書き分ける -以下の記述を CSS ファイル内の必要な箇所で行います。 @media メディアタイプの指定 and (メディア特性の指定) { /* 当該デバイス用のスタイル記述 */ } -例）640px以下の場合に、フォントサイズを小さく変更する。 h1 { ： font-size : 2rem; } @media screen and (max-width: 640px) { h1 { font-size : 1.2rem; } } ~ ~ **デバイス優先順位とCSSの記載順序 ***レスポンシブデザインにおける優先順位の考え方 -''モバイルファースト'' スマートフォンのCSSを基本として、大きな画面での閲覧を例外... -PCファースト PC用のCSSを基本として、徐々に小さな画面での閲覧に適したCS... ~ ***記載順序 CSSでは読み込み順にスタイルが適用されていきます。先に読み... 　複数のファイルに書き分けた場合は、後半で読み込んだスタ... 一般に、以下のような順序で読み込むようにすると、スタイル... -1) デバイスに関係なく、共通するスタイル情報 -2) デザインがシンプル（縦に直線的に並ぶ）なモバイル用の... -3) デザインが２次元的で複雑になるPC用のスタイル ~ ***記載例 例えば、モバイル用のスタイルを基本として、PCの画面サイズ... /* Mobile サイズ（基本） */ nav ul { 　　　　： flex-direction: column; } main { 　　　　： width: 100%; } /* PC サイズ */ @media only screen and (min-width: 640px) { nav ul { flex-direction: raw; } main { width: 60%; } } ~ ~ **その他 ***ブレイクポイントについて デザインを切り替える画面幅のポイントについては、標準的な... 時代とともにデバイスのサイズは変わるので、px単位だと、そ... @media only screen and (max-width: 36em) {・・・・・・} ~ ***画面幅ではなく、縦長か横長かで区別する場合 縦長か横長かでデザインを分ける場合は、以下のように区別し... -PC/スマホの横向き指定 @media only screen and (orientation:landscape) { /* 横向き用のスタイル */ } ~ -PC/スマホの縦向き指定 @media only screen and (orientation:portrait) { /* 縦向き用のスタイル */ } ~ ***補足 -HTMLタグ内に style属性を使ってCSSを書き込んでしまうと、... -スマートフォンからのWebアクセスが PC を上回っています。... https://developers.google.com/webmasters/mobile-sites/?hl... -以下、サイトがモバイル表示に関して適正か否かをチェックで... [[Googleモバイルフレンドリーテスト>https://www.google.com... -フォントもロゴもレスポンシブに・・ [[Google:レスポンシブ・フォント]]　[[Google:レスポンシブ... ~ ~ **サンプル 以下に２つの事例を紹介します。見た目と挙動は同じですが、C... ~ ***事例１ ひとつのCSSファイル（style.css）をモバイルファーストで記... -DEMO：https://koichi-inoue.github.io/responsive01/ -CODE：https://github.com/koichi-inoue/responsive01 さらに [[jQuery]] の slideToggle() を用いたバージョン -DEMO：https://koichi-inoue.github.io/responsive01_JS/ -CODE：https://github.com/koichi-inoue/responsive01_JS さらに サブメニュー表示を追加したバージョン -DEMO：https://koichi-inoue.github.io/responsive03_JS/ -CODE：https://github.com/koichi-inoue/responsive03_JS ~ ***事例２ CSSファイルを分割読み込みする事例です。HTMLで読み込むのは... -DEMO：https://koichi-inoue.github.io/responsive02/ -CODE：https://github.com/koichi-inoue/responsive02 さらに [[jQuery]] の slideToggle() を用いたバージョン -DEMO：https://koichi-inoue.github.io/responsive02_JS/ -CODE：https://github.com/koichi-inoue/responsive02_JS ~ ***参考事例 メディアクエリーを使わずに Flexbox のみでスマホに対応させ... -[[DEMO>https://design.kyusan-u.ac.jp/SampleSite/Flexbox0... ~ ~ ~

終了行:
*レスポンシブデザイン ~ レスポンシブデザインとは、PC、タブレット、スマートフォン... PCとモバイル機器とで、ブラウザの基本仕様が異なっていた時... レスポンシブデザインの技術を使うと、ブラウザのウインドウ... ~ ***CONTENTS #contents2_1 ~ **はじめに 多くのモバイル機器のブラウザは、実際の表示領域幅ではなく... しかし、これでは見づらいので、特にスマホなどの小さな画面... スマートフォン、タブレット等での表示幅・拡大率等の設定は... <meta name="viewport" content="width=device-width, initi... この記述は、スマートフォン、タブレット等での表示幅・拡大... ~ ~ **レスポンシブデザインの実現方法 一般に、''HTML側の meta タグで viewport指定を行うとともに... ~ ***HTMLの設計 -はじめに、HTMLファイルの＜head＞内に＜meta＞タグを使って... <meta name="viewport" content="width=device-width, initi... -閲覧するデバイスの画面幅に応じてレイアウトを変更できるよ... 　したがって、CSSの変更のみでレイアウト変更が簡単にできる... ~ ***CSSの選別 デバイスのタイプと特性に応じて、CSSファイルを''分けて読ま... -HTML＞head の linkタグに media属性を記述して選別 -親CSS において子CSS を @import する際に選別 -CSS内の @media で書き分ける 参考： [[CSS/MediaQueries]] ~ ***HTML＞head の linkタグに media属性を記述して選別 -以下の記述を HTML の link タグで行います。 <link rel="stylesheet" href="読み込むファイルのパス" med... -例）640px以下の場合は mobile.css を読み込む <link rel="stylesheet" href="mobile.css" media="screen a... ~ ***親CSS において子CSS を @import する際に選別 -CSSを分割・階層化するとともに、以下の記述を親となるCSS ... @import url( '読み込むファイル' ) メディアタイプの指定 a... -記述例）640px以下の場合は mobile.css を読み込む @import url('mobile.css') screen and (max-width: 640px); -具体例）規模の大きなサイトのスタイル開発を複数のスタッフ... ''main.css'' /* CSS の文字コード */ @charset "UTF-8"; /* 共通CSS */ @import url('base.css') screen; /* Mobileサイズのみに適用 */ @import url('mobile.css') screen and (max-width: 768px); /* PCサイズのみに適用 */ @import url('pc.css') screen and (min-width: 769px); /* 当該サイト固有のテーマ（追加のCSS）*/ @import url('theme.css') screen; /* プリンタ出力用のCSS */ @import url("print.css") print; ~ ***CSS内の @media で書き分ける -以下の記述を CSS ファイル内の必要な箇所で行います。 @media メディアタイプの指定 and (メディア特性の指定) { /* 当該デバイス用のスタイル記述 */ } -例）640px以下の場合に、フォントサイズを小さく変更する。 h1 { ： font-size : 2rem; } @media screen and (max-width: 640px) { h1 { font-size : 1.2rem; } } ~ ~ **デバイス優先順位とCSSの記載順序 ***レスポンシブデザインにおける優先順位の考え方 -''モバイルファースト'' スマートフォンのCSSを基本として、大きな画面での閲覧を例外... -PCファースト PC用のCSSを基本として、徐々に小さな画面での閲覧に適したCS... ~ ***記載順序 CSSでは読み込み順にスタイルが適用されていきます。先に読み... 　複数のファイルに書き分けた場合は、後半で読み込んだスタ... 一般に、以下のような順序で読み込むようにすると、スタイル... -1) デバイスに関係なく、共通するスタイル情報 -2) デザインがシンプル（縦に直線的に並ぶ）なモバイル用の... -3) デザインが２次元的で複雑になるPC用のスタイル ~ ***記載例 例えば、モバイル用のスタイルを基本として、PCの画面サイズ... /* Mobile サイズ（基本） */ nav ul { 　　　　： flex-direction: column; } main { 　　　　： width: 100%; } /* PC サイズ */ @media only screen and (min-width: 640px) { nav ul { flex-direction: raw; } main { width: 60%; } } ~ ~ **その他 ***ブレイクポイントについて デザインを切り替える画面幅のポイントについては、標準的な... 時代とともにデバイスのサイズは変わるので、px単位だと、そ... @media only screen and (max-width: 36em) {・・・・・・} ~ ***画面幅ではなく、縦長か横長かで区別する場合 縦長か横長かでデザインを分ける場合は、以下のように区別し... -PC/スマホの横向き指定 @media only screen and (orientation:landscape) { /* 横向き用のスタイル */ } ~ -PC/スマホの縦向き指定 @media only screen and (orientation:portrait) { /* 縦向き用のスタイル */ } ~ ***補足 -HTMLタグ内に style属性を使ってCSSを書き込んでしまうと、... -スマートフォンからのWebアクセスが PC を上回っています。... https://developers.google.com/webmasters/mobile-sites/?hl... -以下、サイトがモバイル表示に関して適正か否かをチェックで... [[Googleモバイルフレンドリーテスト>https://www.google.com... -フォントもロゴもレスポンシブに・・ [[Google:レスポンシブ・フォント]]　[[Google:レスポンシブ... ~ ~ **サンプル 以下に２つの事例を紹介します。見た目と挙動は同じですが、C... ~ ***事例１ ひとつのCSSファイル（style.css）をモバイルファーストで記... -DEMO：https://koichi-inoue.github.io/responsive01/ -CODE：https://github.com/koichi-inoue/responsive01 さらに [[jQuery]] の slideToggle() を用いたバージョン -DEMO：https://koichi-inoue.github.io/responsive01_JS/ -CODE：https://github.com/koichi-inoue/responsive01_JS さらに サブメニュー表示を追加したバージョン -DEMO：https://koichi-inoue.github.io/responsive03_JS/ -CODE：https://github.com/koichi-inoue/responsive03_JS ~ ***事例２ CSSファイルを分割読み込みする事例です。HTMLで読み込むのは... -DEMO：https://koichi-inoue.github.io/responsive02/ -CODE：https://github.com/koichi-inoue/responsive02 さらに [[jQuery]] の slideToggle() を用いたバージョン -DEMO：https://koichi-inoue.github.io/responsive02_JS/ -CODE：https://github.com/koichi-inoue/responsive02_JS ~ ***参考事例 メディアクエリーを使わずに Flexbox のみでスマホに対応させ... -[[DEMO>https://design.kyusan-u.ac.jp/SampleSite/Flexbox0... ~ ~ ~

ページ名: