HTML/CSS

【CSS】backdrop-filterの使い方|背景ぼかし・明るさ調整を一発適用

CSS の backdrop-filter プロパティを使うと、要素の背後にある背景に対して「ぼかし」「明るさ調整」「彩度変更」などの効果を適
HTML/CSS

【CSS】filter: drop-shadow()の基本と使い方|box-shadowとの違い

CSS で要素に影をつける方法には box-shadow と filter: drop-shadow() の2種類があります。一見すると似ていますが、仕組みや用途には
HTML/CSS

【CSS】テキストを改行させない方法

Web ページのデザインによっては、見出しやボタンなどのテキストを1行に収めて表示したいケースがあります
jQuery

【slick】各スライドの高さを揃える方法(レスポンシブ対応)

slick スライダーを使うと、スライドごとのコンテンツ量によって高さがバラバラになり、レイアウトが崩れることがあります。特に
HTML/CSS

【CSS】SVGの色を変更する方法まとめ

SVG はアイコンやイラストに広く使われる形式で、CSS を使って柔軟に色を変更できます。ただし、埋め込み方法(<img> / CSS 背
jQuery

【jQuery/slick】スライドにタブでフォーカスさせない設定方法

slick.js を使ってカルーセルやスライダーを実装すると、デフォルトでは各スライド内のリンクやボタンなどが Tab キーで順にフ
WordPress

【WordPress】投稿のスラッグを自動で日付に設定する方法

記事作成のたびにスラッグ(URL末尾)を手で入力するのは地味に手間です。運用ポリシーとして「投稿のスラッグは
HTML/CSS

【CSS】Flexboxで文字が下にずれる原因と解決方法

Flexbox を使った横並びレイアウトで、テキストが微妙に下へ寄って見えることがあります。原因は「交差軸のそろえ方」「ベースライン揃
WordPress

【WordPress】ページネーションの「…(ドット)」を変更・編集する方法

WordPress の the_posts_pagination() や paginate_links() を利用してページネーションを実装すると、ページ数が多い場合に途中
jQuery

【jQuery】ヘッダーの高さを取得してコンテンツ位置を調整する方法

Webサイトで固定ヘッダーを実装すると、スクロール時にコンテンツがヘッダーと重なってしまうことがあります。この問題を解決する
HTML/CSS

【CSS】角丸画像のトリミングはobject-fitで一行解決!

「画像を角丸でトリミングしたい」「縦横比がバラバラでも枠いっぱいに綺麗に切り抜きたい」。そんなときは object-fit: cover; を
SSH

【SSH】リモートサーバーに接続してファイルを編集する方法

サーバー運用や開発作業では、リモートサーバー上のファイルを直接編集する場面がよくあります。その際に利用されるの
HTML/CSS

【CSS】position: stickyが効かない原因と解決方法

スクロールに追従する見出しやサイドナビを作る際に便利な position: sticky。しかし「効かない」「固定されない」ケースは少なくあり
JavaScript

【JavaScript】アニメーションライブラリ「GSAP」の使い方

Web制作においてリッチなアニメーションを実装する場合、JavaScript ライブラリ「GSAP(GreenSock Animation Platform)」は
Linux

【Linux】cdコマンドで作業ディレクトリを移動する方法

Linux で作業するとき、最もよく使うコマンドのひとつが cd コマンドです。cd は “change directory” の略で、現在の作業ディレク
Linux

【Linux】よく使うコマンドまとめ

Linux を利用する上で頻繁に使うコマンドを整理しておくと、日常の操作やトラブルシューティングがスムーズになります。本記事では、
SSH

【SSH】teratermで「error:0909006C:PEM routines:get_name:no start line」エラーが発生した場合の対処方法

Tera Term で公開鍵認証を使って接続しようとした際に、error:0909006C:PEM routines:get_name:no start line と表示される場合は
WordPress

【WordPress】標準の投稿アーカイブのパーマリンクを任意のURLにする方法

WordPress では通常、標準の投稿タイプ(post)のアーカイブページは https://example.com/blog/
HTML/CSS

【CSS】Flexboxで横幅指定が効かない原因と解決方法

Flexbox を使ってレイアウトを組んでいると、「横幅を指定したのに反映されない」「子要素のサイズが意図通りにならない」といった
Webサイト全般

【note】記事一覧を取得して表示する方法|RSSの活用と実装例

note の記事一覧を自分のサイトに自動表示したい場合、現時点では公式の公開 API は提供されていません。そのため、note が案内して