SwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」参加レポート

2013年3月9日(土曜日)、花粉が激しく舞う中、品川区立総合区民会館きゅりあんで開催されたSwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」に行ってきました。

有償なセミナーだったのですが内容が興味深かったので参加してきました。自分にとってはレスポンシブWebデザインについて間違った認識もあったので有意義でした。

続きを読む SwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」参加レポート

簡単に em に換算するために、body の font-size を 62.5% に設定

フォントサイズに対して相対的な単位を使用したい場合 em(エム)や %(パーセント)を使用します。

body 要素の font-size プロパティの値に 62.5% を宣言すると簡単に px から em に換算ができます。(0.625em を指定しても同様です。)

希望フォントサイズをベースフォントサイズの 10 で割ることにより em 値になります。

body {
    font-size: 62.5%; /* 10(base font size) / 16(Browser Default font size) = 0.625em * 100 = 62.5% */
}

h1 {
    font-size: 2.4em; /* 24 / 10 = 2.4em */
}

p {
    font-size: 1.2em; /* 12 / 10 = 1.2em */
}

ul li {
    font-size: 1.2em; /* 12 / 10 = 1.2em? */
}

ベースフォントサイズが 10 なので計算がしやすくなりますね。

しかし、これは階層が深くなった時に、フォントサイズに不都合な問題が生じます。
em は要素のフォントサイズを基準にするため、階層が下がるとその要素はその親要素のフォントサイズを基準にします。

demo sample

CSS3 の rem を使う。

この問題を回避するには、CSS3 の rem (root em) を使うことで回避することができます。

rem はルート要素(html 要素)のフォントサイズを基準にします。

html {
    font-size: 62.5%; /* 10(base font size) / 16(Browser Default font size) = 0.625em * 100 = 62.5% */
}

h1 {
    font-size: 2.4rem; /* 24 / 10 = 2.4em */
}

p {
    font-size: 1.2rem; /* 12 / 10 = 1.2em */
}

ul li {
    font-size: 1.2rem; /* 12 / 10 = 1.2em */
}

demo sample

階層が深くなってもフォントサイズが狂うことはありません。

CSS3 な時代に覚えておいて損はないですね。

参考リソース

Sublime Text 2 に「Browser Reflesh」を導入してみました。

先日、Sublime Text 2 のパッケージで、「Browser Reflesh」というのを見つけたので導入してみました。

「Browser Reflesh」という名称通り、ファイルが保存されるたびにブラウザを自動更新してくれます。

使い方

Package Control から、「Browser Reflesh」をインストールします。

インストールが済んだら、[Preferences] > [Package Settings] > [Browser Reflesh] > [Key Bindings – User]の json ファイルに以下のコードを記述します。

他のパッケージでも Key Bindings を設定している場合は、json ファイルにコードを追記することになります。

[
    {
            "keys": ["ctrl+shift+r"], "command": "browser_refresh", "args": {
                "auto_save": true,
                "delay": 0.5,
                "activate_browser": true,
                "browser_name" : "Google Chrome"
        }
    }
]

上記のコードは、任意のファイルを Chrome ブラウザでプレビューしておき、ファイルを編集し ctrl+shift+r でファイルを保存したら、0.5秒後に Chrome ブラウザを自動更新してくれる設定です。

LiveReload でも同様のことができますが、ローカルにサーバーを立てて、ブラウザに拡張機能を入れる必要がないのでなかなか便利です。

Web Socket に対応しているブラウザが必要なようです。