HTML/CSS

HTML, CSS 及びその他全般(他のカテゴリー以外)のメモ

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

2014年2月25日

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

続きを読む

Apache「MultiViews」オプションを使って2ヶ国語対応

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」は特に…

続きを読む

acmailer 3 を使ってみる(不着メール設定)

2013年12月2日

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

続きを読む

IE11 のエミュレーション

2013年11月28日

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

続きを読む

ExpiresByType が JavaScript に対して効かない?

2013年9月26日

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

続きを読む

floatで並べた li 要素の中央寄せ

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つの大きな画像をフルードイメージ(下記)で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フル…

続きを読む

CSS での文字周りの基本的な設定

2013年9月16日

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

続きを読む