on:2018年11月14日sponsorsレスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。Component下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Typography)は、2年程前に登場しました。簡単に説明すると、2つのサイズが異なるビューポートでフォントサイズを定義し、その間のサイズ調整は自動的に行うというアイデアです。これを実現するには、CSSのcalc()関数が登場するまでは、FitTextのようなjQueryのプラグインが必要でした。calc()関数を使用すると、下記のように簡単に実装できます。400));}実際の動作は、下記でご覧ください。スクリーンの幅を変更すると、フォントのサイズもそれに応じて変化します。CodePen.ここで重要な数字は2つのサイズが異なるビューポートに定義した「24px」と「16px」です。フォントサイズは、800pxのビューポートでは24pxまで大きくなり、400pxのビューポートでは16pxまで小さくなります。私はフォントのサイズやビューポートを定義する際に「最小(minimum)」または「最大(maximum)」という用語を使用しません。この用語は少し誤解を招くからです。実際には、400pxより小さい、800pxより大きいビューポートでデフォルトのフォントサイズを指定する必要があります。しないと、同じスケールでフォントが小さくなります(または大きくなります)。大きなサイズのスクリーンのために別のスケールを定義する必要があります。CodePen.このテクニックはレスポンシブ対応時に、よく機能します。ここで使用している数学は、非常に有用です。Typographyのコンセプトが気に入っており、他のプロパティでも機能するか考えてみました。remの単位を使用する限り、問題はありません。calculatorで変換してください。paddingとline-heightにcalc()関数を使用すると、定義されたスクリーンサイズに対して固定値の完全な流体レイアウトを実現できます。スクリーンサイズに対して変化する値まずは、デモを見てください。CodePen.Musiculturaでこのテクニックをfont-sizeだけでなく、line-heightとpaddingにも採用し、非常によく機能しています。数学を使用すると、実装が簡単になります。私はこのテクニックをヒーローコンポーネントにも利用できないものか、と考えました。ヒーローコンポーネントはBootstrapをはじめとするデザインシステムで定番となり、現在では多くのサイトで利用されています。ヒーローコンポーネント私の主な悩みは、このヒーローコンポーネントをレスポンシブ対応にする最善の方法に関係しています。ヒーローコンポーネントがフルスクリーンではない場合(つまり任意のサイズのビューポートで)、通常はその挙動をデザイナーに尋ねるでしょう。多くの場合、内部の要素を配置する際に%でpadding-bottomを使用することで、うまく機能します。デスクトップ版のサイトでうまく機能します。CodePen.しかし、タブレットやスマホのようにビューポートを縮めるとどうなるでしょうか?ある程度までは読みやすいままですが、比率を変更する必要があります。レスポンシブ対応に実装する際にデスクトップを優先すると、小さなスクリーンでは縦長の四角形になるポイントまで横長の四角形が縮小することになります。デバイスに基づいて異なる比率のヒーローコンポーネントこれが悩みの種です。さまざまなブレークポイントに最適化されたヒーローコンポーネントを実装するためには、多くのCSSを必要とするからです。良い解決方法が必要です。ページの幅が狭くなっている時に、ヒーローの高さを増やすことができたらどうでしょうか?calc()を使ったヒーローコンポーネントの実装このレイアウトを数学的に処理させ、ビューポートが変更された時に応じて処理ができるcalc()関数の登場です。Typographyで使用したコードがあります。10px;}このコードに解決する方法があります。ページの幅が狭くなっている時に、ヒーローコンポーネントがより大きくなります。流体部分の単位には、pxを使用しています。スクリーンサイズに対してのpadding-bottomの値コードにすると、下記のようになります。600));}実際の動作は、下記のデモをご覧ください。CodePen.ヒーローコンポーネントの高さは期待通りに、スムーズに移行します。スクリーンサイズに対して変化するヒーローコンポーネントの高さこのテクニックは、テキストに対して垂直スペースを与える時にも非常に便利です。ビューポートの幅を狭くすると、テキストの行が増えますが、これはフォントサイズを小さくすることはできないためです。テキストの上に垂直スペース実際の動作は、下記のデモでご覧ください。CodePen.calc()はfont-size以外にも問題を解決できる優れた機能であることが証明されました。miniを除くすべてのブラウザにサポートされています。これは非常に素晴らしいことです。remの単位しかサポートしていないことに注意してください。ヒーローコンポーネントの幅は通常100%であるため、padding-bottomのように単位を%からpxに変換するのはかなり簡単です。calc()関数のブレークポイントの前後で値をリセットすることを忘れないでください。しないと、ターゲットプロパティの値が大きい、あるいは小さい値になります。最後にここで紹介したテクニックはレイアウトの問題を解決するための単なる方法で、calc()関数に対する好奇心によって引き起こされました。