つれづれなる備忘録

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

HTML/CSS

ブログデザイン備忘録 ~ サーチコンソールの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について紹介する。

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

前回グローバルメニューのドロップダウンと文字サイズなど微調整をして、サーチコンソールのCSL問題の検証をした。

ブログデザイン備忘録 ~ position:sticky

今回はスクロールに対して固定表示するバナーをCSSで作成する方法について紹介する。

ブログデザイン備忘録 ~ object-fit

動画や画像をページいっぱいに表示しつつ、レスポンシブ対応できるobject-fitについて今回は紹介する。

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

以前からたびたび発生してはレイアウト調整を行っているサーチコンソールのCSL問題。

ブログデザイン備忘録 ~ detailタグのアニメーション

長文や長めのコードを隠しておいて、必要に応じて展開できるdetailタグ。展開する時の動き(アニメーション)をつけるための方法が紹介されている。

ブログデザイン備忘録 ~ はてなブログテーマの自作9

今回はBoilerplateのコードを変更して緑色調のテーマとして投稿した。特徴としては、クリックすると上に戻るボタンダークモード、グローバルメニューのCSSを実装している。

ブログデザイン備忘録 ~ グリッチエフェクト

今回はCSSを用いたグリッジエフェクトについて紹介したい。

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

今回はグラスモーフィズム(Glassmorphism)のCSSデザイン例を紹介したい。

ブログデザイン備忘録 ~ gridを用いたレイアウト3

今回はCSSのgrid-template-areasを用いて、デスクトップPC, タブレット, スマートフォンでそれぞれ異なるレイアウトにする方法について紹介する。

ブログデザイン備忘録 ~ gridを用いたレイアウト2

今回はCSSのGridを用いた12カラムのグリッドレイアウトについて紹介していきたい。

ブログデザイン備忘録 ~ はてなブログテーマの自作8

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回は、はてなのテーマストアに非公開で投稿してテスト用ブログにインストールを行った。

ブログデザイン備忘録 ~ はてなブログテーマの自作7

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はレスポンシブモードのデザインを行った。

ブログデザイン備忘録 ~ gridを用いたレイアウト1

今回はCSSのGridを用いたレイアウトについて紹介していきたい。パンケーキスタック(Pancake stack)はヘッダー部、メイン部、フッター部の垂直に3層からなるレイアウトで、基本的なレイアウト方法の1つである。

ブログデザイン備忘録 ~ カードデザイン2

前回のカードデザインはコンテンツが少ない場合として2つのカードを中央に並べるデザインを紹介した。今回はコンテンツがたくさんある場合にカードをページ内に並べる方法について紹介する。

ブログデザイン備忘録 ~ カードデザイン

Webページでカード(タイル)デザインのサイトをよく見かけると思うが、CSSのFlexboxを用いて簡単に実装できる例 がいろいろなサイトで紹介されており、少し試してみることにした。

ブログデザイン備忘録 ~ はてなブログテーマの自作6

Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はダークモードのデザインを行った。

ブログデザイン備忘録 ~ focus疑似要素いろいろ

以前に入力要素に対するfocusに関する制御として、Javascriptのイベントハンドラを用いる方法を取り上げが、今回はCSSの疑似要素を用いた場合について紹介する。

ブログデザイン備忘録 ~ 背景パターンの生成

ジグザグや縞模様などの背景パターンのCSSコードを生成するサイト]を使ってCodePenを使っていくつかパターンを生成したので紹介する。