コーディングCSSを使って、文字数分だけ色が変わる下線の作り方を解説
文字の長さに合わせて色付きの下線を引くCSSを紹介します。テキストを強調する装飾の作り方と、表示を調整するサンプルを確認できます。
カテゴリー: コーディング
コーディング
コーディング【初心者でもわかる】2カラム、3カラム、4カラム、5カラム以上の複数列のカラムを作る方法
CSSで2列・3列・4列、さらに5列以上のカラムを作る方法を紹介します。列数に合わせた要素の幅と配置を、サンプルコードで確認できます。
コーディング【初心者でもわかる】一部が欠けたborder（枠）の作り方
枠線の一部が欠けたデザインをCSSで作る方法を紹介します。疑似要素や背景を組み合わせ、枠の一部分を隠すサンプルを解説します。
コーディング【初心者でもわかる】cssで文字を等間隔（均等割り付け）にしたり、数行の文章の右端がキッチリ揃う方法
CSSで文字を均等に配置し、文章の右端を揃える方法を紹介します。均等割り付けの書き方と、ブラウザによる表示の違いへの対応を解説します。
コーディング【初心者でもわかる】cssを共通化させて、短く書こう！
繰り返しのCSSを共通化して短くする方法を紹介します。複数セレクタの指定や構造に合わせた選択など、記述をまとめる工夫を解説します。
コーディング【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 ＆ 確認方法
::beforeや::afterが表示されないときに確認する7つのポイントを紹介します。content、サイズ、配置などの設定を順に見直す方法を解説します。
コーディング【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法
文章のまとまりを中央に配置し、その中の文字は左揃えにする方法を紹介します。内容に応じて幅が変わるレイアウトをHTMLとCSSで解説します。
コーディング【初心者でもわかる】z-indexが効かない時に確認すること
z-indexを指定しても重なり順が変わらない場合の確認ポイントを紹介します。記事のサンプルを使い、position指定との関係を解説します。
コーディング【初心者向け】marginが効かない時の理由と対処法・対策
marginが効かないように見えるときの原因と対処法を紹介します。インライン要素の性質やマージンの相殺など、確認するポイントを整理します。
コーディング【初心者でもわかる】CSSで背景画像やグラデーションを2重や3重につける方法
CSSで背景画像やグラデーションを複数重ねる方法を解説します。カンマ区切りの記述や、各背景の位置・繰り返しを個別に設定する方法を紹介します。