HTML/CSS

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

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日に正式リリースされた。 エディタやオーサリングツールなどによって使用できるメニ…

続きを読む

Sass の基本的な使い方のメモ

2013年8月15日

目次 更新:2016年5月20日 Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSS を便利に使えるように拡張した言語です。 Sass には Sass 記法(拡張子 .sass)と SCSS 記法(拡張子 .scss)の二つの記法がありますが、ここでは SCSS 記法(拡張…

続きを読む

Yahoo Pure を使ってみる

2013年8月9日

Pure は Yahoo! が公開している CSS フレームワーク。その基本的な使い方のメモ。 Pure の読み込み Pure/Customize: Choose the modules that you need 以下を head 要素内に記述するだけ。(各機能別に読み込むことも可能) ボタン Pure/Buttons: Simple CSS for Bu…

続きを読む