「コーディング」の記事 2024/10/09 Web制作 【CSS】テキスト(文字)にグラデーションをつける方法と注意点 テキスト(文字)にCSSでグラデーションを適用する方法を紹介。background-clipとcolor: transparentプロパティを組み合わせる手法や、グラデーションが反映されない際の確認ポイントも解説します。[記事を見る] 2024/09/25 Web制作 CSSのみで作る無限ループスライダー(横方向・縦方向)。仕組みとポイントも併せて解説 JavaScript不要。カルーセルのスライダーはHTMLとCSSだけで簡単に実装できます。CSSだけで無限ループを実現する仕組みや、上手くいかない(途切れる、空白が出来る、ループ時にズレる)場合の原因を、デモを交えながら詳しく解説します。[記事を見る] 2024/09/11 Web制作 【VSCode】アクティブなタブが、毎回あちこちに飛んで混乱するので調整してみた VSCodeのタブ制御を調整しました。タブを開いた時は常に右端に、閉じた時は直前のタブではなく右隣のタブにフォーカスが移るように変更。併せて、背景色も調整しました。今回はその方法を解説します。[記事を見る] 2024/07/23 Web制作 CSSのネスト(入れ子)は、当面の間は「＆記号」を付けた方が安心か CSSのネスト(入れ子)で記述したスタイルが、iPhoneだと全く効かない事態に遭遇。結論から言うと、iOSのバージョンによっては「& 入れ子セレクター」の記述が未だに必要であり、それが無視出来ないシェア率で残っていました。詳しく解説します。[記事を見る] 2024/04/21 Web制作 最新版Chromeはaspect-ratioをheightの設定値として扱ってくれない？ Windows版Chrome124にてaspect-ratioを指定してheight値を省略した要素と、position: absoluteの位置調整の組み合わせに不具合が発生しました。対処法を詳しく解説します。[記事を見る] 2024/03/16 Web制作 detailsタグで作るアコーディオン。CSSだけで実装可。アクセシビリティにも対応 よくある質問(FAQ)の実装で重宝するアコーディオンUI。今まではJavaScriptで作ってきましたが、detailsタグならCSSだけでサクッと実装。しかも標準でキーボード操作・スクリーンリーダーに対応しアクセシビリティも優秀。デモを交えながら解説します。[記事を見る] 2024/03/09 Web制作 caret-color：点滅カーソル(キャレット)の色はCSSで変えられる 文章の挿入位置を表すキャレット(点滅している縦棒)は、CSSで簡単に装飾出来ます。WordPressのGutenbergで編集中に、選択した文字位置がわからない事はありませんか？今回は「caret-color」プロパティについて、デモを交えながら解説します。[記事を見る] 2023/11/03 Web制作 【CSS】地味に厄介な「背景色付きテキスト(横幅追従･paddingあり)」のコーディング方法 テキスト量に追従して行ごとに背景色が付くデザイン。一見単純に見えますが、実はモダンCSSを使わないと実装は困難です。その実装方法を解説します。[記事を見る]
