Google スプレッドシートで祝日を取得する
Google スプレッドシートに、内閣府が公開している祝日のCSVを読み込んで祝日リストを作る方法です。IMPORTDATA関数を使う方法と、Google Apps Scriptで毎月自動で更新する方法を紹介します。
記事一覧
1位 2位 macOSでgit-credential-osxkeychainのポップアップが出てきたときの対処方法
macOSでGitを使っていると「git-credential-osxkeychainがキーチェーン内の機密情報を使用しようとしています」というポップアップが出ることがあります。その場での対処方法と、キーチェーンの項目を作り直して表示されないようにする方法を説明します。
3位 Dart Sassへの移行ガイド：@useと@forward、ビルトインモジュールの書き方
LibSassからDart Sassへの移行方法を解説。@importに代わる@useや@forwardの書き方から、ビルトインモジュールの使い方まで詳しく紹介します。
4位 SVGアイコンをsymbolで定義してuseで呼び出しまくる
SVGアイコンをsymbolで定義し、useで呼び出して使い回す方法です。imgタグやインラインSVGと比べた利点と、currentColorを使った色の指定、サイズの調整方法も紹介します。
5位 Pythonで簡易的なDiscordのBotを作成する
PythonとVisual Studio Codeで、決まったメッセージに返事をする簡単なDiscordのBotを作ります。Discord Developer PortalでのBotの設定、discord.pyとpython-dotenvの準備、テスト用のサーバーへの追加までを紹介します。
6位 Basic認証でログアウトする方法
Basic認証をかけたWebサイトで、ログアウトと再ログインをする方法です。URLのホスト名の前に文字を足してアクセスするだけで、認証ダイアログをもう一度表示できます。
7位 Web制作に便利なVisual Studio Codeのコードスニペット
Visual Studio Codeのユーザースニペットを使うと、短いキーワードでよく使うコードを挿入できます。スニペットの設定方法と、HTMLやCSSで使っているスニペットを紹介します。
8位 Next.jsでPrismaからSupabaseを操作してみる
PrismaからSupabaseのデータベースを操作する簡単なToDoリストを、Next.js（App Router）で作ります。環境構築とマイグレーション、APIの作成、ページの実装、動作確認までの手順を説明します。
9位 JavaScriptでCSSのカスタムプロパティを設定・取得する
JavaScriptでCSSのカスタムプロパティを扱うには、setProperty()で値をセットし、getComputedStyle()とgetPropertyValue()で値を取得します。Resize Observer APIで高さの変化に追従する方法も紹介します。
10位 Intersection Observer APIを使ったスクロールアニメーション
スクロールに合わせて要素をフェードインさせる処理は、Intersection Observer APIを使うと、jQueryやプラグインなしで実装できます。1回だけ動かす書き方と、行きも帰りも動かす書き方を紹介します。
11位 リンクをまとめて開きたいときに便利なChrome拡張機能「Pasty」
Chrome拡張機能「Pasty」を使うと、コピーしたテキストに含まれる複数のURLをまとめて新しいタブで開けます。インストール方法と使い方を紹介します。
12位 Google Search Consoleの初回設定手順
Google Search Consoleは、プロパティを追加してサイトの所有権を確認すると使い始められます。プロパティ タイプの選び方、DNSレコードやHTMLタグでの確認方法、サイトマップの送信までを解説します。
13位 Next.jsのサイトでSearch Consoleのインデックス登録をリクエストできなかった原因と対処
Next.js（App Router）のサイトで、Google Search Consoleのインデックス登録のリクエストが500番台のエラーになりました。原因は、useSearchParamsを使うコンポーネントをSuspenseで囲んでいなかったことでした。調べた手順と修正方法をまとめます。
14位 Web制作で役立つVisual Studio Codeの拡張機能【基本編】
Web制作でVisual Studio Codeを使うときに入れておくと便利な拡張機能を紹介します。日本語化やアイコンテーマ、コード整形、Git、HTML・Sass・PHPで役立つものまで、設定のコツとあわせてまとめました。
15位 三角関数を駆使してCSSだけでローディングスピナーを作ろう！
CSSのsin()とcos()を使って、8つの丸が回転しているように見えるローディングスピナーをCSSだけで作ります。円周上に等間隔で丸を並べる考え方から、アニメーションのずらし方までを順に解説します。
16位 XcodeでSwiftのプロジェクトを作成する
Xcodeで新しいプロジェクトを作成する手順です。テンプレートの選び方と、Product NameやInterface、Storageなど作成時に設定する項目の意味、Gitリポジトリの作成についても解説します。
17位 CSSだけで文末を3点リーダーで省略表示させる
複数行のテキストを指定した行数で省略して末尾に3点リーダーを表示するには、-webkit-line-clampをdisplay: -webkit-box;などと組み合わせて指定します。
18位 急上昇CSSだけでスムーススクロールを実装し、ヘッダーの高さ分だけ余白を確保する
ページ内リンクのスムーススクロールは、CSSのscroll-behaviorだけで実装できます。固定ヘッダーに見出しが隠れないようにするscroll-margin-topの使い方と、動きを減らす設定への配慮も紹介します。
19位 急上昇microCMSのコンテンツを更新したときにVercelで自動デプロイをする
VercelのDeploy Hooksで作ったURLをmicroCMSのWebhookに登録すると、コンテンツを更新したときに自動でデプロイできます。設定の手順を説明します。
20位 macOSにPythonの開発環境を構築する
Homebrewでpyenvをインストールし、pyenvでPythonをインストールしてバージョンを切り替える方法を解説します。特定のディレクトリだけバージョンを変える方法や、pipのバージョンの確かめ方も紹介します。