クリップメディア一旦開発完了

クラス名

el_clipMedia

マークアップ例

<figure class="el_clipMedia">
<!-- 直下の子要素は img iframe のいずれかを想定、他には何も入れない -->
</figure>
<!-- /.el_clipMedia -->

定義

機能
子要素を正方形におさめる。

あしらい・振る舞い
子要素を、その子要素の中心から正方形になるように「切り取る」
※子要素がiframeの場合は、元の設定サイズの比率と異なる場合、上下もしくは左右に黒帯が入ることがある

特記事項
通常、<figure>タグで囲み、内部の要素は画像やiframeなど必ず1要素のみ。

変数とデフォルト値

--el--clip-media--pt: 100%;
--el--clip-media--object-fit: cover;

解説

高さの振る舞い

要素の高さを決めているのは padding-top の値です。
height プロパティではなくあえて padding 値を使っています。
padding 値をパーセントで指定すると、「包含ブロックの幅に対するパーセント値」になるので、要素の幅を基準に高さを計算できるところがミソです。

注意点

気をつけなければならないのは、フレックスアイテムの場合は幅がフレックスコンテナと同じ値になってしまいます。なので、フレックスアイテム自身にこのモジュールを適用すると、想定外の振る舞いをします。

ダメな例
<ul class="bl_column">
	<li class="el_clipMedia"><img src="" alt=""></li>
	<li class="el_clipMedia"><img src="" alt=""></li>
	<li class="el_clipMedia"><img src="" alt=""></li>
</ul>
良い例
<ul class="bl_column">
	<li><figure class="el_clipMedia"><img src="" alt=""></figure></li>
	<li><figure class="el_clipMedia"><img src="" alt=""></figure></li>
	<li><figure class="el_clipMedia"><img src="" alt=""></figure></li>
</ul>

子要素を4：3に一旦開発完了

クラス名

el_clipMedia__4to3

マークアップ例

<figure class="el_clipMedia el_clipMedia__4to3">
<!-- 直下の子要素は img iframe のいずれかを想定、他には何も入れない -->
</figure>
<!-- /.el_clipMedia -->

定義

4：3の割合のメディアに使用。

子要素を16：9に一旦開発完了

クラス名

el_clipMedia__16to9

マークアップ例

<figure class="el_clipMedia el_clipMedia__16to9">
<!-- 子孫要素は img iframe のいずれかを想定 -->
</figure>
<!-- /.el_clipMedia -->

定義

16：9の割合のメディアに使用。Youtube埋め込み動画など。

丸く切り抜く一旦開発完了

クラス名

el_clipMedia__circle

マークアップ例

<figure class="el_clipMedia el_clipMedia__circle">
<!-- 直下の子要素は img iframe のいずれかを想定、他には何も入れない -->
</figure>
<!-- /.el_clipMedia -->

定義

丸く切り抜く

ファイルパス

assets/scss/element/clip-media

Change Log

  1. 開発開始：2021-07-11
  2. 2023-02-14 解説を追加 内容
  3. 最終更新：2023-02-14