CSS の記事一覧

PurgeCSSとは、プロジェクト内で使用していないcssを削除するツールです。Webサイトを長く運用していて改修が進んでいたり、CSSフレームワークを活用していると、使用していないcssスタイルが増えていくことが多くあります。PurgeCSSを使用することで、拡張子を指定し(.html, .php, .jsなど)、指定した拡張子のファイル内で使われていないセレクタのcssを削除することが出来ます。 導入検討理由 少しでも通信容量の削減=表示速度の改善を行いたいと検討したいました。消していいのか悪いのかわからないスタイルに手が止まることもあり、自動化できるのであればより効率的な作業が可能になるのではとPurgeCSSを試すことにしました。 削減対象例 使用していないmixinやhelperABテストなどで使用するか頻繁に切り替わるスタイル特定のスタイルのみ使用されているライブラリ 手順 今回はPurgeCSSをそのまま使用します。 PurgeCSSにはnuxt-purgecssやgulp-purgecssのような、ビルドシステムに組み込むプラグインも存在します。一度scssを保存した際のコンパイル・圧縮等に含めることも検討しましたが、保存の都度実行するとコンパイルに必要な時間が増大するため今回は組み込みません。 npm i -g purgecsspurgecss --css ./Css/Common.css --content ./**/*.{html,php,js} --output ./Css/minify/min.css 不使用セレクタを削除するcssファイル：./Css/Common.cscセレクタを使用しているか確認するファイル群： ./**/*.{html,php,js}削除後のcssを保存するファイル：./Css/minify/min.css 結果 今回、弊社で開発しているテンプレート用のcssが1.1MB → 310 KBとなり、800KB近く減少しました。 改善・課題点 アイコンフォント等の設定も削除されてしまっているため、設定等をより詰める必要があります。過不足無く削除できるようにすれば、デプロイ時のフローに組み込むことで自動的にファイルサイズの削減につながるため、取り組む価値がありそうです。

