<h2>Introduction</h2>
<ul>
<li>1990s頃は「普及しているスクリーンサイズが変わるごとにそれ専用の幅固定のレイアウトを作成する」というふうにスクリーンサイズと画面表示の問題を解決していた。（fixed-laytoutの時代）</li>
<li>「スクリーンサイズと画面表示の問題」とは以下のような問題である。</li>
<li>大きいスクリーンに対して小さすぎる幅が設定されているとき有効に使用できたはずのスペースが生まれてしまう。</li>
<li>逆に小さいスクリーンに対して大きすぎる幅が設定されているとき俯瞰性が下がる。（横向きのスクロールをしなければコンテンツが見えなくなる。）</li>
<li>2000年代中頃にはliquid layoutが現れ始める。liquid layoutはコンテンツ幅を%指定することで異なるスクリーンサイズに対して適切な見え方を実現しようというレイアウトである。</li>
<li>liquid layoutである程度様々なスクリーンで適切な表示を実現できるようになったものの大きなスクリーンでは間伸びしたデザインになったり、小さいスクリーンでは窮屈なデザインになったりするという問題があった。</li>
<li>上のような問題を和らげるためにmax-widthやmin-widthを与えるという方法があったがこれを行うと結局fixed layoutと同様の問題が生じることになる。</li>
<li>21世紀には携帯電話といった小型端末が普及しwebサイトは大きなスクリーンとより小さなスクリーンに対応しなければならなくなった。</li>
<li>上の問題に対応するためモバイルサイトと通常のサイトを分離してモバイル端末からアクセスされたときにはリダイレクトしてモバイル端末用のサイトに誘導するなどの解決策がとられた。しかしどの端末がモバイルでどの端末がモバイルでないかの判別は難しいという問題やセキュリティ上の問題もあった。</li>
<li>これら問題を解決するために複数ドメインを持たせるのではなく一つのサイトで複数のfixed layoutを出し分けるadaptive layoutという方法がとられるようになった。</li>
<li>CSSにmedia queryの機能が追加されスタイルの出し分けが可能となった。</li>
<li>adaptive designでは、複数サイズのスクリーンに対して適切なfixed layoutを出し分けるので考慮されていないサイズのスクリーンで表示した場合表示が崩れる場合がある。</li>
<li>Responsive designはmedia queryを使ってliquid layoutの出しわけをするような設計方法である。</li>
<li>モバイルフォンはデフォルトでウェブサイトが980pxの固定レイアウトであるとしてウェブサイトを取り扱う。つまりウェブサイトは初め幅980pxであるとして計算された後に実際のスクリーンに収まるようにスケールダウンされることでレンダリングされる。</li>
<li>このスケーリングを防ぐためには以下のmetaタグを使用するとよい。</li>
</ul>
<p><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</code></p>
<ul>
<li>width=device-widthという値はwidthを980pxではなくデバイスの幅と想定するように指示するためのもの。</li>
</ul>
<h2>Media quereis</h2>
<ul>
<li>メディアクエリによって異なる種類のターゲットに対する出力をコントロールすることができる。</li>
<li>HTMLのlink要素のmedia属性を使用して読み込むCSSファイルを変更することができる。無駄なソースを読み込むことがなくなるので最適化に使用できそう。</li>
<li><code>@media type and (feature)</code>という構文を使用することでメディアタイプと条件を指定してターゲットを選択することができる。</li>
<li>以下のCSSでは全てのメディアタイプに対してorientationの条件でスタイルを出しわけている。</li>
</ul>
<pre><code class="language-css"><span class="hljs-keyword">@media</span> all <span class="hljs-keyword">and</span> (<span class="hljs-attribute">orientation</span>: landscape) {
  // styles 
}

