Web Design Leaves

レスポンシブ・タイプセッティング

画面幅（ウインドウサイズ）によって文字サイズを変化させる手法をレスポンシブ・タイプセッティングと言います。レスポンシブ Web デザインでは、以下の理由で小画面のレイアウトの文字を小さめに指定することが多いです。

• スマートフォンで閲覧する際は、PC やタブレットに比べて画面と顔の距離が近くなるので、小さい文字でも視認できる。
• 幅の狭い画面で大きな文字を表示すると、一行あたりの文字が減り読みにくくなる。
• 見出しなどが改行されて2行になってしまう。

以下は目安となる font-size の例です（あくまでも目安です）。

画面幅に応じて文字のサイズを変更するには、メディアクエリを使って指定することができます。

以下はタイトルや本文にクラス名を指定した HTML の例です。

<section>
  <h1 class="title">Media Queries</h1>
  <p class="main-text">Animi sint corrupti ipsum sunt...</p>
  <section>
    <h2 class="title">Break Point</h2>
    <p class="main-text">Vitae, nam, aperiam pariatur dicta officia...</p>
    <p class="main-text">Possimus, error, a id totam cumque fugiat ...</p>
  </section>
  <section>
    <h2 class="title">Grid System</h2>
    <p class="main-text">Sapiente dolorum impedit commodi quaera...</p>
  </section>
</section>

以下は、上記 HTML のページを画面幅に応じて、文字サイズを変更する例です。

main-text クラスを指定した本文の p 要素は、画面幅が 650px 以下の場合は 14px、画面幅が651px～960px の場合は 16px、画面幅が961px 以上の場合は 17px で表示するようにメディアクエリを使って指定しています。同時に h1 や h2 のタイトルも画面幅に応じてサイズを変更しています。（これらのサイズは一例ですので、実際のサイズはデザインや環境に合わせて設定します）

h1.title, h2.title {　/* 小画面用 */
  color: #333;
  line-height: 1.2;
  border-bottom: solid 1px #999;
  margin-bottom: 8px;
}
h1.title {
  font-size: 20px;
}
h2.title {
  font-size: 18px;
}
.main-text {
  font-size: 14px;
  line-height: 1.5;
}

@media only screen and (min-width:651px) {　/* 中画面用 */
  h1.title {
    font-size: 24px;
  }
  h2.title {
    font-size: 20px;
  }
  .main-text {
    font-size: 16px;
  }
}

@media only screen and (min-width:961px) {　/* 大画面用 */
  h1.title {
    font-size: 26px;
  }
  h2.title {
    font-size: 22px;
  }
  .main-text {
    font-size: 17px;
  }
}

相対単位 rem, em

前述の例では、文字のサイズを変更する要素やクラスに対して、メディアクエリを使ってサイズの変更をしましたが、相対単位の rem や em を使うと基準となる値を変更することで個々の要素やクラスを指定せずに文字サイズを変更することができます。

rem (root em) はルート要素（html 要素）に対する相対的なフォントサイズの単位です。常に html 要素の値を基準とします。それに対して em は基準となる要素が親要素になるのと、マージンなどの設定ではその要素の font-size が基準になったり、入れ子にした場合、複利計算が発生するなど計算が多少複雑になります。※但し、rem は古いブラウザ（IE6～IE8等）ではサポートされていません。(caniuse: rem)

rem を使ったレスポンシブ・タイプセッティング

rem を使用する場合、html の font-size を 62.5% に指定する手法が良く用いられます。ほとんどのブラウザの初期値のフォントサイズは 16px に設定されています。このため、html 要素のフォントサイズを変更しない限り「1rem = 16px」となります（html 要素のフォントサイズを 100% とみなした場合）。

1rem を 10px にするには、10px ÷ 16px x 100% = 62.5% から html の font-size を 62.5% に指定します。これにより「1rem = 10px」となり、16px は、1.6rem となるので、計算が簡単になります。

また、この方法を使う場合、全ての文字のサイズ（font-size）を rem で指定する必要があります。加えて垂直方向のマージンやパディングも rem で指定することにより、それらの値も連動して変化させることができます。

以下は前述の例を rem を使って書き換えたものです。一部の要素しか掲載していませんが、全ての文字のサイズや垂直方向のマージンやパディングも rem で指定しています。

同じプロパティに対して px と rem で値を記述しているのは、rem をサポートしていないブラウザへのフォールバックです。（サポートしていないブラウザは px の値が適用されます）

html {　/* 小画面用 */
  font-size: 62.5%;
}
body {
  font-size: 14px;
  font-size: 1.4rem;  /* 14px は 1.4rem */
  /* body 要素のフォントサイズを指定（10px にならないように） */
}

h1.title, h2.title {
  color: #333;
  line-height: 1.2;
  border-bottom: solid 1px #999;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}
h1.title {
  font-size: 20px;
  font-size: 2.0rem;
}
h2.title {
  font-size: 18px;
  font-size: 1.8rem;
}

.main-text {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
}

@media only screen and (min-width:651px) {
  html {
    font-size: 71.4286%;
  }
}

@media only screen and (min-width:961px) {
  html {
    font-size: 75.8929%;
  }
}

小画面（650px以下）では、本文のフォントサイズを 14px（この時の html の font-size は 62.5%）、中画面（651px～960px）では 16px、大画面（961px以上）では 17px で表示するように、メディアクエリで html 要素の font-size を指定しています。

例えば、中画面の場合は、16px で表示するので、html 要素の font-size は、16px ÷ 14px x 62.5% から 71.42857% としています。大画面の場合は同様に、17px ÷ 14px x 62.5% = 75.8929% としています。

但し、見出しなどは長さやデザインによって個別に大きさを調整する必要が出てくると思います。その場合、それらの指定は上記のメディアクエリの後に記述します。また、small 要素などを使用している部分も個別に調整する必要があるかも知れません。