TAG : レスポンシブ

htmlcss Google Map をレスポンシブ対応に

2014年2月25日

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

続きを読む

htmlcss Youtube (iframe) をレスポンシブ対応に

2014年2月25日

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

続きを読む

jquery Magnific Popup を使ってみる

2014年2月7日

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

続きを読む

htmlcss レスポンシブメニュー

2013年12月7日

基本的(単純)なレスポンシブメニュー(Menu 部分をクリックするとメニューが展開されて表示されるようなメニュー)の作成に関するメモ。 PC などでの表示(メニューは横並び) ヘッダ部分の「960×240」は特に意味はなし。ダミー画像。 スマートフォンなどでの表示 Menu 部分をクリック(タッチ)すると展開される HTML の記述 head 要素…

続きを読む

htmlcss スクリーンサイズに合わせてフォントサイズを変更

2013年9月19日

スクリーンサイズに合わせてフォントサイズを変更方法のメモ。(2018/1/20 更新) 文字のレスポンシブ対応 レスポンシブ・タイプセッティング 画面幅(ウインドウサイズ)によって文字サイズを変化させる手法をレスポンシブ・タイプセッティングと言います。レスポンシブ Web デザインでは、以下の理由で小画面のレイアウトの文字を小さめに指定することが多いです。 …

続きを読む

htmlcss レスポンシブイメージ

2013年9月18日

スクリーンサイズに適した画像を読み込む方法のメモ。 1つの大きな画像をフルードイメージ(下記)で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フルードイメージ(Fluid Image) ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。 ウィンドウサイズより大…

続きを読む

htmlcss Viewport と Media Queries に関するメモ

2013年9月16日

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

続きを読む

htmlcss PocketGrid を使ってみる

2013年9月15日

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

続きを読む

wordpress Bootstrap 3 を WordPress で使ってみる

2013年8月26日

Bootstrap 3 を WordPress で使った際のメモ。 目次 Bootstrap 3 のインストール Bootstrap の「Getting started」ページで「Download Bootstrap」をクリックして Bootstrap 3 をダウンロード。 「bootstrap-3.0.0-dist.zip」を解凍すると「dist」というフ…

続きを読む