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
2024年11月1日base64のデータで画像を表示したいサーバーへのリクエスト数を減らして表示速度を速くするために、小さな画像データを直接HTMLに埋め込みたいとき<img>タグのsrc属性には、一般的には画像... カテゴリー WEB
2024年10月31日スマートフォンのハイライト色を変更したいスマートフォン（Android Chrome、iOS Safari）では、リンクをタップしたときに:hoverセレクタや:activeセレクタの状態に遅れて切り... カテゴリー WEB
2024年10月31日マウスがホバーしたときに枠線をつけたいoutlineプロパティは、要素のボックスに外枠線をつけるのに使われてます。borderプロパティと同じところに線が引かれ、設定する値もまったく同じです。唯一違... カテゴリー WEB
2024年10月31日マウスがホバーしたときにテキストを半透明にしたいopacityプロパティは、要素の透明度を設定するのに使います。値には単位なしで0~1の小数を指定します。この値が0のとき要素は完全に透明で見えなくなり、１のと... カテゴリー WEB
2024年10月31日リンクテキストのスタイルを指定したいリンクテキストのスタイルを変更するとき、ほぼすべてのページで行います。:linkセレクタ、:visitedセレクタ、:hoverセレクタ、:activeセレクタ... カテゴリー WEB
2024年10月31日ページ内リンクで移動した先の見た目を変化させたいページ内リンクで特定の場所に移動した際に移動した場素を目立たせたいとき。ページ内リンクでクリックしたら一瞬でリンク先まで移動するので、どこに移動したのかがわかり... カテゴリー WEB
2024年10月31日箇条書きマークでランキングを表現したいランキングなどを表示する場合に、先頭に順位がわかるようなアイコンをつけたいときや<li>など同じ要素が連続するときに、個別に別々のスタイルを適用したいとき... カテゴリー WEB
2024年10月31日箇条書きのマークをbackgroundプロパティを使って画像にする方法箇条書きのマーク画像にするには、２つの方法があります。１つは、「list-style」プロパティを使用する方法。もうひとつは、<li>に適用されるスタイル... カテゴリー WEB
2024年10月31日定義リストの「キーワード」と「説明」を改行せずに横に並べたいとき定義リストは、CSSを適用しない限り<dd>が字下げ（インデント）して表示されます。この表示はCSSで調整可能で、キーワードの<dt>と、説明の&l... カテゴリー WEB
2024年10月31日引用符を自由に指定したい<q>タグを使って短い引用をするときに、引用文の前後につくカッコを変えたいとき、CSSを使って変更することができます。<q>タグで表示されるカッコを... カテゴリー WEB
2024年10月31日テキストの前後に記号を挿入したいテキストの前後に記号を数字実体参照で挿入したいとき「::before」「::after」セレクタで作るスタイルに必須のcontentプロパティに必須のconte... カテゴリー WEB
2024年10月31日段落の1行目だけ見た目を変えたいデザイン上のメリハリをつけるために、記事ページの１行目だけスタイルを変えたいとき「::first-line」セレクタを使って、<p>~</p>などで... カテゴリー WEB
2024年10月31日HTML 1文字目だけ大きくしたいタイポグラフィの一環として、１文字目だけ大きくしてデザインにメリハリをつけたいとき、「::first-letter」セレクタを使ってテキストの1文字目を選択し、... カテゴリー WEB
2024年10月31日段落ごとに字下げ（インデント）したいテキストの段落の始まりを１文字分空けることを「字下げ」といいます。日本語の場合、本来は文章の段落の始まりを１文字分空けることになっています。Web氏とでは文字が... カテゴリー WEB
2024年10月30日HTML イタリックで表示される要素を通常のテキストに戻したい<address>タグなどイタリックで表示されるタグを使いたいとき、通常のテキストデザインにする方法を解説します。<address>タグ、<e... カテゴリー WEB
2024年10月30日HTML ページ全体のフォントサイズを相対的に指定したいフォントサイズの管理を統一したいとき、font-sizeプロパティを指定するときの値の単位に「rem」を使用すると<html>に設定したフォントサイズを基... カテゴリー WEB
2024年10月30日HTML 半透明なテキスト色を指定したい（RGBA）「rgba()」も、色を指定する方法のひとつです。rgb()に加えて、アルファ値（透明度）の設定ができるようになっています。rgba()は４つの値を指定する必要... カテゴリー WEB
2024年10月30日HTML ツールチップを表示したいリンクなどに補足的な情報を追加したいときaタグのtitle属性を使用します。 タグにtitle属性を追加しておくと、マウスポインタがホバーしたときに、ツールチッ... カテゴリー WEB
2024年10月30日略語であることを表現したい略語であることをマークアップしたいとき、とくにその略語の正式名称を表示したい時 <addr>~</addr>は、囲まれたテキストが「略語」であること... カテゴリー WEB
2024年10月30日HTML 読みがなのルビを振りたい漢字にルビを振るには、<ruby>と関連の<rb>、<rt>、<rp>を使用します。基本的なマークアップのパターンは次の通りです。この書... カテゴリー WEB
2024年10月30日HTML テキストの一部にマーカーをつけたいテキストを部分的に強調したいときに、<mark>タグを使用することでマーカーを付けることができます。<mark>~</mark&g... カテゴリー WEB
2024年10月30日日付や時刻を表示したい日時を表示したいときは、<time>タグを使います。<time>~</time>の中に含めるテキストは、日時をさすようなものであれば、どんなフ... カテゴリー WEB
2024年10月30日JavaScriptが動作しない時のコンテンツを記述したいJavaScriptが動作しないブラウザに、代わりになるコンテンツを表示する必要があるときに使用します。JavaScriptが動作しないブラウザからアクセスされ... カテゴリー WEB