<span class="hljs-keyword">@media</span> all <span class="hljs-keyword">and</span> (<span class="hljs-attribute">orientation</span>: portrait) {
  // styles
}
</code></pre>
<ul>
<li>メディアタイプごとにスタイルファイルを分けるのは良いがメディアクエリごとに分けるのは良くない。</li>
<li>ブラウザウィンドウが400pxより幅が大きいときに適用するスタイル。</li>
</ul>
<pre><code>@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}
</code></pre>
<ul>
<li>ブレイクポイントは自分のコンテンツに基づいて考えるべきである。</li>
</ul>
<h2>Internationalization</h2>
<ul>
<li>言語によるテキストの向きを示すプロパティ（logical property）がある。</li>
<li>ロジカルプロパティを使用することによって多言語に対応したスタイルを書くことが可能になる。</li>
<li>ロジカルプロパティはメディアクエリの中では動かない。（まだ対応していない。）</li>
</ul>
<h2>Macro layouts</h2>
<ul>
<li>グリッドでは横並びにする要素の占める幅を親要素側で指定できるため責任の観点から利点がある。（子要素がレイアアウトを決めるべきではないので。）</li>
<li>グリッドやフレックスを適切に使うことでメディアクエリに頼らずともレスポンシブデザインを実現できる場合がある。</li>
</ul>
<h2>Typography</h2>
<ul>
<li>大きいスクリーンには大きな文字、小さなスクリーンには小さな文字を設定するのが一般的である。</li>
<li>メディアクエリを使用してviewportごとに文字の大きさを決定するのもよいがvwを使用することでviewport依存で文字の大きさを決めることもできる。</li>
<li>veiwportの幅に合わせてフォントサイズを決めるのが良い方法であるが、次のような設定にするとユーザーが文字の大きさを変更できなくなるので良くない。</li>
</ul>
<pre><code>html {
  font-size: 2.5vw;
}
</code></pre>
<ul>
<li>以下のようにするとviewport依存とユーザーの文字の大きさの設定の両方に依存して文字の大きさを変更することができる。</li>
</ul>
<pre><code>html {
  font-size: calc(0.75rem + 1.5vw);
}
</code></pre>
<ul>
<li>
<p>上の方法では文字が大きくなりすぎたり、小さくなりすぎたりするので以下の方法を取るとよい。</p>
</li>
<li>
<p>clamp関数は3引数の関数であり<code>clamp(a, b, c)</code>でb &lt; aのときa、b &gt; cのときc、それ以外はbを返す。</p>
</li>
</ul>
<pre><code>html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
</code></pre>
<h2>Responsive images</h2>
<ul>
<li>テキストは折り返し可能だが画像を折り返すことはできない。</li>
<li>したがって以下のようにスタイリングする。</li>
<li>以下の例では<code>max-inline-size</code>を使用している。</li>
</ul>
<pre><code class="language-css"><span class="hljs-selector-tag">img</span> {
  <span class="hljs-attribute">max-inline-size</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">block-size</span>: auto;
}
</code></pre>
<ul>
<li>viewportの大きさに合わせて適切な画像を読み込ませることが重要である。特にモバイル端末用には画面サイズに合わせて小さな画像を配信するように設定することが重要である。（データ通信量削減のため）。</li>
<li>以下のように設定することでviewportに合わせて適切な画像が読み込まれるようになる。</li>
<li>cssでmax-inline-sizeを指定した上で使用すると良い。</li>
</ul>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span>
 <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;small-image.png&quot;</span>
 <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;A description of the image.&quot;</span>
 <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;300&quot;</span>
 <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;200&quot;</span>
 <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span>
 <span class="hljs-attr">decoding</span>=<span class="hljs-string">&quot;async&quot;</span>
 <span class="hljs-attr">srcset</span>=<span class="hljs-string">&quot;small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w&quot;</span>
 <span class="hljs-attr">sizes</span>=<span class="hljs-string">&quot;(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw&quot;</span>
&gt;</span>
</code></pre>
<ul>
<li>loadingをlazyにすることでviewportに入るまで画像が読み込まれないようになる。</li>
<li>またdecodingをasyncにすることで他の処理をブロックすることなくデコードを行うようにできる。</li>
<li>size属性で画像が当てはめられるスロット幅を指定することができる。ここにメディアクエリを記述することで
viewportに合わせたスロットを記述することができ、ブラウザは選択されたスロットに最もサイズが近い画像をsrcsetの中から自動で選び読み込む。</li>
<li>image-setプロパティを使用することでimgタグのsrcset属性と似たような設定をcss側で行うことができる。</li>
</ul>
<h2>The picture element</h2>
<ul>
<li>picture要素を使用することによって画像の出しわけをより細かくコントロールすることができる。</li>
</ul>
<h2>Icons</h2>
<ul>
<li>presentatationのための画像は背景として提供することができる。</li>
<li>テキストともにアイコンを使用しないならそのアイコンはpresentationalではなくなりアクセシブルな名前を提供する必要がある。</li>
</ul>


Learn Responsive Designで学んだこと