◾️ アニメーションをつける方法が超絶簡単！！ 　　書き方： 解説：　trasitionとは文字にアニメーションをつける方法。５sと書かれているのは秒数を表している。 　　　　今回は５秒間だけアニメーションをつける指示を出したので5sとなっている！ 　　　　是非この内容を頭にマージしていこう！

◾️ background-colorプロパティとは 　文字が書かれている後ろの背景の色を変える目的で使われるプロパティ。 　部屋の壁の色を決めれるようなもの。 ◾️ colorプロパティとは 　文字の色を変える為に使われるプロパティ。 　部屋にアートや時計などを飾れると思えれな良いだろう。 　 この２つのプロパティを使うことでホームページなどを見栄えがいい物に変えられるという事だ。 自分の部屋であるかのようにイメージしてこの２つプロパティを使えば、いい部屋＜HPなど＞になる事間違えなし！！ 基礎的な情報ではあるが、是非とも頭にマージしといてもらいたい！

Critical CSSがパフォーマンスを上げるとのことで最近導入を開始しました。 普段Webpackを使っているのでhtml-critical-webpack-pluginを使用していましたが、複数ページの場合はページの数だけコードを記述するという方法が不便だなぁと思い、複数ページに対応したCriticalの導入方法を探したところ見つけられなかったのでメモします。 Gulpを使う方法とスクリプトを自作する方法の2通りがあります。 Gulpを使ったCriticalの導入方法 公式の設定通りに記述すればOKです。 一応ここでも明記します。 ディレクトリ構成 ./ ├ docs | ├ css | | └ style.css | ├ index.html | ├ page1.html | └ page2.html └ gulpfile.js パッケージのインストール $npm i -D gulp fancy-log critical gulpfile.js const { src, dest, series } = require('gulp'); const log = require('fancy-log'); const critical = require('critical').stream; function criticalCss(done) { return src('./docs/*.html') .pipe( critical({ base: './docs', inline: true, css: ['./docs/css/style.css'], //対象としたいCSSファイル }) ) .on('error', err => { log.error(err.message); }) .pipe(dest('./docs')); done(); } exports.default = series(criticalCss); gulpを実行すると、docs内の全てのhtmlファイルにCritical CSSがインラインで追記されたものが上書きされます。 critical({})内の設定は公式ドキュメントを参考に変更してみてください。 スクリプトを使ったCriticalの導入方法 わざわざgulpをインストールしたくない、という人はスクリプトを自作します。 こちらも公式で設定の解説がありますが、ディレクトリ内の全てのhtmlファイルを対象にする設定がなかったのでアレンジしました。参考程度にしてください。 ディレクトリ構成 ./ ├ docs | ├ css | | └ style.css | ├ index.html | ├ page1.html | └ page2.html └ critical.js パッケージのインストール $npm i -D critical glob critical.js const critical = require('critical'); const path = require('path'); const glob = require('glob'); const target = glob.sync(path.resolve(__dirname, './docs/**/*.html')); target.forEach(async (path, i) => { const arr = path.split('/'); const file = arr[arr.length - 1]; critical.generate({ inline: true, base: './docs', src: './docs/' + file, target: { html: file, }, extract: true, //元のCSSファイルからCritical CSSを削除したい場合（LP推奨） width: 1300, height: 900, },(err, output) => { if (err) { console.error(err); } else if (output) { console.log(`Generated critical CSS ${file}`); } }); }); 最初にdocsディレクトリの全てのhtmlファイルのパスを取得し、forEachで一つ一つにCriticalを実行しています。 extract: trueにするとインライン化したコードを元のCSSファイルから削除した新しいCSSファイルを./docs/css/ディレクトリに生成し、そしてhtml内に自動で組み込んでくれます。 しかし、そうするとCSSファイルのキャッシュ機能が使えなくなるので複数ページの案件での使用には注意が必要です。 あまり体感できない程度の変化ですが、これ一つでパフォーマンスの数値が変わってくるので是非導入してみてください。

はじめに フレックスボックスの学習備忘録です。 学習方法 FLEXBOX FROGGYは、ゲーム形式にフレックスボックスを楽しく学べます。 FLEXBOX FROGGYを最後まで行うと下記のスタイルがわかるようになります。 Q24 #pond { display: flex; flex-direction: column-reverse; flex-wrap: wrap-reverse; justify-content: center; align-content: space-between; } フレックスボックスのまとめ justify-content: 横方向に移動する * flex-start: アイテムはコンテナーの左側に並びます * flex-end: アイテムはコンテナーの右側に並びます * center: アイテムはコンテナーの中央に並びます * space-between: アイテムはその間に等しい間隔を空けて表示されます * space-around: アイテムはその周囲に等しい間隔を空けて表示されます * space-around: 周辺に等しいスペースを空ける * space-between: 間に対して均等にスペースを空ける justify-contentの例 #pond { display: flex; justify-content: flex-end; } align-items : 縦方向に移動する * flex-start: アイテムはコンテナーの上部に並びます。 * flex-end: アイテムはコンテナーの下部に並びます。 * center: アイテムはコンテナーの垂直方向中央に並びます。 * baseline: アイテムはコンテナーのベースラインに表示されます。 * stretch: アイテムはコンテナーの大きさに合うよう広がります。 align-itemsの例 #pond { display: flex; justify-content: center; align-items:center; } flex-direction : 軸の方向を変える row: アイテムは文章と同じ方向に配置されます。 row-reverse: アイテムは文章と逆の方向に配置されます。 column: アイテムは上から下に向かって配置されます。 column-reverse: アイテムは下から上に向かって配置されます。 order : アイテムの順序を指定する アイテムはデフォルトでは0の値を取ります。 １以上は右へ移動します。 左に置きたい場合は-1以下を指定します。 orderの例 #pond { display: flex; } .yellow { order: 1 } align-self :　個別のアイテムへ設定できるプロパティー align-selfの例 #pond { display: flex; align-items: flex-start; } .yellow { align-self:flex-end } flex-wrap: アイテムを強制的に１行にまとめるか、改行させるか制御する nowrap: 全てのアイテムは、ひとつの行にフィットします。 wrap: アイテムは他の行へ折り返します。 wrap-reverse: アイテムは逆順になって他の行へ折り返します flex-wrapの例 #pond { display: flex; flex-wrap: wrap; } flex-directionとflex-wrapの二つのプロパティーはよく一緒に使われるため、これらを統合するショートハンドプロパティーflex-flowが作られました。 このショートハンドプロパティーは空白文字で分割した二つのプロパティーの値を受け付けます。 flex-directionとflex-wrapを２つを省略できるよ #pond { display: flex; flex-flow: column wrap } align-content: 複数の行が他の行とどう距離を取り広がるのかを指定する flex-start: 行はコンテナーの上側に詰められます。 flex-end: 行はコンテナーの下側に詰められます。 center: 行はコンテナーの中央に詰められます。 space-between: 行はその間に等しい間隔を空けて表示されます。 space-around: 行はその周囲に等しい間隔を空けて表示されます。 stretch: 行はコンテナーに合うよう引き延ばされます。 align-contentの例 #pond { display: flex; flex-wrap: wrap; align-content:flex-start; }

注）この記事はコピぺして楽したい人むけです。 背景 脱jQueryを進める一環として実装を進めている中で、 Bootstrap 5にて「Bootstrap Icons」が追加できるようになったので いい機会だと某担当システム。BootStrapも3から5へアップデートしています。 今回ボタンの配色を3に寄せるという点のみについて備忘録的に残したいと思います。 素のCSS記述となるのでご注意を。 想定している対象 ・Bootstrap 3を使用しているものがあり今回5へ差し替えたい。 ・Bootstrap関連ファイルはCDNで読み込んでいる。 ・common.css（仮称）等でカスタマイズしている。 対象ボタン primary / success / info / warning / danger / default 上：Bootstrap 5 / 下：Bootstrap 3 追加記述（コピペでおk） common.css /* -------------------- * ボタンの配色をBootStrap　3に変更 -------------------- */ /* primaryのボタン色 */ .btn-primary, .btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: #337ab7; border-color: #2e6da4; } /* focusされた時の枠線の色 */ .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { color: #fff; background-color: #286090; border-color: #122b40; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-primary:hover { color: #fff; background-color: #286090; border-color: #204d74; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #286090; border-color: #204d74; } /* successのボタン色 */ .btn-success, .btn-success.disabled, .btn-success:disabled { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } /* focusされた時の枠線の色 */ .btn-success:focus, .btn-success.focus, .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { color: #fff; background-color: #449d44; border-color: #255625; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-success:hover { color: #fff; background-color: #449d44; border-color: #398439; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: #449d44; border-color: #398439; } /* infoのボタン色 */ .btn-info, .btn-info.disabled, .btn-info:disabled { color: #fff; background-color: #5bc0de; border-color: #46b8da; } /* focusされた時の枠線の色 */ .btn-info:focus, .btn-info.focus, .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { color: #fff; background-color: #31b0d5; border-color: #1b6d85; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-info:hover { color: #fff; background-color: #31b0d5; border-color: #269abc; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: #31b0d5; border-color: #269abc; } /* warningのボタン色 */ .btn-warning, .btn-warning.disabled, .btn-warning:disabled { color: #fff; background-color: #f0ad4e; border-color: #eea236; } /* focusされた時の枠線の色 */ .btn-warning:focus, .btn-warning.focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { color: #fff; background-color: #ec971f; border-color: #985f0d; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-warning:hover { color: #fff; background-color: #ec971f; border-color: #d58512; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #fff; background-color: #ec971f; border-color: #d58512; } /* dangerのボタン色 */ .btn-danger, .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #d9534f; border-color: #d43f3a; } /* focusされた時の枠線の色 */ .btn-danger:focus, .btn-danger.focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { color: #fff; background-color: #c9302c; border-color: #761c19; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #fff; background-color: #c9302c; border-color: #ac2925; } /* defaultのボタン色 */ .btn-default, .btn-default.disabled, .btn-default:disabled { color: #333; background-color: #fff; border-color: #ccc; } /* focusされた時の枠線の色 */ .btn-default:focus, .btn-default.focus, .btn-default:not(:disabled):not(.disabled):active:focus, .btn-default:not(:disabled):not(.disabled).active:focus, .show > .btn-default.dropdown-toggle:focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; box-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); } /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/ .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */ .btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle { color: #333; background-color: #e6e6e6; border-color: #adadad; } 余談 ほぼ殴り書きのため、誤りがあった場合はコメントいただければ幸いです。

そもそもCLSとは？ 2021年5月にGoogle検索結果のランキング要素に新たなページエクスペリエンスが追加されました。 評価の対象としてコアウェブバイタルという３つの指標が定められました。 3つの指標とは、LCP（速度）、FID（応答性）、CLS（視覚要素安定性）です。 その中で、おそらくマークアップ手法で最も影響を受けやすいものがCumulative Layout Shift、略してCLSです。 従来のコーディングだと今までどちらでもできた表現が、はっきり良否が分かれるため逆にやりがいを感じるかもしれません。 改善のきっかけ アクセス解析担当者から、サーチコンソール上のエラー報告を受けCLSの存在を知りました。 フロント部分の原因と知り調査を開始しました。 改善前の私のコーディングはレスポンシブサイトを意識した常にレイアウトが伸び縮みするようなCLSエラーを代表するような悪い例でした・・・ 実装例 ここからは実際にエラーの解消に役立った具体的なコーディング手法をいくつか紹介します。 基本的には、HTMLとCSSの書き方を気をつけるだけで改善できます。 画像の処理 画像の読み込みは遅れて行われるため、widthとheightを指定しないと画像の大きさのままに表示領域を変えてしまいます。 imgタグにwidth属性とheight属性を指定していきます。 <img src="hoge.jpg" width="200" height="100"> モバイルやタブレットはCSSで対応しましょう。 @media screen and (max-width: 767px) { img { width: 100px; height: 50px; } } タブレットは、現状では評価の対象外なので意識する必要は無さそうです。 また対策として、CSSをインラインで書いた方が良いという声もありますが、通常の外部ファイル化でもエラー解消出来たので問題ないです。 デスクトップもCSSで対処できますが、width属性とheight属性を指定しなかった場合に別の警告が出てしまうので必ず指定しましょう。 モジュール 幅や高さを固定しても問題なさそうな要素はなるべくwidthやheight指定しましょう。 領域を確保した親コンテンツがある状態で中身をレイアウトしていくのが理想です。 以下は、ボタンのスタイル例の一部です。 しっかりとwidthとheightで領域を確保した上で中央寄せします。 良くない例で言えば、paddingやmax-widthなどの可変してしまうプロパティのみでの構築です、要素が可変するものはレイアウトシフトの原因になります。 display: flex; justify-content: center; align-items: center; widht: 200px; height: 100px; 追従ヘッダー Webサイトでよく使用されているスクロールしてもついてくる追従ヘッダーです、初めからposition: fixedで置いてしまうと高さがないためレイアウトシフトの原因になります。 スクロール後に固定されるように工夫が必要です、JSなどを使用し読み込み後の固定にすると良いです。 Webフォント 結論から言いますと、きちんと扱えばWebフォントは使っても大丈夫です。 中にはフォントの読み込みに時間がかかり、レイアウトシフトしてしまうこともあるので注意は必要です。 検証方法とツール PageSpeed Insights Google公式の検証ツールです、スコアの表示に加え実際のズレが発生している箇所を知らせてくれるので、基本的にはこちらを確認しながら進めます。 Google Chromeデベロッパーツール デベロッパーツールを開いたら、Performanceタブに移動します。 リロードの矢印アイコンをクリックして、ページの読み込みが終わったらStopを押します。 ものすごく細かな静止画で、レイアウトシフトをしている箇所を確認することができます。 Web Vitals Chrome拡張機能です。 検証が非常に楽でページのCumulative Layout Shiftスコアを一瞬で表示してくれます。 以上となります、最後までご覧戴きありがとうございました。

コアウェウブバイタル CLS対策コーディング そもそもCLSとは？ 2021年5月にGoogle検索結果のランキング要素に新たなページエクスペリエンスが追加されました。 評価の対象としてコアウェブバイタルという３つの指標が定められました。 3つの指標とは、LCP（速度）、FID（応答性）、CLS（視覚要素安定性）です。 その中で、おそらくマークアップ手法で最も影響を受けやすいものがCumulative Layout Shift、略してCLSです。 従来のコーディングだと今までどちらでもできた表現が、はっきり良否が分かれるため逆にやりがいを感じるかもしれません。 改善のきっかけ アクセス解析担当者から、サーチコンソール上のエラー報告を受けCLSの存在を知りました。 フロント部分の原因と知り調査を開始しました。 改善前の私のコーディングはレスポンシブサイトを意識した常にレイアウトが伸び縮みするようなCLSエラーを代表するような悪い例でした・・・ 実装例 ここからは実際にエラーの解消に役立った具体的なコーディング手法をいくつか紹介します。 基本的には、HTMLとCSSの書き方を気をつけるだけで改善できます。 画像の処理 画像の読み込みは遅れて行われるため、widthとheightを指定しないと画像の大きさのままに表示領域を変えてしまいます。 imgタグにwidth属性とheight属性を指定していきます。 <img src="hoge.jpg" width="200" height="100"> モバイルやタブレットはCSSで対応しましょう。 @media screen and (max-width: 767px) { img { width: 100px; height: 50px; } } タブレットは、現状では評価の対象外なので意識する必要は無さそうです。 また対策として、CSSをインラインで書いた方が良いという声もありますが、通常の外部ファイル化でもエラー解消出来たので問題ないです。 デスクトップもCSSで対処できますが、width属性とheight属性を指定しなかった場合に別の警告が出てしまうので必ず指定しましょう。 モジュール 幅や高さを固定しても問題なさそうな要素はなるべくwidthやheight指定しましょう。 領域を確保した親コンテンツがある状態で中身をレイアウトしていくのが理想です。 以下は、ボタンのスタイル例の一部です。 しっかりとwidthとheightで領域を確保した上で中央寄せします。 良くない例で言えば、paddingやmax-widthなどの可変してしまうプロパティのみでの構築です、要素が可変するものはレイアウトシフトの原因になります。 display: flex; justify-content: center; align-items: center; widht: 200px; height: 100px; 追従ヘッダー Webサイトでよく使用されているスクロールしてもついてくる追従ヘッダーです、初めからposition: fixedで置いてしまうと高さがないためレイアウトシフトの原因になります。 スクロール後に固定されるように工夫が必要です、JSなどを使用し読み込み後の固定にすると良いです。 Webフォント 結論から言いますと、きちんと扱えばWebフォントは使っても大丈夫です。 中にはフォントの読み込みに時間がかかり、レイアウトシフトしてしまうこともあるので注意は必要です。 検証方法とツール PageSpeed Insights Google公式の検証ツールです、スコアの表示に加え実際のズレが発生している箇所を知らせてくれるので、基本的にはこちらを確認しながら進めます。 Google Chromeデベロッパーツール デベロッパーツールを開いたら、Performanceタブに移動します。 リロードの矢印アイコンをクリックして、ページの読み込みが終わったらStopを押します。 ものすごく細かな静止画で、レイアウトシフトをしている箇所を確認することができます。 Web Vitals Chrome拡張機能です。 検証が非常に楽でページのCumulative Layout Shiftスコアを一瞬で表示してくれます。 以上となります、最後までご覧戴きありがとうございました。