NO IMAGE

意外と奥が深いレスポンシブ・デザインかな

1920横幅1920ピクセルでの表示です。

サムネイル画像の数が少ないので、下部に空間が出来てしまいます。

サムネイル画像のサイズを少し大きくすると、さらに良いのかも知れませんが、・・・そうすると、さらに複雑に・・・。


1780ブラウザの幅を狭めて行くと、サムネイル画像が自動的に移動して、表示がかわります。

実際は、画像移動がアニメーション表示されます。

jQuery Masonry(メイスンリー)による可変グリッドレイアウトです。



1638jQuery Masonryでは、入れ物となるclass=”layoout”タグの中に、要素となるclass=”unit”タグを複数存在させて記述します。ブラウザの幅を変更したとき、その要素を自動的に再配置します。

入れ物(class=”layoout”タグ)の横幅(width)は、値を指定してやる必要がある・・・width:auto;ではダメである・・・ため、CSSメディアクエリー@mediaで、端末(ブラウザ)の横幅サイズによって、class=”layoout”タグの横幅(width)を変更しています。


1492例えば、ここでは、
@media screen and (max-width: 1618px) {
.layout-snapshot {
width: 1152px;
}
}
と記述した部分が適用されています。

サムネイル画像の横幅が144pxなので、8枚並べると、144×8=1152pxです。

max-widthはこれにメニュー表示域の横幅を足してます。

1348最近のノートPCで多い1366ピクセルの横幅では、この辺りの表示となります。

このように、デバイスの表示能力や、閲覧者によるブラウザのサイズ(横幅)変更に合わせて、自動的にコンテンツのサイズを変えたり、表示位置を変えたりするのが、レンポンシブ・デザイン(レスポンシブ・レイアウト)です。


1204jQuery Masonryは可変グリットレイアウトと呼ばれており、うまく利用すれば、かなり素敵なサイトを創れそうな感じがします。

なにも、メディアクエリ分岐や、jQuery Masonryや、後述のjQuery Swpnavを使うことだけが、レスポンシブ・デザインの要ではないのでしょうが・・・。

まあ、現在のところ、これらをうまく使って制作して行こうかなあ・・・と思っているところです。


1064jQuery Masonryによる可変グリットレイアウトは「スナップショット」だけでなく、「ホームページの改装履歴」「医院の設備-検査機器」などでも実装しています。

最終的には「トップページ-ピックアップ」も含め、より多くのページに実装したいと思っています。


920横幅960ピクセルぐらいまでは左メニューが表示されます。

FullHDモニタなら、ブラウザで横幅半分に表示すると、これに近い表示となります。

メニューが非表示になると、記事中の画像をドラッグ&ドロップできなくなる関係から、この表示幅ではメニューを出したままにしたかったのです。


794横幅800ピクセルのタブレット端末では、左メニューが隠され、コンテンツ優先となり、この辺りの表示となるでしょう。

この開閉メニューは、jQuery Swpnav(swpnav.js)によるものです。

メニューを表示させるためには、左上に表示されたボタンをクリックします。タッチパネルなら、ボタンをタップするか、コンテンツを右側へドラッグしてメニューを出すことができます。

左メニューが消えた分スペースができたので、サムネイル画像の列数は上の4列から5列に増やしています。


656高解像度のスマートフォンを横に持つと、この辺りまで表示されます。

トップページなら、この辺までは、アクセスカウンタを表示しています。


494iPhoneを横に持った際の表示幅に近いです。

トップページでは、メディアクエリで横幅を判断し、アクセスカウンタを非表示(display:none;)にしています。


348iPhone(縦画面)やスマートフォンで表示した表示幅に近いです。

ここまで来たら、マップリンク用の画像(青森県弘前市)も非表示(display:none;)にしています。

また、スマートフォン対応では、head部分で、viewpointの指定をすることも必要です。

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1″>

これを忘れると、小さな画面にPCで見たような表示となったりしてしまいます。