プログラミング

プログラミング

CSS専用の画像ギャラリーを作成する方法【機能クエリの重要性についても理解しよう】

4,012 views

読了時間 : 約3分19秒

今日のポイントは、実験的なCSS専用の画像ギャラリーを構築することです。また、機能クエリの有用性についても見ていきましょう。

 

ある日、私はデザイナーの友達に、彼女の作成しているウェブサイトに関して意見を求められました。そのサイトは、中古のCNCマシンを販売している会社のためのものだったのですが、サイトにはスライダー付きの画像ギャラリーが使われていたのです。

 

スライダー付きの画像ギャラリーを使用する目的は、バイヤーが可能な限り多くの角度とクローズアップからマシンを見れるようにするためです。また、Javascriptを使わずにそれを構築することも、完璧に可能であることがわかりました。

 

では、スライダー付きの画像ギャラリーに必要なものを解説しましょう。

ギャラリーを常に他のすべての画像のサムネイルと同様に、適度に大きいサイズで表示する必要があります。表示された画像はクリックされるサムネイルに対応し、サムネイルはギャラリーのナビゲーションになります。

 

 

これはスライダー付きの画像ギャラリーのタイプの1つにすぎず、そのようなコンポーネントには無数の動作があり、構築するのには異なった手法が必要になることを心に留めておいてください。上記で説明したものに関連する、目的動作を達成するためのCSSプロパティは次のとおりです。

  • ・フレックスボックス
  • ・ビューポートパーセンテージ単位
  • ・オブジェクトフィット
  • ・変換
  • ・アニメーション
  • ・:target
  • ・:not()

 

 

私が実験したかったのは、ビューポートのサイズがどのように変化したとしても、元の画像にアスペクト比を維持すること、そして画像ギャラリーがビューポートの境界を決して超えないことが可能かということでした。

 

 

サムネイルと表示画像は同じですが、その理由は、とにかく表示画像を読みこむ必要があったので、それをサムネイルに使用して、応じてスタイルを変更する方がよさそうだったためです。そうすれば、サムネイル用に画像を準備する必要がなくなります。

 

表示イメージにはすべてIDがあり、対応するサムネイルにはそのIDのhrefが付いています。これは:target疑似クラスセレクタが動作するために必要なのです。これにより、フラグメント識別子を含むURIのターゲット要素にスタイルを適用することができます。

 

 

画像ギャラリーを常にビューポートの範囲内に保つコツは、vmin単位です。これは、ビューポートの幅または高さのいずれか小さい方の1%を表します。ギャラリーの高さを100vminに設定しても、ギャラリーがビューポートをオーバーフローすることはありません。

 

 

スライダーには、CSSの変換とアニメーションの助けを借りて実現できる滑り効果もあります。この技術の前提は、すべての表示画像を高さの100%上方に平行移動させ、それぞれのサムネイルがクリックされたときに元の位置に戻すことです。

 

 

最終結果は以下のCodePenで確認できます。コードは多くなく、IE9でも動作しています。なぜなら:targetセレクタはIE9以降にサポートされているからです。 IE11はオブジェクトフィットをサポートしていないので、サムネイルのアスペクト比は非常に歪んでいます。

 

機能クエリ

ブラウザごとに画像のレンダーリングが異なることがあるため、機能クエリを使わない手はありません。このCSS専用の画像ギャラリーでは、サポートされている最小のプロパティはobject-fitで、次にビューポイントパーセンテージレングスが続きます。このアプローチの背後にあるロジックは、構築しようとしている機能に不可欠なプロパティを評価し、サポートレイヤを細分化する方法を決定するためのものです。

 

 

基本的なフォールバック

最終的な結果を念頭に置いて始めますが、私はいつも、フィーチャのないコンポーネントのベースレベルのディスプレイであるスペクトルの反対側を考えています。このような画像ギャラリーの場合、画像を羅列することになります。


最も基本的なレイアウト手法のinline-blockを使用して、ビューポートサイズが大きくなるにつれて、画像を列に表示することを選択しました。これがスライダーではなければ、サムネイルは必要なかったでしょう。

 

スライダーが動作するために必要なCSSプロパティの簡単な実験により、サポートされていないプロパティがobject-fitであることがわかっています。すべてのコンテキストが異なるため、機能クエリで何を使用するのかについて厳格なルールはありません。このケースでは、機能クエリの基礎としてobject-fitを使用しました。

 

必要なCSSプロパティに対して、作成しようとしているコンポーネントが段階的に機能する場合もあります。その場合、複数の機能クエリがあり、より詳細な機能サポートが提供されます。

 

 

 

最後に

さまざまなCSSプロパティを実験する中で、機能クエリはコードの中で重要な要素であることがわかりました。皆さんにもぜひ一度試してみていただきたいです。

 

 

▼こちらの記事もおすすめです!

ECサイトにおける商品画像ギャラリーのベストプラクティス【商品画像の表示のコツとは…】

【PhotoshopなしでOK!】CSSでできるシンプルな画像加工9選

 

 

 

※本記事はBuilding a CSS-only image gallery (with fallbacks)を翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