コーディングの記事一覧

Micromodal.jsを使って、アクセシビリティに配慮したハンバーガーメニューを作る

Micromodal.jsを活用し、アクセシビリティに配慮したハンバーガーメニューの作り方をデモ付きで解説。アクセシビリティを意識したライブラリの活用機会は、今後さらに増えていくと考えられ、今のうちに仕組みを理解し、知見を深めたいと思います。

【CSS】inputに3桁カンマを表示しつつ、valueは数値のまま保持する方法

フォームの数値に3桁カンマを表示したい。でもinputのvalueは数値のまま保持したい。そんなときに使える、CSSとJSで実現する“擬似的なカンマ表示テクニック”をご紹介。視認性を高めつつ、ロジックへの影響を最小限に抑えます。

【CSS】placeholderの色を変更しつつ、フォーカス時には非表示にする方法

inputのplaceholderが見えにくい場合に、CSSで色を変えたり、フォーカス時に非表示にする方法を紹介。フォームの視認性やデザイン改善に使える小技です。

【CSS】mask-imageを活用した波線(ウェーブ)のコンテンツ区切り。画像1枚でどんな色にも対応

CSSのmask-imageを活用し、波線（ウェーブ）デザインのコンテンツ区切りを作る方法を解説。背景色やグラデーション、背景画像に関係なく、共通の1枚の画像で対応可能。汎用性を重視した実装方法を紹介します。

あのMagnific Popupに、昨年最新版がリリースされたって知ってた？

jQueryモーダルプラグインの老舗「Magnific Popup」が、実は昨年、8年ぶりにバージョンアップしていたようです。今後の保守方針や、公式が推奨するdialogタグへの移行について解説します。

CSS Gridの1frでカラムがはみ出す!? 横スクロール問題をminmax()で解決

CSS Gridの1fr指定でカラムが画面外にはみ出し、横スクロールバーが表示される問題の原因と解決方法を解説。minmax()を使った対処法で、レスポンシブやウィンドウ縮小時のレイアウト崩れを防ぎます。

CSSのネストの書き方：子要素以外にもこんなに幅広く使える

CSSのネストは、子要素に限らず、要素自身の擬似要素（::before / ::after）や擬似クラス（:hover）、さらにはメディアクエリまで幅広く活用できます。これらのCSSネストの書き方を、サンプルコードを交えて解説します。

Grid(Flex)配下のslick.jsが、バグって横幅が異常に伸びる時の解決方法

「slick.js」でスライダーを実装した際、display: grid;やdisplay: flex;要素の配下だと、slickの横幅が異常に伸びるバグに遭遇しました。デモコードを交えつつ、その解決方法を解説します。

【CSS】tableの見出しセルを文字幅に合わせる。文字の両端も揃える(スペースは使わない)

tableのセル幅を自動で文字幅に合わせ、さらに行ごとの文字の両端も揃える方法を解説します。見出しセルの幅が文字数ピッタリ、かつ文字の両端揃えが求められるテーブルデザインの場合、実際の本番データではセル内に何文字入るのか分からないため、コーディングで調整が難しいケースに汎用的に対応します。

【CSS】テキスト(文字)にグラデーションをつける方法と注意点

テキスト(文字)にCSSでグラデーションを適用する方法を紹介。background-clipとcolor: transparentプロパティを組み合わせる手法や、グラデーションが反映されない際の確認ポイントも解説します。

CSSのみで作る無限ループスライダー(横方向・縦方向)。仕組みとポイントも併せて解説

JavaScript不要。カルーセルのスライダーはHTMLとCSSだけで簡単に実装できます。CSSだけで無限ループを実現する仕組みや、上手くいかない(途切れる、空白が出来る、ループ時にズレる)場合の原因を、デモを交えながら詳しく解説します。

【VSCode】アクティブなタブが、毎回あちこちに飛んで混乱するので調整してみた

VSCodeのタブ制御を調整しました。タブを開いた時は常に右端に、閉じた時は直前のタブではなく右隣のタブにフォーカスが移るように変更。併せて、背景色も調整しました。今回はその方法を解説します。

CSSのネスト(入れ子)は、当面の間は「＆記号」を付けた方が安心か

CSSのネスト(入れ子)で記述したスタイルが、iPhoneだと全く効かない事態に遭遇。結論から言うと、iOSのバージョンによっては「& 入れ子セレクター」の記述が未だに必要であり、それが無視出来ないシェア率で残っていました。詳しく解説します。

最新版Chromeはaspect-ratioをheightの設定値として扱ってくれない？

Windows版Chrome124にてaspect-ratioを指定してheight値を省略した要素と、position: absoluteの位置調整の組み合わせに不具合が発生しました。対処法を詳しく解説します。

detailsタグで作るアコーディオン。CSSだけで実装可。アクセシビリティにも対応

よくある質問(FAQ)の実装で重宝するアコーディオンUI。今まではJavaScriptで作ってきましたが、detailsタグならCSSだけでサクッと実装。しかも標準でキーボード操作・スクリーンリーダーに対応しアクセシビリティも優秀。デモを交えながら解説します。

caret-color：点滅カーソル(キャレット)の色はCSSで変えられる

文章の挿入位置を表すキャレット(点滅している縦棒)は、CSSで簡単に装飾出来ます。WordPressのGutenbergで編集中に、選択した文字位置がわからない事はありませんか？今回は「caret-color」プロパティについて、デモを交えながら解説します。

【CSS】地味に厄介な「背景色付きテキスト(横幅追従･paddingあり)」のコーディング方法

テキスト量に追従して行ごとに背景色が付くデザイン。一見単純に見えますが、実はモダンCSSを使わないと実装は困難です。その実装方法を解説します。