2024年11月2日(フォーム)入力チェックでエラーになったテキストフィールドのスタイルを変更したい入力内容に不備があるテキストフィールドやテキストエリアにスタイルを適用することができます。「:required」セレクタは、必須入力項目required属性がつ... カテゴリー WEB
2024年11月2日(フォーム)選択されたらテキストフィールドの色を変えたいテキストフィールド(メールアドレス用、電話番号用のテキストフィールドを含む)やテキストエリアが選択され、入力可能になった状態のことを「フォーカス状態」といいます... カテゴリー WEB
2024年11月2日テーブル セル内のテキストが折り返さないセルを指定したいテーブルの幅が狭くなっても改行させたくないテキストがあると、そのセルに「white-space: nowrap;」を適用します。 white-spaceプロパテ... カテゴリー WEB
2024年11月2日マウスが重なった行の背景色を変更したいテーブルのセルにマウスポインタがホバーしたときだけ、その行の背景色を変更します。特に列数・行数の多いテーブルを少しでも読みやすくするために効果的です。ポイントは... カテゴリー WEB
2024年11月2日テーブルの背景色を奇数業と偶数行で塗り分けたい奇数行と偶数行で交互に色を変えて、シマシマのテーブルを作るとき、「:nth-child(n)」セレクタを使って、テーブル行を交互に塗分けます。非常によく使われる... カテゴリー WEB
2024年11月2日テーブル 見出し行にだけ背景を設定したい見出し行など、特定の行にだけ背景を設定したいときは、<th>や<td>に対してではなく、<tr>にCSSを適用します。また、HTMLで<... カテゴリー WEB
2024年11月2日テーブル全体の背景を設定したい見出し行にも通常の行にも同じ背景を設定したいとき、テーブル全体に背景画像、もしくは背景色を設定するには、<table>タグに適用されるスタイルにbackg... カテゴリー WEB
2024年11月2日セルの幅を均等にしたいセルの幅(列の幅)を自動調整に任せるのではなく、すべて均等にしたいとき。テーブルセルの幅は、そのセルのコンテンツ量に応じて自動調整されます。しかし、<ta... カテゴリー WEB
2024年11月2日セルのサイズを固定したい特定のセルだけ幅や高さを指定したいとき。テーブル各セルの幅は、コンテンツの量に合わせて自動的に調整されます。現代的なWebデザインでは、ページ全体の幅をウィドウ... カテゴリー WEB
2024年11月2日テーブルに標準的な罫線をつけたいテーブル作成するときのほぼ毎回使用する必須CSS。テーブルはCSSを適用しない限り罫線も引かれません。罫線を引くには、<table>に適用する「borde... カテゴリー WEB
2024年11月2日ボックスの内側にシャドウをつけたいbox-shadowプロパティの先頭に「inset」というキーワードをつけると、ボックスの内側にドロップシャドウをつけることができます。そのほかのプロパティは、... カテゴリー WEB
2024年11月2日ボックスにドロップシャドウをつけたいbox-shadowプロパティを使うと、ボックスに影(ドロップシャドウ)をつけて、浮き上がったような視覚的効果をつけることができます。box-shadowは比較... カテゴリー WEB
2024年11月2日複数の背景画像を表示させたいボックスに複数の背景を適用して、より複雑な背景を作成したいときは、backgroundプロパティ、または各種背景を設定するプロパティの値を「,」で区切って複数指... カテゴリー WEB
2024年11月2日背景画像のサイズをボックスに合わせて変化させたい幅が伸縮するフィールドデザイン、レスポンスシブWebデザインなど、ボックスのサイズに合わせて1枚の背景画像を伸縮させたいとき、background-sizeプロ... カテゴリー WEB
2024年11月2日背景画像の表示位置を数値で指定したい背景画像を細かく位置を指定して配置したい場合、backgound-positionプロパティを使用します。ボックスの左から20px、上から40pxの位置に背景画... カテゴリー WEB
2024年11月2日背景画像をボックスの真ん中に表示したい繰り返さない背景画像をボックスの中央に配置するには、backgroundプロパティ、もしくはbackground-positionプロパティを使用します。背景画... カテゴリー WEB
2024年11月2日背景画像を縦方向・横方向だけに繰り返したいページの上部や区切り線の飾りとして、横方向に繰り返したいときや装飾の一環としてボックスの縦方向に画像を繰り返す方法を解説します。 横方向に繰り返す 背景画像を横... カテゴリー WEB
2024年11月2日ボックスの背景に放射状グラデーションをかけたい線状グラデーションだけでなく、放射状のグラデーションをかけることもできます。放射状のグラデーションをかけることもできます。放射状グラデーションを適用する際は、b... カテゴリー WEB
2024年11月2日ボックスの背景に線状グラデーションをかけたい要素のボックスにグラデーションを適用するには、backgroundプロパティ、もしくはbackground-imageプロパティの値に「linear-gradi... カテゴリー WEB
2024年11月2日ボックスの背景色を指定したい要素のボックスに背景色を指定するのは、非常によく行われます。背景色を設定するには、backgroundプロパティかbackground-colorプロパティで色... カテゴリー WEB
2024年11月1日アイコンとテキストの位置を揃えたい1行のテキストの中に、異なるフォントサイズの文字や画像を挿入すると、それらと通常のテキストがk綺麗に揃わないことがあります。その時は、vertical-alig... カテゴリー WEB
2024年11月1日1行で収まらないテキストを省略したいボックスに収まりきらない長いテキストを表示するときに、末尾を「・・・」に置き換えて省略するCSSプロパティがあります。それが「text-overflow」プロパ... カテゴリー WEB
2024年11月1日ボックスの高さを固定してコンテンツを非表示にしたい横に同じ形のボックスが並ぶときなどに、コンテンツを表示することよりも高さを揃えることを優先したいケースがごくまれにあります。その場合は、ボックスに「overfl... カテゴリー WEB
2024年11月1日ボックスの高さを固定してスクロールバーを表示させたい通常、要素のボックスはそのコンテンツが納まるように高さが調節されます。そのため、コンテンツの量が少なければボックスの高さは短くなり、逆に多ければ長くなります。し... カテゴリー WEB
2024年11月1日ページの一部分にほかのHTMLを表示したいページ内に別のHTMLを読み込みたいときで、読み込んでいることがわからないようなデザインにしたとき<iframe>タグを使ってHTML内に別のHTMLを読... カテゴリー WEB
2024年11月1日そのページの中心的なコンテンツが含まれるボックスを作成したいページの中心的なコンテンツは、<main>~</main>で囲むことができます。<div>タグだけでなく、<main>タグや<ar... カテゴリー WEB
2024年11月1日記事、セクションのボックスを作成したいページに記事が含まれる、ニュースサイトやブログサイトの作成をするとき、<article>と<section>はHTML5になって登場した比較的な新し... カテゴリー WEB
2024年11月1日ページの上から下にグラデーションをかけたい画像を作成しなくても、CSSでページ全体にグラデーションを設定することができます。サンプルでは、<body>に背景を適用してページ全体にグラデーションをか... カテゴリー WEB
2024年11月1日ページ全体に適用した背景画像の位置を固定したいページをスクロールしても背景画像の位置は固定しておきたいときに、「background-attachment: fixed;」を使用します。背景画像を固定すると... カテゴリー WEB
2024年11月1日HTML SVGのデータを直接埋め込みたいSVG形式の画像は、<img>タグでファイルを読み込む以外に、<svg>タグを使ってHTMLに直接データを埋め込むことができます。実は、SVGデータ... カテゴリー WEB