HTML/CSS

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

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

2013年9月26日

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

続きを読む

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

2013年9月21日

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

続きを読む

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

2013年9月19日

スクリーンサイズに合わせてフォントサイズを変更方法のメモ。フォントサイズや余白を「em」で指定して、メディアクエリーを使って、対応するスクリーンサイズの font-size を記述する。 px 単位の値を em に変換 レスポンシブなサイトを作成する際に、スクリーンサイズに合わせてフォントサイズも変えるには、全ての要素のフォントサイズや余白をスクリーンサイズごとに記述するのは大変なので、以下を全て「em」という単位で指定する。 font-size レイアウトの上下の margin レイアウトの上下の padding em は基準となる font-size…

続きを読む

レスポンシブイメージ

2013年9月18日

スクリーンサイズに適した画像を読み込む方法のメモ。 1つの大きな画像をフルードイメージ(下記)で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フルードイメージ(Fluid Image) ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。 ウィンドウサイズより大きい画像でも、ウィンドウサイズ(または親要素の幅)に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法 具体的には、img 要素に対して以下のスタイルを適用する。 HTML の記述…

続きを読む

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

2013年9月16日

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

続きを読む

Viewport と Media Queries に関するメモ

2013年9月16日

Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 デバイスピクセル比(device-pixel-ratio) 画像の1ピクセルをデバイスで何ピクセルとして描画するかを表した値。この比率を利用することで、高解像度のディスプレイでも通常の解像度のディスプレイと見た目のサイズが同じように表示される。 iPhone 3GS:CSS ピクセルと物理ピクセルが一致しているので値は「1」 iPhone 4:CSS ピクセルを縦横…

続きを読む

PocketGrid を使ってみる

2013年9月15日

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

続きを読む

Safari のフォントを調整する

2013年9月12日

Webkit 系のブラウザでは、大きな文字をきれいに表示するためにアンチエイリアスが強くかかり、文字が太って表示されてしまいもっさりした感じに見えることがある。 このため Safari では他のブラウザと比較するとタイトルなどが太く表示されてしまうことがある。 「-webkit-font-smoothing」は、Webkit 系ブラウザ(Safari/Google Chrome/Android等)で文字のアンチエイリアス機能の設定をする CSS プロパティで、以下の値を指定することが可能。 -webkit-font-smoothing の値とその意味 値…

続きを読む

LESS を使って Bootstrap をカスタマイズ

2013年9月2日

Bootstrap(v3.0.0) には以下のようなボタンなどにあらかじめ用意されたオプション(クラス)がある。 btn-primary(青色) btn-success(緑色) btn-info(水色) btn-warning(オレンジ色) btn-danger(赤色) これらを独自のクラス名で使ったり、色を変更するなどのカスタマイズをする際のメモ。LESS のコンパイルには「Prepros」を使用。 準備 Bootstrap の LESS ファイルをダウンロード Bootstrap の「Getting started」ページの「Additional d…

続きを読む

CSSの拡張メタ言語 LESS の基本的な使い方のメモ

2013年9月1日

以下のサイトを参考にまとめた「LESS」の基本的な使い方のメモ。詳細(解説等)は以下のサイトを参考にしてください。 参考にさせていただいたサイト LESS 日本語ページ「The dynamic stylesheet language」 gihyo.jp 「LESSで3倍ラクするスマートフォンコーディング」 ネスト CSS のセレクタを入れ子にすることができる コンパイルされた CSS & コンビネータ 「&」には「& を指定した親要素に,& 以降のセレクタをつなげる」という意味がある。 「&」のあとにスペースを入…

続きを読む