HTML, CSS 及びその他全般(他のカテゴリー以外)のメモ
2014年2月25日
Google Map をレスポンシブに対応させる方法のメモ。 2018年7月16日から「Google Maps Platform」という新しいサービスになり、API の使い方等が変更になりました。新しい API の使い方等については「Google Maps API の使い方」をご覧ください(2018年7月30日) 目次 概要 サンプル 参考サイト:「How …
2014年2月25日
Youtube(iframe 要素)をレスポンシブに対応させる方法のメモ。 概要 iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。 参考にしたサイト:「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」 サンプル Youtu…
2014年1月15日
ブラウザの言語設定を元にその言語のファイルを表示させる方法のメモ。(不確かな内容があります) 目次 概要 トップのフォルダに以下のような英語、日本語のトップページがある場合。 英語:http://www.mysite.com/index.html 日本語:http://www.mysite.com/indexjp.html http://www.mysite…
2013年12月7日
以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/開閉式ナビゲーションメニュー」 基本的(単純)なレスポンシブメニュー(Menu 部分をクリックするとメニューが展開されて表示されるようなメニュー)の作成に関するメモ。 PC などでの表示(メニューは横並び) ヘッダ部分の「960×240」は特に…
2013年12月2日
acmailer3 を使ってみた際のメモ。「不着メール設定」で少しはまった。今回試した共用サーバー(inMotion)では、「.forward」の機能が使えないことが判明したので cPanel の E-mail の「Forwarders」を利用。 ダウンロード 以下のページからダウンロード(今回ダウンロードしたバージョン:acmailer3.8.14 正式版…
2013年11月28日
IE10 では、開発者ツール(F12)のドキュメントモードでバージョンを選ぶとエミュレーションしてくれていたが、IE11 では、バージョンを選択しただけでは正しく表示されない。 検索したところ、以下の記事を見つけたので参考にさせていただいた。 Internet Explorer11にてF12 開発者ツールのエミュレーションが使いづらい件(N2P) Windo…
2013年9月26日
HTTP ヘッダ(Expires ヘッダ)を追加して、ファイルをブラウザにキャッシュさせるように .htaccess にキャッシュの期限を指定しているのに、YSlow の評価を見ると何故か JavaScript だけがキャッシュされていなかったのでその解決方法のメモ。 結論としては、ExpiresByType での JavaScript のファイルタイプの指…
2013年9月21日
いつも忘れてしまうのでメモ。詳細は以下のサイトで。 参考にさせていただいたサイト:hail2u.net「floatで並べたリストのセンタリング」 以下のように、li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいかない。 以下のようにすると中央寄せできる。 ul …
2013年9月19日
スクリーンサイズに合わせてフォントサイズを変更方法のメモ。(2018/1/20 更新) 以下もよろしかったらご覧ください。 「レスポンシブ Web デザイン 作成資料」 文字のレスポンシブ対応 レスポンシブ・タイプセッティング 画面幅(ウインドウサイズ)によって文字サイズを変化させる手法をレスポンシブ・タイプセッティングと言います。レスポンシブ Web デザ…
2013年9月18日
以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/レスポンシブイメージ」 スクリーンサイズに適した画像を読み込む方法のメモ。 1つの大きな画像をフルードイメージ(下記)で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フル…