HTML/CSS

HTML/CSS

【CSS】paddingで高さが変わる原因と対処法|box-sizingが効かないときの解決策

要素に padding を指定したら、意図せず高さや幅が膨らんでしまった経験はありませんか?これは CSS の「ボックスモデル」の仕組み
HTML/CSS

【HTML5】input type=”tel”の使い方|電話番号入力欄の実装と注意点

HTML5 で導入された <input type="tel"> は、電話番号入力に特化した入力フィールドを作るときに使用します。見た目は通常のテキス
HTML/CSS

【HTML】入力フォームに最初からテキストを表示する方法|placeholder と value の正しい使い分け

フォーム入力欄に「ヒント」や「既定値」を最初から表示したいとき、HTML では placeholder 属性と value 属性の 2 種類の方法があり
HTML/CSS

【CSS】縦横比を維持してレスポンシブに画像を表示する方法

画像を横幅いっぱいに広げつつ縦横比を崩さない表示は、もっとも頻出のレイアウト要件です。結論から言うと「img 要素
HTML/CSS

【CSS】z-indexが効かない原因と解決方法|スタッキングコンテキスト完全解説

CSSのz-indexが効かない原因と解決方法を完全解説。スタッキングコンテキスト・position・opacity/transform・Flexbox/Grid・isolation・設計ベストプラクティスなど全パターンのコード例付き。
HTML/CSS

【CSS】ネガティブmarginが効かない原因と正しい解決方法

デザイン調整で「要素を親の外にはみ出させたい」ときに使われるのがネガティブマージン(負の margin)です。しかし、指定しても思
HTML/CSS

【CSS】hoverでアニメーションを停止する方法

CSS のアニメーションを適用している要素を、マウスオーバー(:hover)したときに一時停止させたいことがあります。その場合
HTML/CSS

【HTML】スクリーンリーダーに読み上げさせない aria-hidden の正しい使い方

Web アクセシビリティを考慮する上で、不要な情報をスクリーンリーダーに読み上げさせないことは重要です。そのために使われる属性
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行に収めて表示したいケースがあります
HTML/CSS

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

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

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

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

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

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

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

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

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

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

【CSS】ゴシック体から明朝体に変更する方法

Webサイトのデザインにおいて、フォントの種類は印象を大きく左右します。特に日本語の表現においては、ゴシック体と明朝体の違いが
HTML/CSS

【CSS】文字数に応じてフォントサイズを自動調整する方法

CSSのdata属性とカスタムプロパティを使って文字数に応じたフォントサイズ調整を実装する方法を解説。JavaScriptとの組み合わせによる動的対応も紹介します。
HTML/CSS

【CSS】position: stickyが効かない原因と解決方法|全パターン完全解説

CSSのposition: stickyが効かない原因と解決方法を完全解説。overflow・親要素の高さ・Flexbox/Grid・Safari対応・DevToolsデバッグなど全パターンのコード例付き。
HTML/CSS

【CSS】flexでmax-heightやmax-widthが効かない場合の原因と対処法

flexレイアウトを使っていると、子要素にmax-heightやmax-widthを指定しているのに思った通りに制限が効かない、ということがあ