どうもこんにちは。新卒3年目の隅谷です。今回はCSSアニメーションに関して調査・考察などしてみたので記事に致しました。 CSSアニメーションとは CSSアニメーションとは、javascript等の他言語を使わずに、CSSのみでWeb上の要素を動かす技術です。現状アニメーションの設定はCSSで、アニメーションを発火させる条件付けをjavascriptで行う。という運用方法が主流になっています。 取り上げた背景 同期がPHPerKaigiの案件を進行していて、どんなイベントなんだろう？と思い調べたことがきっかけでした。ド派手な動きというのはないのですが、1つ1つの動きが気持ちよく美しく動いており、一切邪魔だという気持ちが起きないアニメーションで、自分も自然なアニメーションが使えるようになりたいと思い、CSSアニメーションの世界を調べ始めました。 PHPerKaigiKaigi2022 https://developers.gmo.jp/17318/ CSSアニメーションのメリット・デメリット CSSアニメーションにもメリットとデメリットがあります。 メリット 学習コストが低く、手軽に利用できる CSSの延長線で利用することができ、javascriptを使用する工程が圧倒的に少ないため、プログラミングの経験が浅い方・苦手な方でも実装することができ、簡単なアニメーションであればjavascriptよりもパフォーマンスが良いのがメリットです。 デメリット コード量が多くなる CSSではアニメーションの設定と、アニメーションを利用する箇所どちらにもコードを書かなくては行けません。さらに、アニメーション用の要素をHTMLに記入しなくてはいけない場合があるため、全体的にコードの量が増える傾向にあることがデメリットです。 CSSアニメーションの基礎 CSSアニメーションには「transition」を使う方法と、「@keyframes」と「animation」を使う方法、大きく分けて2つの実装方法があります。どちらにもメリット、デメリットがあります。 「transition」を使った実装方法 「transition」を使った実装方法のメリットは、手軽さにあります。hover等の状態変化が起きる要素に対して「transition」で秒数を設定するだけで実装できます。ですので、簡単にマウスカーソルを合わせると大きさが変わる、回転する、動く等であれば、「transition」を設定するだけで実装できるものがほとんどです。しかし裏を返せば細かいアニメーションを実装したい場合は、「transition」は向いていないということになります。また、繰り返し複数箇所に同じアニメーションを実装したい場合にはも、同じような記述を書かなくてはいけないため、可読性が下がり、こちらも向いていないと言えます。これが「transition」のデメリットになります。 実際にコードとして書くとこのようになります。 <div class="box"></div> .box { width: 100px; height: 100px; background: #000; transition: 1s; } .box:hover { width: 200px; height: 100px; background: #000; } 注意点としては、transitionを使う場合は、hover内に書かず元の要素にtransitionを記述しましょう。意図的でない場合は、hoverが外れた瞬間アニメーションなしで元の要素に戻ってしまいます。 「@keyframes」と「animation」を使った実装方法 「@keyframes」と「animation」を使った実装方法のメリットは、汎用性の高さにあります。それぞれの役割と書き方を紹介します。 「@keyframes」の役割と書き方 「@keyframes」は動きのテンプレートの役割があり、簡単に言えば動きの設計書です。例えば要素を90度回転させた後に、逆側に180度回転させる動きを付けたいときは下記のように記述します。 @keyframes rolling { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } このように記述することで、rollingアニメーションテンプレートが定義されます。この定義したアニメーションテンプレートをどのように使うかを次の「animation」で操作します。 「animation」の役割と書き方 「animation」は、先ほど定義した「@keyframes」を使って、どんな速度で、どんな緩急で、どのように繰り返して、など細かく指定してアニメーションを実行することのできるプロパティです。「animation」で定義できる値はこのようなものがあります。 使用するキーフレーム名(animation-name)1再生にかける時間(animation-duration)どのような緩急で再生するか(animation-timing-function)アニメーションをいつ開始するか(animation-delay)何回再生するか(animation-iteration-count)アニメーションの向きの指定(animation-direction)アニメーションの終了後のプロパティ状態の指定(animation-fill-mode)再生、停止の指定(animation-play-state) ※アニメーションプロパティの詳細はこちらhttps://developer.mozilla.org/ja/docs/Web/CSS/animation 実際に「@keyframes」と合わせて「animation」を使用するとこのようになります。 <div class="box"></div> @keyframes rolling { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(0); } 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } .box { width: 100px; height: 100px; background: #000; animation: 3s linear infinite normal both rolling; } このように実装したアニメーションを、javascriptを使って発火タイミングを作り、アニメーションをさせたい要素にclassをつけるといった流れが主流になっています。 効果的なアニメーションの考え方 これは自論になってしまうのですが、アニメーションには、「能動的なアニメーション」と、「受動的なアニメーション」があります。どちらにも考え方として押さえておきたいポイントがあります。 「能動的なアニメーション」のポイント 能動的なアニメーションとはユーザーが何かしらの操作をした際に、フェードイン、フェードアウトや、ポップアップなどの、要素の表示、非表示に関わるアニメーションだと考えています。このような場合、ユーザーにストレスを与えないことがポイントになります。アニメーションを作り始めると、こんな動きはどうだろうか、あんな動きはどうだろうか。と考え始めますが、本来の目的を見失ってしまう場合があります。例えばポップアップする要素にアニメーションを当てる際に、「ポップアップの際のストレスを軽減」という目的で製作していたら、気づけば目的を見失って5秒のアニメーションになってしまいました。ユーザーがこのポップアップを開くと、ストレスで離脱してしまう可能性が高くなります。それはシンプルにストレスを感じるからです。ですので、「能動的なアニメーション」を実装する場合は、「ユーザーのアクションに対してのレスポンスとわかりやすい上で、スピーディーに展開する。」こちらを意識すると効果的なアニメーションになります。 人間の反射反応時間は約250ミリ秒(1/4)と言われています。実際にクリックしてからアクションが起こるまでが遅いと、不安感、ストレスを感じてしまいます。もしリンゴを持ったときに、大きさ、重さ、表面の質感等が伝わって来なければ、自分がしっかりリンゴを持てているかわかりませんよね。アニメーションも同じく自分がアクションを起こし際に、レスポンスが即座に来て、待たされることなく情報を取得できることが大事です。 「受動的なアニメーション」のポイント 「受動的なアニメーション」とはいわゆるテレビなどで放映されているアニメのようなものです。Webで言えば、ローディングアニメーションや、装飾に対するアニメーションなどです。このようなアニメーションを作る際は、あまり予想ができない意外性のあるアニメーションが引きつけると考えています。そのような動きの実装を考える上で、最も必要なことはアニメ、映画、ゲームなどのオープニングなどの分析をすることです。そしてこの動きはどうすれば実装できるかを考えることで自分のアニメーションの幅が広がります。また、アニメーションに活かすために、普段は触らないようなCSSプロパティにも触れてみることで、できないと思っていた動きが案外できてしまったりするパターンもあります。 CSSアニメーションの今後 CSSアニメーションの今後として、2022年6月15日にIEのサポートが終了したことにより、更なる発展をすると考えられます。IEでの動きを考慮しなくても良くなった現在では、実装できないアニメーションなどないといっても過言ではありません。flashが生きていた時代のようにあらゆる動きができる時代もそう遠くないのかもしれませんね。

