まいたけまいたけぐるぐるぐるぐる
CSSは基礎しかわかりません。いや、基礎も知りません。調べてます。このホームページはその調べたものの結果ですが。
ただ、今回はJSはほとんど使わずに、埋め込み以外の全ての要素をCSSで実装してみました。CSSはアニメーションも作れるみたいですし、もうデザインのためにJSを自分で記述するというのはマイナーなのかもしれません。
その中でもやや気に入っているのはトップページ上部のローテーション背景。シンプルなものがよいとはいったけど、ちょっとした派手さがほしいと思いまして作ってみた次第。
今回の記事の裏テーマは、シンタックスハイライト使ってみたかった。
コードサンプル
#head_image{ height: 150px; z-index: 1; position: relative; } /* 画像の表示を行うブロック */ .image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-size: cover; background-position: center center; height: 700px; animation: image-switch-animation 20s infinite; } /* 画像の指定と画像の切り替え ここから */ .src1 { background-image: url(./image/backgound_image/server.jpeg); } .src2 { background-image: url(./image/backgound_image/wired.jpeg); } .src3 { background-image: url(./image/backgound_image/network_rack.jpeg); } .src4 { background-image: url(./image/backgound_image/meiban.jpeg); } .image:nth-of-type(1) { animation-delay: 0s; } .image:nth-of-type(2) { animation-delay: 5s; } .image:nth-of-type(3) { animation-delay: 10s; } .image:nth-of-type(4) { animation-delay: 15s; } .image:nth-of-type(5) { animation-delay: 20s; } @keyframes image-switch-animation { 0%{ opacity: 0;} 5%{ opacity: 1;} 25%{ opacity: 1;} 30%{ opacity: 0;} 100%{ opacity: 0;} } /* 画像の指定と切り替え ここまで */
そしてHTMLが以下の通り。
<div id="head_image"> <div class="image src1"></div> <div class="image src2"></div> <div class="image src3"></div> <div class="image src4"></div> <div class="image src5"></div> </div>
さて、見ていきましょうか。
一応#head_imageの定義を載せていますが、基本的にこれはヘッダーがposition: fixed;になっているので、ここで縦の高さを調整するのに使っています。多分この使い方は間違いなんだろうなと思いつつ。なので、この解説は省きます。
動作例はトップページをご覧いただくとして、それぞれのコードがどういう役割を果たしているのか。
/* 画像の表示を行うブロック */ .image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-size: cover; background-position: center center; height: 700px; animation: image-switch-animation 20s infinite; }
このコードは、画像を表示するためのもの。今回の場合、背景になりますのでposition: absolute;を指定。更に、animation: image-switch-animation 20s infinite;で、アニメーションを宣言しています。
20sは20秒で1ローテーションすることを意味しています。今回は4枚を5秒ずつ計20秒で1ローテーション。
このコードのそれ以外は、画像の位置とか、高さとかそこら辺を設定しています。
/* 画像の指定と画像の切り替え ここから */ .src1 { background-image: url(./image/backgound_image/server.jpeg); } .src2 { background-image: url(./image/backgound_image/wired.jpeg); } .src3 { background-image: url(./image/backgound_image/network_rack.jpeg); } .src4 { background-image: url(./image/backgound_image/meiban.jpeg); }
この部分で、表示する画像を指定しています。HTMLを見ていただいたらおわかりいただけるかもしれませんが、このローテーションは使用するclassをローテーションさせることで画像をローテーションさせています。今回の場合src1～src4をぐるぐるさせているわけです。
この部分を追加して、ここ以外もしっかり変更してしまえば何枚でもローテーション可能です。
.image:nth-of-type(1) { animation-delay: 0s; } .image:nth-of-type(2) { animation-delay: 5s; } .image:nth-of-type(3) { animation-delay: 10s; } .image:nth-of-type(4) { animation-delay: 15s; } .image:nth-of-type(5) { animation-delay: 20s; }
このコードは、ローテーションさせるため、画像の表示にズレを起こさせる部分。今回は5秒ずつ表示したいので、5秒ずつ差をつけて表示させてるようにしています。
@keyframes image-switch-animation { 0%{ opacity: 0;} 5%{ opacity: 1;} 25%{ opacity: 1;} 30%{ opacity: 0;} 100%{ opacity: 0;} }
最後にこの部分。この部分は画像が切り替わるときにフェードするようにしています。正直あんまり意味はわかってないんですけど、これがちょうどいい感じでした。
CSSこわい
とまあ、実は初めてのanimationだったんですけど、まあ結構試行錯誤してこの結果になりました。ちゃんと映るからいいやと思いつつ、ただ修正しないといけない部分はありそうだなぁとか思ったり思わなかったり。暫定公開の改良は続きます。
あと、シンタックスハイライトもなかなか。ただ、このソース直書き執筆状況だと、インデントが不細工になっちゃうのが悲しいところかな。これは仕方がない・・・。
この記事を書いた人
西田（総合情報学部 情報学科 2021年入学 4年生）
通信研究会 部員。主にシステム系とネットワーク系、プログラミング系を担当。応用情報技術者。
