2024年11月3日リンク先が別ウィンドウで表示される場合にアイコンを表示したい属性セレクタと「::after」セレクタを使用して、リンク先を別ウィンドウで開く設定になっている<a>タグにテキストにだけ、後ろにアイコン画像を表示します... カテゴリー WEB
2024年11月3日キーボードの字をキーボードらしく見せたいアプリケーションの操作説明やヘルプページで、キーボードの使用方法を掲載したいとき<kbd>タグを使用します。<kbd>タグは、フォントが等幅フォント... カテゴリー WEB
2024年11月3日タイトルとサブタイトルを表示したい記事などのタイトルの下にサブタイトルをつけたいときに、つい<h1>タグと<h2>タグの両方を使ってマークアップをしがちです。しかし、その方法は正しい... カテゴリー WEB
2024年11月3日Webフォント「Google Fonts」を使用したいGoogle Fontsを使用することで、無料でWebフォントを使用することができます。フォントの選択肢が増えます。CSSの「Webフォント」という機能を使うと... カテゴリー WEB
2024年11月2日ファビコンを設定したいファビコンとは「そのサイトのアイコン」という位置づけで、ブラウザのブックマークや、アドレスバーに表示される画像です。画像のフォーマットにはPNG形式、GIF形式... カテゴリー WEB
2024年11月2日（フォーム）ラベルとテキストフィールドを横に並べて整列させたい画面が広いパソコン向けのフォームでは、ラベルとフォーム部品が横に並んでいたほうが見た目がよいです。そうしたレイアウトの場合、以前はテーブルを使うケースがありまし... カテゴリー WEB
2024年11月2日（フォーム）送信ボタンの見た目を変更したい送信ボタン（<input type=”submit”>）には様々なCSSを適用できます。ブラウザが用意しているデフォルトの送信ボタ... カテゴリー WEB
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デザインなど、ボックスのサイズに合わせて１枚の背景画像を伸縮させたいとき、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日アイコンとテキストの位置を揃えたい１行のテキストの中に、異なるフォントサイズの文字や画像を挿入すると、それらと通常のテキストがk綺麗に揃わないことがあります。その時は、vertical-alig... カテゴリー WEB
2024年11月1日1行で収まらないテキストを省略したいボックスに収まりきらない長いテキストを表示するときに、末尾を「・・・」に置き換えて省略するCSSプロパティがあります。それが「text-overflow」プロパ... カテゴリー WEB
2024年11月1日ボックスの高さを固定してコンテンツを非表示にしたい横に同じ形のボックスが並ぶときなどに、コンテンツを表示することよりも高さを揃えることを優先したいケースがごくまれにあります。その場合は、ボックスに「overfl... カテゴリー WEB
