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
2024年10月30日JavaScriptをHTMLに直接書きたいHTMLに直接JavaScriptファイルを記述するが必要があるとき、同じ<script>タグを使います。JavaScriptファイルを用意することも、H... カテゴリー WEB
2024年10月30日JavaScriptファイルを読み込みたいHTMLに外部JavaScriptファイルを読み込む必要があるとき、次のタグをHTML内に記述します。パスに指定されたJavaScriptファイルを読み込みます... カテゴリー WEB
2024年10月30日HTML ページの主要な言語設定したいコンテンツの主要な言語が日本語ではないときなどに使用します。ページの主要な言語が日本語ではないときは<html>タグに含まれるlang属性の言語コードを書... カテゴリー WEB
2024年10月30日ページの枠組みを作る実践的なサンプルページの作成方法について解説 ポイント １、実践的なページの枠組みを作る body要素の内容は「header」「content」「footer」... カテゴリー WEB
2024年10月28日相対配置と絶対配置floatプロパティは左右に寄せる配置方法でしたが、縦・横の配置位置を数値で指定する方法も用意されています。それがpositionプロパティによる相対配置と絶対... カテゴリー WEB
2024年10月28日floatでボックスを横に並べるfloatを使ったマルチカラムレイアウトを使用して、ページ全体の枠組み作成について解説しています。 １、floatでマルチカラムレイアウトを実現する HTMLの... カテゴリー WEB
2024年10月28日floatプロパティを指定した要素は親ボックスからはみ出し、後続のボックスの中に入り込む指定した要素は親ボックスからはみ出し、後続のボックスの中に入り込むとマルチカラムレイアウトに使おうとすると不具合が発生します。ここでは、clearfixを使用し... カテゴリー WEB
2024年10月28日img要素で指定した画像の下にできるスペース（余白）を簡単に詰める方法img要素として画像を配置して、marginやpaddingを0に指定しているのにも関わらず画像の下に余計なスペース（空行みたいなもの）が表示されてしまう。ブラ... カテゴリー WEB
2024年10月28日floatの基本的な使い方現在のCSSレイアウトでボックスを横に並べるには、一般的にfloatプロパティが使用されます。しかしfloatプロパティは、もともとマルチカラムレイアウト（段組... カテゴリー WEB