本エントリーは、サイト高速化の一手法とされるファーストビューのインライン化に関する記事です。2020年にリニューアルしたGMOインターネットの採用サイトを高速化する試みのなかで行った、ヘッダーの改修について記しています。 要約 目的：弊社採用サイトのヘッダーの読み込み速度を上げたい方法：ヘッダー部分のCSS/JSを切り出してインライン化結果：低速環境下でもヘッダーの挙動・デザインの崩れがなくなった はじめに Webページの表示スピードを改善する手法はさまざまありますが、その中の1つにページのファーストビュー部分のCSS/JSをインライン化する方法が挙げられます。 背景としては採用サイトリニューアル後、低速回線環境下だとページの読み込みが終わるまでヘッダーメニューの表示が崩れるという困り事がありました。 リニューアル後のヘッダーは、PC・タブレット・スマートフォンのデバイスサイズを問わず、メニューはハンバーガーメニューから開く形式になっています。トップページからはヘッダーを経由しなくてもすべての下層ページへ遷移できますが、下層ページからはヘッダーを経由した遷移が基本になります。そのため、採用サイトを開いたあるいは再読み込みが走った際、ヘッダーが読み込まれないと他のページへ移動する際に不便です。 就活、転職活動をしている方は面接前の移動時間等に採用サイトを確認される方も多いかと思います（※）が、とくにすべてのコンテンツが読み込まれるまで別ページ（ニュース、企業理念、会社概要など）への動線が早く利用できるように改修が必要でした。このため、採用サイトヘッダー部分のJavaScript（以下JS）/CSSを切り分け、インラインで読み込むことにより表示の高速化を図りました。 ※2021年記事執筆時点でのGMOインターネットの選考フローにおいて、最終以外の面接はzoomを用いたオンライン面接になります。 改善前の挙動 https://youtu.be/XT4MZ75v9Ts ヘッダーインライン化前の表示速度を確認した動画がこちらです。chromeの開発者ツールでNetworkタブのThrottling Profileを変更し、最も遅い「slow 3G」でエミュレートしています。動画でページを更新してから開閉ボタンが表示された直後にヘッダーを開くと、ヘッダー内のメニューが正常に表示されていないのがわかります。このときの採用サイトヘッダーの挙動は下記のようになっていました。 変更前のSCSS CSS：共通ファイルをまとめ、1cssファイルにコンパイル 変更後のJS JS：jQueryを使用している＆機能ごとに分かれたファイルを一つのscript.min.jsにコンパイル CSS、JSともにすべてのコードを1つのファイルから読み込んでいるため、ヘッダーのようにはじめに表示される箇所も、正常に動作するにはページ全体用のコードが読み込まれるまで待つ必要がありました。 基本的には読み込むCSS、JSは分かれていない単体のファイルが望ましいとされていますので、優先して表示したい箇所によりインライン化するかの判断は変わってきます。 ヘッダーインライン化のために行ったこと 変更後のSCSS まずCSSでは、すべてのスタイルがコンパイルされていたのをヘッダーとそれ以外に切り分けました。 ヘッダーに必要なスタイルを個別にコンパイル、ページ内でコンパイルしたファイルをテキストとして展開します。 変更後のJS JSも同様、ヘッダーに必要な記述のみを切り分けてコンパイルし、ページ内で展開しました。 採用サイトではjQueryを使用していますが、読み込みに時間がかかるためヘッダーの記述を純粋なJSのみを使用した記述に書き換えています。 最終的に、ブラウザ上では下記のような記述になっています。 結果 https://youtu.be/aL177_2Wgik ヘッダーインライン化後の表示速度を確認した動画がこちらです。 改善前同様、chromeの開発者ツールを用いネットワーク速度をもっとも遅い「slow 3G」でエミュレートしています。 ヘッダー開閉ボタンが表示された直後にクリックしても、ヘッダー内メニューがすべて表示されていることがわかります。 https://youtu.be/Hl3ds1ohUyY 変更前と変更後を比較した動画がこちらです。 レンダリングが始まってから、全メニューが表示できるようになるまでの時間に90秒程度差があることがわかります。 課題 改修後の課題として、ヘッダーを優先して読み込み・レンダリングするため、JSにおけるデバイスサイズの判定・CSSにおけるサイト内共通設定などもインライン化しており、一部共通ファイルとコードが重複しています。ページで読み込むコードは可能な限り削減したいため、やむを得ず重複する箇所以外をなるべく棚卸しできればと考えています。 また、低速環境下でヘッダーを開いた際、矢印（>）が読み込まれず文字化けとして表示される場合があります。こちらは採用サイト用に作られたSVGをアイコンフォントとして読み込んでいるためで、今後合わせて読み込み速度か表示方法の改善を図りたいです。 おわりに サイト高速化の一手法とされる、ファーストビューのインライン化に関する記事でした。 今回はページ読み込み直後のヘッダー表示を高速化する、という目的の改修だったため、ヘッダー箇所のJS/CSSをインライン化する方法を選択しました。ファーストビュー箇所をインライン化する、という手法がすべてのWebサイトで有用であるかは未知数ですが、ページ表示スピードの改善、ひいては閲覧する方のストレスを軽減したいと考えている方へ、一つの改善例としてお役に立てたなら幸いです。