HTML/CSS
前回のCLS改善の残り28ページの再検証を開始してから、2日程度で0件になって検証は合格になった。
前回サーチコンソールのCSL問題の検証で不良(CLSが0.25以上)については合格で、改善必要については検証中になっていた。
前回に続きHTML上のテーブルの数値をグラフに変換するCharts.cssを用いて縦方向のバーチャート、エリアチャート、ラインチャートの作成方法について紹介する。
今回はHTML上のテーブルの数値をグラフに変換するCharts.cssについて紹介する。
前回グローバルメニューのドロップダウンと文字サイズなど微調整をして、サーチコンソールのCSL問題の検証をした。
今回はスクロールに対して固定表示するバナーをCSSで作成する方法について紹介する。
動画や画像をページいっぱいに表示しつつ、レスポンシブ対応できるobject-fitについて今回は紹介する。
以前からたびたび発生してはレイアウト調整を行っているサーチコンソールのCSL問題。
長文や長めのコードを隠しておいて、必要に応じて展開できるdetailタグ。展開する時の動き(アニメーション)をつけるための方法が紹介されている。
今回はBoilerplateのコードを変更して緑色調のテーマとして投稿した。特徴としては、クリックすると上に戻るボタンダークモード、グローバルメニューのCSSを実装している。
今回はCSSを用いたグリッジエフェクトについて紹介したい。
今回はグラスモーフィズム(Glassmorphism)のCSSデザイン例を紹介したい。
今回はCSSのgrid-template-areasを用いて、デスクトップPC, タブレット, スマートフォンでそれぞれ異なるレイアウトにする方法について紹介する。
今回はCSSのGridを用いた12カラムのグリッドレイアウトについて紹介していきたい。
Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回は、はてなのテーマストアに非公開で投稿してテスト用ブログにインストールを行った。
Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はレスポンシブモードのデザインを行った。
今回はCSSのGridを用いたレイアウトについて紹介していきたい。パンケーキスタック(Pancake stack)はヘッダー部、メイン部、フッター部の垂直に3層からなるレイアウトで、基本的なレイアウト方法の1つである。
前回のカードデザインはコンテンツが少ない場合として2つのカードを中央に並べるデザインを紹介した。今回はコンテンツがたくさんある場合にカードをページ内に並べる方法について紹介する。
Webページでカード(タイル)デザインのサイトをよく見かけると思うが、CSSのFlexboxを用いて簡単に実装できる例 がいろいろなサイトで紹介されており、少し試してみることにした。
Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はダークモードのデザインを行った。
以前に入力要素に対するfocusに関する制御として、Javascriptのイベントハンドラを用いる方法を取り上げが、今回はCSSの疑似要素を用いた場合について紹介する。
ジグザグや縞模様などの背景パターンのCSSコードを生成するサイト]を使ってCodePenを使っていくつかパターンを生成したので紹介する。
前回PC版のおおまかなデザインは作成したが、レスポンシブなどレイアウト(配置・幅など)を切り替える上で、それぞれのクラス・IDの範囲がわかりやすくなるように境界線を設定した。（完成時は取り除く）
文字（記事）の部分を中央に固定幅で表示し、画像などのコンテンツをページ幅いっぱいに表示するフルブリードレイアウトをCSSで記述する方法につて紹介したい。
Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はPC版のデザインについて仕上がりつつあるので紹介していきたい。
本ブログではサイドバーのリファレンスと上に戻るボタンの矢印にFontAwesomeのアイコンを使用していたが、自分のchrome環境では読み込みができなくなっていたため、今回ははてなのblogiconに統一することにした。
前回にGoogleサーチコンソールで検出されたCLS に関する問題: 0.1 超（モバイル）が再び発生したことを記事にしたが2週間程度経過して一応下のように良好の状態が続いている。
前回はBoilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介したが、今回はこれから新しいブログテーマ作成する上での方針についてまとめてみた。
今回は、Boilerplateのscssファイルを変更して新しいブログテーマを作成する作業方法について紹介する。
今回はcanvasとjavascriptを用いて画像を読み込んで表示する方法について紹介する。
