つれづれなる備忘録

日々の発見をあるがままに綴る

HTML/CSS

ブログデザイン備忘録 ~ GA4

今回はGoogleアナリティクス4の設定とはてなブログの追加データを設定して表示した結果について紹介したい。

ブログデザイン備忘録 ~ ScrollBtween

ScrollBtweenはスクロールの位置に基づいてCSSプロパティを変化させるツール。

ブログデザイン備忘録 ~ FID改善結果2

前回のFID改善について、特に内容は変えずに引き続き検証を行ったが結果、サーチコンソール上で合格という判定になった。

ブログデザイン備忘録 ~ Loaders

サイト等の遷移中の表示をHTMLとCSSだけの実装例が以下のサイト"Loaders"で紹介されている。

ブログデザイン備忘録 ~ モリサワフォント

以前紹介したGoogle Fontに読みやすいことで定評のあるモリサワフォントが使用できるようになった。

ブログデザイン備忘録 ~ FID改善結果

前回のFID改善について、検証を行ったが結果としては改善に至らずということだった。

ブログデザイン備忘録 ~クレイモーフィズム

ニューモーフィズム、グラスモーフィズムに続いて今度はクレイモーフィズム (Claymorphism) というデザイン手法が登場した。

ブログデザイン備忘録 ~2022年のトレンドカラー

今年最初の記事は、2022年のWebデザインのトレンドカラーについて取り上げたい。

ブログデザイン備忘録 ~ オフスクリーン画像遅延読み込み

今回はCLSではなくFID:初回入力遅延で要改善が発生したので対策をすることにした。

ブログデザイン備忘録 ~ テキストのグロー、グラデーション

かなり前に取り上げたテーマだが、今回はテキストのグローやグラデーション効果について紹介したい。

ブログデザイン備忘録 ~ メニューバー更新

今回は最近の記事のカテゴリーからブログのメニューバーを更新することにした。

ブログデザイン備忘録 ~ 翻訳回避機能の検証

今回は前回紹介したHTMLの翻訳回避機能をいくつかの翻訳サイトを使って検証した。

ブログデザイン備忘録 ~ HTML/CSSのTips

今回はブラウザの機能の発展に伴って便利な場合があるHTML/CSSの機能について紹介したい。

ブログデザイン備忘録 ~ Google fonts

Google fontsの日本語フォントの種類が増えていた。当ブログもタイトルにGoogle fontsを使用しているが、使用当時は5-6種類だったが現在は30種類まで増えている。

ブログデザイン備忘録 ~ accent-color

CSSの新しいプロパティ:accent-colorはチェックボックスやラジオボタンなどに色を1行でコントロールできる。

ブログデザイン備忘録 ~ Animistaの応用

今回はAnimistaを使って、過去に紹介したニューモフィックデザイン、文字のモーフィングを組み合わせたCSSアニメーションについて紹介する。

ブログデザイン備忘録 ~ スクロールに連動するアニメーション

前回の記事でAnimistaを紹介したが、今回は本来のスクロールに連動するアニメーションを実装を紹介したい。

ブログデザイン備忘録 ~ Animista

スクロールに連動するアニメーションを実装で紹介されているCSSアニメーションの生成ツールAnimistaを紹介したい。

ブログデザイン備忘録 ~ サーチコンソールのFID改善

サーチコンソールでたびたびCLS(レイアウトシフト)についてエラーが検出されていたが、今回初めてモバイルでFID (100ms超は要改善)のエラーが検出された。

ブログデザイン備忘録 ~ モーフィング

今回はCSSを用いた文字の変形/モーフィングの方法について紹介したい。

ブログデザイン備忘録 ~ サーチコンソールの6月CLS指標アップデート2

前回のサーチコンソールの6月CLSアップデート後にCLS要改善と判定されたので、特に何も修正していないが検証した結果、要改善は無くなり良好URLがPC/モバイルともに増えた。

ブログデザイン備忘録 ~ サーチコンソールの6月CLS指標アップデート

前回4月のアップデートに続き6/1付でGoogleサーチコンソールのCLS指標が精度が高まるように更新されたというアナウンスされた。

ブログデザイン備忘録 ~ ネオン風サインの点滅

今回はCSSを用いてネオン風のサインを点滅させる方法について紹介したい。

ブログデザイン備忘録 ~ レスポンシブデザイン2

前回に続いてCSSのFlexboxを用いて、今回はブログページでよく見かけるナビゲーションバー, サイドバー, フッターの構成と聖杯レイアウトのレスポンシブデザインについて紹介したい。

ブログデザイン備忘録 ~ レスポンシブデザイン

今回はCSSのFlexboxを用いて、代表的なページ構成としてナビゲーションバーとサイドバーのデザインをデスクトップとモバイルで切り替えるレスポンシブデザインについて紹介したい。

ブログデザイン備忘録 ~ サーチコンソールのCLS指標アップデート

前回のCLS改善の残り28ページの再検証を開始してから、2日程度で0件になって検証は合格になった。

ブログデザイン備忘録 ~ サーチコンソールのCLS問題(PC)、検証完了

前回のCLS改善の残り28ページの再検証を開始してから、2日程度で0件になって検証は合格になった。

ブログデザイン備忘録 ~ サーチコンソールのCLS問題(PC)、検証結果2

前回サーチコンソールのCSL問題の検証で不良(CLSが0.25以上)については合格で、改善必要については検証中になっていた。

ブログデザイン備忘録 ~ チャート作成2

前回に続きHTML上のテーブルの数値をグラフに変換するCharts.cssを用いて縦方向のバーチャート、エリアチャート、ラインチャートの作成方法について紹介する。

ブログデザイン備忘録 ~ チャート作成

今回はHTML上のテーブルの数値をグラフに変換するCharts.cssについて紹介する。