「HTML・CSS」の記事一覧
2025.08.14
1行のテキストの均等割りについて
デザイン上テキストが1行に限定されている場合のテキストの均等割りを確認します。デモページはこちら 以下のhtml構造で確認します。 CSSは以下になります。te…
2025.08.12
background-clipを利用したグラデーションのテキスト
background-clip: textを利用してグラデーションのテキストを表示します。デモページはこちら 以下のhtml構造で確認します。グラデーションのテ…
2025.08.08
fit-contentのセンタリングを利用した横幅可変のグラデーション背景
width: fit-contentを利用してテキストをセンタリングし、グラデーションの背景を表示します。デモページはこちら 以下のhtml構造で確認します。d…
2025.08.05
border-imageを利用したグラデーションのボーダー
CSSのborder-imageプロパティを利用して、グラデーションのボーダーを作成します。デモページはこちら border-imageはborder-imag…
2025.07.01
mask-imageを利用したグラデーションの点線
CSSのmask-imageプロパティを利用して、グラデーションの点線を作成します。デモページはこちら グラデーションの点線は疑似要素にmask-imageプロ…
2025.05.08
text-decorationを利用した文字の下線
text-decorationプロパティを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用します。デモページはこちら 以下の…
2024.09.25
marginの相殺について
兄弟要素と親子要素で発生するmarginの相殺について確認します。また相殺が発生しない例外についても確認します。デモページはこちら 共通のCSSは以下になります…
2024.09.22
linear-gradientで作る格子模様と市松模様
background-imageプロパティのlinear-gradientで、1pxの線のみの格子模様と塗りと塗り無しの市松模様を作成します。デモページはこちら…
2024.09.21
mask-imageを利用したSVGの画像切り抜き
CSSのmask-imageプロパティを利用して、SVGで画像を切り抜きます。デモページはこちら まず、以下をmask.svgとして保存します。 共通のCSSは…
2024.09.13
疑似クラス:has()を利用した余白と色の調整
疑似クラスの:has()を利用して、liタグの余白と色を調整をします。デモページはこちら 共通のCSSは以下になります。通常時はulタグにgap: 60pxを指…
2024.09.10
backdrop-filter: blurとfilter: blurの違い
backdrop-filterプロパティのblurとfilterプロパティのblurを比較して違いを確認します。デモページはこちら 共通のCSSは以下になります…
2024.09.09
border-radiusプロパティを利用した要素サイズいっぱいの角丸
border-radiusプロパティを利用して、要素サイズいっぱいの角丸を作成します。デモページはこちら まず正方形にborder-radius: 50%を指定…
2024.09.08
clip-pathプロパティを利用した高さ可変の三角形と矢印
clip-pathプロパティを利用して、高さを可変の三角形と矢印を作成します。デモページはこちら まず共通のCSSです。clip-pathはdivタグの疑似要素…
2024.09.05
radial-gradientで作る水玉模様
background-imageプロパティのradial-gradientで水玉模様を作成します。わかりやすいように背景を繰り返し前と繰り返し後で比較します。デ…
2024.09.02
box-shadowとfilter: drop-shadowの違い
box-shadowプロパティとfilterプロパティのdrop-shadowを比較して違いを確認します。デモページはこちら filter: drop-shad…
2024.08.28
text-shadowで作る縁取りの文字
text-shadowプロパティを複数指定して、縁取りの文字を作ります。デモページはこちら text-shadowはbox-shadowと違い、広がりの距離とi…
2024.08.22
box-shadowで作る縁取りの枠線
box-shadowプロパティの重なりを利用して、縁取りの枠線を作ります。デモページはこちら box-shadow: 水平方向の距離 垂直方向の距離 ぼかしの距…
2024.08.19
縦書き文字の配置について
縦書きの文字を写真の左上・左中・左下・右上・右中・右下に配置します。デモページはこちら 以下のhtml構造で確認します。 CSSはpositionとtransf…
2024.08.17
transform複数指定時の順番について
transformプロパティで複数指定する場合は、指定の順番に注意が必要です。デモページはこちら 以下のhtml構造で確認します。 CSSでボタンの矢印を再現し…
2024.08.16
flex-shrinkで文字の改行を防ぐ
flexボックスのレイアウトで、flexアイテムにflex-shrinkプロパティを指定してテキストが改行されるのを防ぎます。デモページはこちら 以下のhtml…
2024.08.15
box-decoration-breakでテキストの背景色を設定
box-decoration-breakプロパティでテキストに背景色を設定します。複数行の文字に対応でき、改行も問題ありません。デモページはこちら 以下のhtm…
2024.06.18
z-index: -1;指定時の注意点
z-indexプロパティの重なりで、z-index: -1;を指定した時の注意点を確認します。デモページはこちら 以下のhtml構造で確認します。クラス名div…
2024.06.14
90°回転させた要素をブロック要素内右側に収めるtransform-originの設定
右上に配置した長方形の要素を90°回転させた時に、親のブロック要素内に収めるtransform-originの設定です。デモページはこちら htmlは以下のよう…
2024.02.19
Photoshopのグラデーションオーバーレイをlinear-gradientで適用
Photoshopのグラデーションオーバーレイを、background-imageプロパティのlinear-gradientで適用します。グラデーションの角度は…
2023.02.22
縦積みinline-flexの折り返しとwriting-modeによる代用
inline-flexで縦積みにした場合の折り返しと、writing-modeで縦積みにした場合の折り返しを確認します。デモページはこちら htmlは以下の単純…