Welcome to my blog

Although the world is full of suffering,
it is full of the overcoming of it.
- Helen Keller

16

画像をタイル状に並べてスタイリッシュに出す方法【HTML/CSS/jQuery】

長い間ずっと憧れていたデザインがようやくできたのでご紹介します。まずは具体的にどんな言語やコードを使っているか、そしてその結果どのような表示がされているかご覧ください。

See the Pen xxZeNmR by 雪柳アン🍁 (@ntmfuk) on CodePen.

具体的なやり方の説明は下記にまとめましたが、長くなってしまったのでドロップダウンで表示するようにしました。

HTML

コードの説明

HTMLは非常にシンプルです。リストタグulの中に必要な数だけ項目タグliを用意し、その中に図表タグfigureを入れ、画像を置くだけです。

  1. <ul class="gallery">
  2.   <li><figure>
  3.     <img src="https://blog-imgs-134.fc2.com/s/o/s/sosakugenba/cp_img1.jpg" alt="カナダ オンタリオ州">
  4.   </figure></li>
  5.   <li><figure>
  6.     <img src="https://blog-imgs-134.fc2.com/s/o/s/sosakugenba/cp_img2.jpg" alt="カナダ オンタリオ州">
  7.   </figure></li>
  8.   <li><figure>
  9.     <img src="https://blog-imgs-134.fc2.com/s/o/s/sosakugenba/cp_img3.jpg" alt="UK イングランド">
  10.   </figure></li>
  11.   <li><figure>
  12.     <img src="https://blog-imgs-134.fc2.com/s/o/s/sosakugenba/cp_img4.jpg" alt="UK イングランド">
  13.   </figure></li>
  14.   <li><figure>
  15.     <img src="https://blog-imgs-134.fc2.com/s/o/s/sosakugenba/cp_img5.jpg" alt="アメリカ シアトル">
  16.   </figure></li>
  17.   <li><figure>
  18.     <img src="https://blog-imgs-134.fc2.com/s/o/s/sosakugenba/cp_img6.jpg" alt="アメリカ シアトル">
  19.   </figure></li>
  20. ・・・
  21. </ul>

CSS

コードの説明

リセットCSS

リセットCSSとは、各ChromeやFirefox、Microsoft Edgeといった各ブラウザにデフォルトで入っているCSS(見出しの余白や太字、リストの丸など)を打ち消して、ブラウザ間の表示を揃えるためのCSSのことです。
リセットCSSは本来はもっとずっと細かいものですが、今回必要な内容はこれだけ

  1. ul, li, figure, img {
  2.     margin: 0;
  3.     padding: 0;
  4.     list-style-type: none;
  5. }

画像を正方形に並べる(レスポンシブ対応)

このままでは画像は本来の長方形のまま下に並んでしまいます。
そこで親である.galleryにflexboxを指定し、子要素を横並びにします。
flex-wrap: wrap;は、子要素を折り返すという意味です(デフォルトでは折り返さない)。

  1. .gallery {
  2.     display: flex;
  3.     flex-wrap: wrap;
  4. }

次に、画像を正方形にしていきます。
普通に liに上下●●pxと指定しても良いのですが、今回はレスポンシブデザインで正方形のサイズが変わることを考慮して、%を使います。このとき、widthと同じようにheightを指定しても綺麗に正方形にならないので別の方法をとる必要があります。

  1. li {
  2.     opacity: 0; /* アニメーションでふわっと出すためあらかじめ透明度ゼロにしておく */
  3.     width: calc(33.33% - 1px); /* -1pxとしているのは、1px分隙間をつくるため */
  4.     max-width: 150px; /* 最大で幅150pxとしています */
  5.     margin: 0 0 1px 1px; /* 下と左に1px分、隙間をつくります */
  6. }

それがこの方法。imgを囲っているfigureに、高さの縦横比をpadding-topで指定します。今回は正方形なので、縦横比100%となります。こうすれば、横幅がどんなに変化しようと四角形の縦横比はズレません。

  1. figure {
  2.     position: relative;
  3.     padding-top: 100%;
  4. }

参考サイト↓(ただし、こちらではfigureの代わりに疑似要素を使っています。)

CSSだけでアスペクト比を固定するテク - Qiita

Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こうい...

ただ、このままでは本来正方形でない画像を無理やり正方形にするため、画像の縦横比が崩れます。
そこでobject-fit: cover;を使い、指定された範囲でトリミングしてしまいます。(ただしInternet Explorerでは効かないので、別でポリフィルが必要です。)

object-fit: cover;を使うためにはimgのサイズ指定が必要なため、widthheightを100%で指定します。
positionで左と上を0にしているのは、これをしないと、縦横比が相対値になっているfigureの中でimgがちゃんと正方形にならないためです。

  1. img {
  2.       width: 100%;
  3.       height: 100%;
  4.       position: absolute;
  5.       left: 0;
  6.       top: 0;
  7.       object-fit: cover;
  8. }

要素を順番にふわっと出す

要素をふわっと出すのは、CSSのアニメーションを使います。アニメーションは@keyframesを使い、始まる時(0%)と終わった時(100%)の挙動を指定します。始まる時に透明度をゼロ(opacity: 0;)にし、終わった時透明度100%(opacity: 1;)にします。

  1. @keyframes fadein {
  2.   0% {
  3.     opacity: 0;
  4.   }
  5.   100% {
  6.     opacity: 1;
  7.   }
  8. }

なのでこのとき、liのほうもあらかじめopacity: 0;にしておく必要があります。

