Web Design Leaves

Google Map をレスポンシブに対応させる方法のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください（2018年7月30日） 目次 概要 サンプル 参考サイト：「How …

続きを読む

Youtube（iframe 要素）をレスポンシブに対応させる方法のメモ。 概要 iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。 参考にしたサイト：「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」 サンプル Youtu…

続きを読む

Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup …

続きを読む

以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/開閉式ナビゲーションメニュー」 基本的（単純）なレスポンシブメニュー（Menu 部分をクリックするとメニューが展開されて表示されるようなメニュー）の作成に関するメモ。 PC などでの表示（メニューは横並び） ヘッダ部分の「960×240」は特に…

続きを読む

スクリーンサイズに合わせてフォントサイズを変更方法のメモ。（2018/1/20 更新） 以下もよろしかったらご覧ください。 「レスポンシブ Web デザイン 作成資料」 文字のレスポンシブ対応 レスポンシブ・タイプセッティング 画面幅（ウインドウサイズ）によって文字サイズを変化させる手法をレスポンシブ・タイプセッティングと言います。レスポンシブ Web デザ…

続きを読む

以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/レスポンシブイメージ」 スクリーンサイズに適した画像を読み込む方法のメモ。 １つの大きな画像をフルードイメージ（下記）で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フル…

続きを読む

Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 デバイスピクセル比（device-pixel-ratio） 画像の1ピクセルをデバイスで何ピクセルとして描画するかを表した値。この比率を利用することで、高解像度のディス…

続きを読む

レスポンシブデザインで使える CSS グリッドシステムを探していたところ見つけた、おそらく一番シンプルで軽量だと思える「PocketGrid」に関するメモとドキュメンテーションの一部和訳。 グリッドデザイン用の CSS のみでできていて余計なものは一切なし。その CSS ではクラス名に他のフレームワークでよく使用される「grid」、「row」 や「col」を…

続きを読む

Bootstrap 4 に関しては以下をご覧ください。 Bootstrap4 の使い方 Bootstrap 3 を WordPress で使った際のメモ。 目次 Bootstrap 3 のインストール Bootstrap の「Getting started」ページで「Download Bootstrap」をクリックして Bootstrap 3 をダウンロード…

続きを読む