HTML/CSS

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

レスポンシブイメージ

2013年9月18日

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

続きを読む

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

2013年9月16日

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

続きを読む

Viewport と Media Queries に関するメモ

2013年9月16日

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

続きを読む

PocketGrid を使ってみる

2013年9月15日

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

続きを読む

Safari のフォントを調整する

2013年9月12日

Webkit 系のブラウザでは、大きな文字をきれいに表示するためにアンチエイリアスが強くかかり、文字が太って表示されてしまいもっさりした感じに見えることがある。 このため Safari では他のブラウザと比較するとタイトルなどが太く表示されてしまうことがある。 「-webkit-font-smoothing」は、Webkit 系ブラウザ(Safari/Goo…

続きを読む

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

2013年9月2日

Bootstrap(v3.0.0) には以下のようなボタンなどにあらかじめ用意されたオプション(クラス)がある。 btn-primary(青色) btn-success(緑色) btn-info(水色) btn-warning(オレンジ色) btn-danger(赤色) これらを独自のクラス名で使ったり、色を変更するなどのカスタマイズをする際のメモ。LESS…

続きを読む

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

2013年9月1日

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

続きを読む

Web フォントを簡単にテストできる typewonder

2013年8月18日

typewonder は既存の Web ページを、指定した Web フォントで表示してくれるサービス。使い方はとても簡単。http://typewonder.com/(Typewonder Beta)にアクセスして、試してみたいページのアドレスを入力し、フォントを指定するだけ。 「Typewonder Beta(http://typewonder.com/)…

続きを読む

Prepros で Compass を使ってみる

2013年8月16日

Prepros をインストールして Compass を使った際のメモ。 config.rb の設定が反映されない? 追加情報 2013年8月31日 Version 3.0.0 で config.rb の設定が反映されるようになりました。 昨日 Prepros を起動したところ画面上部に「贈り物」のようなオレンジ色のアイコンが表示されていたのでクリックすると、…

続きを読む

Zen-coding (Emmet) を使ってみる

2013年8月15日

Zen-coding (Emmet) に関するメモ。 Zen-Codingは、HTML と CSSをショートカットや短縮記法でコードを書くことができるライブラリで、多くのアプリケーションで提供されている。そのZen-Codingが、「Emmet」とリネームされて2013年2月24日に正式リリースされた。 エディタやオーサリングツールなどによって使用できるメニ…

続きを読む