本文へスキップ
メニュー
ダークモード

フロントエンド の記事

18件の記事

すべてバックエンド・インフラガジェット開発環境・ツールSEO・アクセス解析フロントエンド

2025年 1件

  1. counter()とcounters()でCSS自動採番をシンプルに実装する

    CSSのcounter()とcounters()を使って、見出しやリストに番号を自動で振る方法を、サンプルコードと出力例で説明します。数字のフォーマットの指定と、3桁以上の0埋めの方法も扱います。

2024年 14件

  1. JavaScriptライブラリの用途別まとめ

    JavaScriptのライブラリを、カルーセル・ライトボックス・スクロールエフェクト・アニメーション・グラフ・エディター・シンタックスハイライトなどの用途別に、ライセンスとリポジトリを添えて一覧にしています。随時更新しています。

  2. カスタムプロパティにSassの変数を渡すと変数のままコンパイルされてしまう

    CSSのカスタムプロパティの値にSassの変数を書くと、変数名のまま出力されます。Sassがカスタムプロパティの値を書かれたとおりに出力するためで、インターポレーション #{} を使うと変数の値を渡せます。

  3. Fractalでスタイルガイドを作ってみる #2 ― プロジェクトを0から始める方法と最もシンプルなコンポーネントの作成

    Fractalのプロジェクトを、newコマンドを使わずに0から作る方法を説明します。ディレクトリの構成、fractal.config.jsの設定、最もシンプルなコンポーネントとドキュメントのインデックスページの作成、開発サーバーの起動までを扱います。

  4. Fractalでスタイルガイドを作ってみる #1 ― インストールから始め方まで

    スタイルガイドジェネレーターのFractalを使って、Webサイトのコンポーネントをまとめたスタイルガイドを作ります。1回目は、FractalとFractal CLIのインストールと、newコマンドでプロジェクトを作って開発サーバーを起動するまでを説明します。

  5. 三角関数を駆使してCSSだけでローディングスピナーを作ろう！

    CSSのsin()とcos()を使って、8つの丸が回転しているように見えるローディングスピナーをCSSだけで作ります。円周上に等間隔で丸を並べる考え方から、アニメーションのずらし方までを順に解説します。

  6. buttonタグにはtype="button"をつけるべし

    buttonタグのtype属性を省略すると、既定値はsubmitになります。フォームの中で意図せず送信されないように、送信以外のボタンにはtype="button"を明示しましょう。

  7. SVGアイコンをsymbolで定義してuseで呼び出しまくる

    SVGアイコンをsymbolで定義し、useで呼び出して使い回す方法です。imgタグやインラインSVGと比べた利点と、currentColorを使った色の指定、サイズの調整方法も紹介します。

  9. Next.jsのサイトでSearch Consoleのインデックス登録をリクエストできなかった原因と対処

    Next.js（App Router）のサイトで、Google Search Consoleのインデックス登録のリクエストが500番台のエラーになりました。原因は、useSearchParamsを使うコンポーネントをSuspenseで囲んでいなかったことでした。調べた手順と修正方法をまとめます。

  10. CSSのカスケードレイヤー「@layer」の使い方

    CSSのカスケードレイヤー（@layer）は、スタイルをレイヤーに分けて、どのレイヤーを優先するかを決められる機能です。レイヤーの作り方、順番の指定、@importでの読み込み、詳細度との関係を解説します。

  13. Intersection Observer APIを使ったスクロールアニメーション

    スクロールに合わせて要素をフェードインさせる処理は、Intersection Observer APIを使うと、jQueryやプラグインなしで実装できます。1回だけ動かす書き方と、行きも帰りも動かす書き方を紹介します。

  14. gulpでEJSをHTMLにコンパイルする環境を作る

    テンプレートエンジンのEJSを、gulpでHTMLにコンパイルする環境の作り方です。パッケージのインストールからgulpfile.jsの書き方、JSONのデータの読み込みまでをまとめます。

2023年 3件

  3. CSSだけで文末を3点リーダーで省略表示させる

    複数行のテキストを指定した行数で省略して末尾に3点リーダーを表示するには、-webkit-line-clampをdisplay: -webkit-box;などと組み合わせて指定します。