Web制作者は要チェック！Instagramに使用されているCSSのテクニック
Post on:2021年4月20日
sponsors
Instagramに使用されているCSSのテクニックを紹介します。
世界で多くのユーザーが利用し、閲覧する環境もさまざまなデバイスに対応する必要があります。下記のモックアップをどのように実装しますか？
Inspect Element As A Way To Feed Your Curiosity
by Ahmad Shadeed
- はじめに
- Instagramに使用されているCSSのテクニック
- レイアウトにCSS GridやFlexboxを使用していない
- Instagramのアンケートに使用されているCSSのテクニック
- 終わりに
はじめに
フロントエンドのデベロッパーにとっての最高の贈り物のひとつは、Webページを調べるだけで何がどのように実装されているのか、CSSが裏でどのように機能しているのか確認できることです。Webページを見ている時に気になるレイアウトやエフェクトがあり、どのように実装されているか気になりませんか？
デベロッパーツールでその要素を調べれば、答えが見つかります。しかし、バックエンドでは不可能です。サーバーサイドのレンダリングが行われた瞬間にソースコードが消えてしまうので、同じことはできません。
私の場合、デベロッパーツールで要素を調べると、新しいことが学べ、より優れたフロントエンドのデベロッパーになりたいという知的好奇心が溢れてきます。この記事では、他のデベロッパーの仕事に興味を持ちながら学んだ、フロントエンドの制作に役立つテクニックを紹介したいと思います。
Instagramに使用されているCSSのテクニック
Instagramの記事ページで、私は興味深いテクニックを見つけました。
Instagramの記事ページ
どのような構造で実装されていると思いますか？
ぱっと見、2つのセクションに分割してるのではと考えたくなるかもしれません。
- 画像
- 右側のサイドバー
答えは、ノーです。
セクションを2つに分割するよりも複雑な構造になっています。このUIはさまざまなスクリーンサイズで閲覧されることが想定されているため、コンテンツは特定の方法で並べ替える必要があります。モックアップを作成したので、ご覧ください。
レイアウトの構造
HTMLは、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<article class="post"> <header class="post__header"></header> <button class="post__menu"></button> <div class="post__thumb"></div> <div class="post__content"> <section class="post__actions"></section> <section class="post__likes"></section> <div class="post__desc"></div> <time class="post__date"></time> <section class="post__comments"></section> </div> </article> |
注目すべきポイントは、上記のHTMLはモバイルファーストになっていることです。よく見ると、HTMLソースの順番はスマホでのデザインと一致していることが分かります。
HTMLはスマホでの表示と同じ順番
それでは、Instagramのチームが上記をCSSでどのように実装したかを調べて気づいた点を解説します。
レイアウトにCSS GridやFlexboxを使用していない
このレイアウトにはCSS GridやFlexboxを使用せず、CSSの絶対配置で実装されています。一見、下記のような感じかなと予想していました。
|
1 2 3 4 |
.post { display: grid; grid-template-columns: minmax(10px, 1fr) 335px; } |
現在のHTMLではこのようなことはできませんので、原因ではありません。CSS Gridの機能を使えば可能かもしれませんが、Instagramのチームがなぜ絶対配置にしたのか理由は分かりません。
サムネイル画像には、大きなmargin-rightがあります。
- これは、利用可能な残りのスペースを確保するための方法として機能します。
- 右側のUI要素（ヘッダ・テキスト・アクションなど）のためのスペースを確保します。
|
1 2 3 4 |
.post__thumb { margin-right: 335px; min-height: 450px; } |
サムネイル画像のスタイルでは、長方形の画像を考慮してmin-heightも追加されているのはいいですね。
下記は理解しやすくするために、主要なデザイン要素のみにしてみました。
主要なデザイン要素のみでの構造
.post__content要素は、topの値が72pxの絶対配置です。この72pxは、ヘッダの高さと同じです。
|
1 2 3 4 5 6 7 |
.post__content { position: absolute; right: 0; top: 72px; bottom: 0; width: 335px; } |
72pxや335pxのような「固定幅」の値を見ると驚かれるかもしれませんが、何百万人ものユーザーが利用するサイトではそういうものなのです。私だったら、こんなふうにCSSの変数を使うかもしれません。
|
1 2 3 4 5 6 7 8 9 |
:root { --post-header-height: 72px; --post-content: 335px; } .post__content { top: var(--post-header-height); width: var(--post-content); } |
こうしておけば、JavaScriptでヘッダの高さを取得して、それをCSSの変数に与えることができます。しかし、なぜCSSの変数を使用しなかったのかはよく分かりません（カラーですでに使用しているのに）。
CSS Flexboxの多用
UI要素の順番をデスクトップとスマホで変更するために、orderプロパティが使用されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.post__actions { order: 2; } .post__likes { order: 3; } .post__desc { order: 1; } .post__date { order: 4; } .post__comments { order: 5; } |
上記の方法でも機能しますが、キーボードのタブで操作すると、視覚的な順序がHTMLソースの順序と異なるため、混乱してしまいます。これはアクセシビリティ上よろしくありません。
画像のアスペクト比
2021年4月現在、aspect-ratioのサポートは不十分なため、paddingのテクニックで画像をレスポンシブ対応にしています。aspect-ratioのサポートが改善されるのが待ち遠しいですね。
aspect-ratioプロパティやpaddingのテクニックについては、先日の記事をご覧ください。
コンテンツに依存してサイズを決める
アバター画像にfit-contentがあることに気づきました。
|
1 2 3 4 |
.post__avatar { width: fit-content; height: fit-content; } |
これらを削除してもレイアウトが壊れなかったので、この理由はよくわかりません。
fit-contentについては、先日の記事をご覧ください。
ビューポートを基準にした単位
垂直方向のパディングにビューポート単位を使用するのはいいですね。
|
1 2 3 |
.wrapper { padding: 4vh 20px 0; } |
ビューポート単位については、先日の記事をご覧ください。
box-sizing
メインのラッパーには左右に20pxのパディングがあり、widthは下記のように定義されていました。
気がついたら幅が下のようになっていました。
|
1 2 3 4 |
.wrapper { padding: 4vh 20px 0; width: calc(100% - 40px); } |
これは、box-sizingがcontent-box（デフォルト）に定義されているためです。
Instagramのアンケートに使用されているCSSのテクニック
Instagramのストーリーの投票（アンケート）にも興味深いテクニックが使用されています。ご存じない人もいるかもしれませんが、このページは2つの回答を含むUIウィジェットで、ユーザーがどちらかの答えを選択すると、その割合が表示されます。
Instagramのストーリーの投票（アンケート）ページ
私が注目したのは、flex-growプロパティにアンケートの正確な値を使っていることです。面白いと思いませんか？
|
1 2 3 4 5 6 7 |
.poll__first { flex: 0.844599 1 0%; } .poll__second { flex: 0.155401 1 0%; } |
今回は、以上です。
興味を持って、より多くのWebページを調べるのを楽しみにしています。
終わりに
CSSのデバッグに関する電子書籍を書いていることをお知らせします。
興味がある場合は、debuggingcss.comにアクセスして、本に関する最新情報を購読してください。
コメントや提案があれば、@shadeed9までお願いします。
sponsors