順番に要素をアニメーションさせるためには、1要素ずつずれてアニメーションが始まるようにします。今回は0.1秒ずつずらしてひとつひとつCSSを書いていかないといけないのですが、それは面倒なのでSass(SCSS記法)でこのようにまとめて書いてしまいます。(Sassの説明は下記)

  1. @mixin animationValue( $name, $duration, $function, $delay, $count, $state) {
  2.   animation: $name $duration+s $function $delay+s $count $state;
  3. }

そして、アニメーションを適用させるliのほうに、このように先ほど作った変数に具体的に数値を入れていきます。

  1. li {
  2.     @for $cnt from 1 through 15 {
  3.     &.active:nth-of-type(#{$cnt}) { /* activeクラスがついたliがアニメーションする(後述) */
  4.         @include animationValue(fadein, 0.4, ease, $cnt * 0.1, 1, forwards);
  5. }
  6. }

@for $cnt from 1 through 15というのは項目の数であり、15個分処理をするという意味です。「activeクラスがついた~」のくだりは、jQueryのところでお伝えします。

さらに具体的な説明はこちらのリンクをご覧ください。今回のやり方はこのリンクの方法を丸パクリしています。

[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る

単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。

CSSはSassを使って書くことをお勧めします

今回私は各要素ごとにCSSの説明をしてきましたが、CodePenや、先ほどのアニメーションの説明の方を見ていただくと、CSSを入れ子に書いていたのがわかるかと思います。

実はこれ、CSSをよりシンプルに書けるSass(SCSS記法)を使って書いています。入れ子に書けるだけでなく、変数を使ったり、繰り返し使うものはまとめて書いてしまうこともできます。

【CSS】Sassは絶対使った方が良いよ!使い方入門編 | WEBDESIGNDAY

WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは?と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何?」という方向けに、Sassの入門的な記事を書いてみました。結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。さらに、通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし!導入しないのはもったいないです。Sassとは?そもそも「Sass」とは何でしょうか?Sassは「Syntactically Awesome StyleSheet」の略で

jQuery

コードの説明

私は一からJavaScriptというのは書けません。なのでjQueryというライブラリを読み込み、そこからシンプルなコードを書いてJavaScriptを動かしています。

よくjQuery(JavaScript)というと、ドロップダウンやポップアップといった動きのあるサイトのイメージがありますが、具体的なアニメーションの動きはCSSで対応していることが多いですし、その方が効率が良いです。それよりjQueryのやる仕事は、ある条件下で要素やクラス名をつけたり、またその逆をしたりすることが多く、消す、消さないの挙動はCSSで決めます。

今回jQueryでは、画面をスクロールしたら画像が表示されるようにしました。とはいっても、表示する挙動自体は先ほどご紹介したアニメーションで行っておりますので、jQueryでは、指定の位置までスクロールしたらactiveというクラス名を追加するようにしています。そしてCSSのほうで、activeクラスがついたらアニメーションを使って要素を表示する、というようにしました。

  1. $(window).on('load scroll', function () { //スクロール及び読み込んだら実行
  2.     $('.gallery li').each(function () {
  3.         var elemOffset = $(this).offset().top; //指定した要素の位置 の変数
  4.         var scrollPos = $(window).scrollTop(); //スクロール量を取得する の変数
  5.         var wh = $(window).height()* 0.8; //ウィンドウの高さを取得する(画面を80%スクロールしたとき) の変数
  6.         if (scrollPos > elemOffset - wh) { //画面の80%スクロールすると要素にactiveクラスをつける
  7.             $(this).addClass("active");
  8.         }
  9.     });
  10. });

参考にしたサイトは以下の通りです。

【jQuery】スクロールして要素が表示されたら処理を実行する

こんにちは、ryohei(@ityryohei)です! スクロールして要素が表示されたら何らかの処理をさせる手法は、色々なサイトで見かけますね!画面をスクロールしていくと要素がふわっと表示されたり、横からスライド表示されたり、文字がどん!と大きくなったり、バリエーションは様々です。特に最近は、ユーザーが視覚的に楽しめるようにサイト全体に動きをつけることが多くなっているため、スクロールしてアニメーションを実行する処理の需要は高まっているように感じます。jQueryではプラグインも数多く存在し、それぞれ独自の動きをつけることが可能です。が、今回は簡単な処理を実装するだけになりますので、プラグインを利用せずに、スクロール中に指定した要素が出現したら処理を実行する方法をご紹介したいと思います!

2 Comments

NAHKI  

勉強になります!

私は、HTML4&CSS2までしか知識がないので、HTML5以降やjQueryなどは勉強不足でしたが、実践席にこんなことができるんだと感激しました。
コーディングは、とてもおもしろいですね。
デザインもコーディングもできるアンさんは、よりスキルを高められ楽しめそうですね。
やはり身近に、HTMLなどの知識がある人がいないので、ブログは世界を拡げてくれるとあらためて実感しました!
ありがとうございます。

2020/08/20 (Thu) 18:31 | EDIT | REPLY |   

雪柳アン  

NAHKIさん、ありがとうございます。

早速のコメント、ありがとうございます。

お恥ずかしながら、デザインスキルはド素人です。
今の会社でいろいろダメっぷりを指摘されましたし、デザイナーの先輩を見てると全然違います。
余白の類が難しいですね。

HTML5、CSS3でのコーディングはとても面白いです。でもCSSは細かいところできちんと揃えたり、HTMLは文章の構造や視覚障害者を意識したマークアップとなると結構難しいですが…。

jQueryもまだまだちんぷんかんなので、最低限の仕事をさせる程度にとどまっています。見てくれに関してはCSSで調整した方が間違いがないので…。

このデザインを適用している実際のページは以下の通りです。
https://yukiyanagi.art/gallery/
(リニューアルしたYukiyanagiサイトのイラスト作品集です)

2020/08/20 (Thu) 19:40 | EDIT | REPLY |   

Leave a comment