WordPressによるレスポンシブウェブ
* メニューボタン

ホーム

*

このサイトはWordPressを使って、スマートホンやタブレット.パソコンなどマルチデバイスでホームページ表示を最適化するためのサンプル&学習のサイトです。

このサイトのレスポンシブの状況は、マウスでWindowの伸縮で確認出来ますが、機種毎にどのように表示されるかを確認する方法を以下にお薦めします。

Google Chromeを起動し、当サイトの3要素のページを表示し、Window幅を伸縮しながらて試してみて下さい。

レスポンシブウェッブの作成に必須な技術は、「メディアクエリ(Media Queries」・「フリードグリッド(Fluid Grid)」・「フルードイメージ(Fruid Image)」の3つの要素です。中でもやっかいなのはメディアクエリーで、基本的な理解は出来ても実際に使うと思うようなレイアウトにならず、とても苦労させられました。

*

当サイトのブレークポイント
☆スマホ:480px 以下
☆タブレット:481px – 768px
☆パソコン:769px 以上
レスポンシブ・3つの要素
1.メディアクエリー
2.フルードグリッド
3.フルードイメージ
Window Size
Width = px
Height = px
Screen size automatically
公開日:2014/11/3
最新日:2018/2/24 SSL対応

上部右端のボックス(Window Size)は、表示している画面サイズのモニターです。右又は左端のウインドウ境界線をドラッグで伸縮させると横幅widthが自動で更新表示されます。