タグ

2016年6月24日のブックマーク (2件)

  • [CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

    レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番

    [CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要
    bleu-bleut
    bleu-bleut 2016/06/24
    1. html要素でfont-sizeを200%とかで指定する場合とか、2. ブラウザでズームする場合、3. ブラウザでフォント設定する場合に、media-queryの値をpxで指定すると、ブラウザによって動作が違う場合があるよ。
  • なぜタイポグラフィにおいてVertical Rhythm(バーティカルリズム)は重要な手法なのか? | POSTD

    Webのタイポグラフィについて少しでも調べたことがあるなら、 Vertical Rhythm という言葉を耳にしたことがあるのではないでしょうか。タイポグラフィを用いて仕事をする場合、最も重要な手法の1つです。このことについて知って以来、私は自分のサイト全てにVertical Rhythmを使っています。 ある日、Vertical Rhythmの重要性について自分が全く理解していないことに突然気付き、愕然としました。そしてその後すぐに2つの疑問が湧き上がってきました。「なぜVertical Rhythmを使うとサイトのデザインが向上するのか? 」「自分のデザインを良くするために、Vertical Rhythmから何を学べばいいのだろうか? 」。 私はこの疑問を解明しようと決めました。その考察を綴ります。 記事の最初にあたって認識を共通にするため、まずはコンテキストについて説明します。 Ve

    なぜタイポグラフィにおいてVertical Rhythm(バーティカルリズム)は重要な手法なのか? | POSTD
    bleu-bleut
    bleu-bleut 2016/06/24
    例えば、line-heightが24pxであれば全て24の倍数でセットする。h1のline-heightは48pxとか、グリッドの隙間は24pxとか。