Web Design Leaves

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

続きを読む

ブラウザの言語設定を元にその言語のファイルを表示させる方法のメモ。（不確かな内容があります） 目次 概要 トップのフォルダに以下のような英語、日本語のトップページがある場合。 英語：http://www.mysite.com/index.html 日本語：http://www.mysite.com/indexjp.html http://www.mysite…

続きを読む

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

続きを読む

acmailer3 を使ってみた際のメモ。「不着メール設定」で少しはまった。今回試した共用サーバー（inMotion）では、「.forward」の機能が使えないことが判明したので cPanel の E-mail の「Forwarders」を利用。 ダウンロード 以下のページからダウンロード（今回ダウンロードしたバージョン：acmailer3.8.14 正式版…

続きを読む

IE10 では、開発者ツール（F12）のドキュメントモードでバージョンを選ぶとエミュレーションしてくれていたが、IE11 では、バージョンを選択しただけでは正しく表示されない。 検索したところ、以下の記事を見つけたので参考にさせていただいた。 Internet Explorer11にてF12 開発者ツールのエミュレーションが使いづらい件（N2P） Windo…

続きを読む

HTTP ヘッダ（Expires ヘッダ）を追加して、ファイルをブラウザにキャッシュさせるように .htaccess にキャッシュの期限を指定しているのに、YSlow の評価を見ると何故か JavaScript だけがキャッシュされていなかったのでその解決方法のメモ。 結論としては、ExpiresByType での JavaScript のファイルタイプの指…

続きを読む

いつも忘れてしまうのでメモ。詳細は以下のサイトで。 参考にさせていただいたサイト：hail2u.net「floatで並べたリストのセンタリング」 以下のように、li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいかない。 以下のようにすると中央寄せできる。 ul …

続きを読む

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

続きを読む

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

続きを読む

文字周り（タイポグラフィ）の基本設定 html 文書全体の font-size, font-family, line-height を記述する。 ほとんどのブラウザーのフォントサイズは標準で「16px」なので html 文書全体の font-size は100% を指定 日本語のテキストでは一般的にフォントサイズの1.5倍が読みやすい行の高さとされている。 …

続きを読む