CSSでは、チルダは「〜」で表される無駄な線の記号です。 「後続兄弟コンビネータ」とも呼ばれます。 このチルダまたは後続の兄弟コンビネータを使用して、2つの複合セレクターを分離します。 別の言い方をすれば、チルダセレクターは指定された要素のすべての要素の兄弟を選択すると言うことができます。 このチュートリアルでは、チルダセレクターの動作について説明します。 コードでこのチルダセレクターを使用し、それがどのように機能するかを示します。 例1: CSSでこのチルダセレクターを使用するには、最初にHTMLファイルを作成し、このファイルをチルダセレクターを使用するCSSファイルにリンクする必要があります。 この例では、1つのdivを作成しており、このdivには、見出しと2つの段落があり、これら2つの段落の間に「hr」タグがあります。 この「hr」タグは、段落間の主題の区切りを表すために使用されます。 このHTMLコードが完成したら、このチルダセレクターを使用するCSSファイルに移動します。 以下はCSSコードで、見出しの「色」を「緑」に変更してスタイルを設定し、「text-align」プロパティを使用して「中央」に配置します。 また、「font-family」を「Algerian」に設定しました。 見出しをスタイリングした後、チルダセレクターを使用しています。 最初の要素は「hr」で、2番目の要素は「p」です。 このチルダセレクターを使用して、「hr」が前に付いているすべての段落を選択し、これらの段落にいくつかのスタイル設定プロパティを適用しています。 テキストを「揃える」ように揃え、「background-color」プロパティを使用して背景の色を設定し、これに「パウダーブルー」を使用します。 「font-size」プロパティも使用され、このプロパティに「120%」の値を与えます。 次に、「フォントファミリ」として「アルジェリアン」が選択されます。 これらのプロパティはすべて、「hr」が前に付いている段落に適用されます。 以下の出力を見てください。CSSファイルで上記で使用したすべてのプロパティは、「hr」が前に付いた段落にのみ適用されます。 上記の段落は変更されていませんが、「hr」の後の2番目の段落が変更され、すべてのスタイルがこの段落に適用されます。 これは、チルダセレクターが原因です。 例2: ここでは、1つのdivを配置します。 […]
The post CSSチルダ appeared first on Gamingsym Japan.