2018.05.22CSSではスタイルを適応する対象を示す部分を「セレクタ」と呼び、さまざま種類のセレクタがあります。子孫セレクタ子セレクタスポンサーリンク主なセレクタCSSで利用できる主なセレクタは以下のものです。全称セレクタ(ユニバーサルセレクタ)全称セレクタは「*」をセレクターにするもので、すべての要素に指定したスタイルを適用します。;}上記はcolor属性をもつすべての要素の文字が赤になります。要素セレクタ要素セレクタはHTMLの要素ごとにスタイルを適用します。;}上記はh1タグの文字が赤になります。idセレクタidセレクタはHTMLの要素に指定されたidでスタイルを適用します。idセレクタはセレクタ名に「#」をつけて管理します。id="myid">aaa</div>上記はid「myid」で指定されたタグの文字が赤になります。titleweight=”bold”]idセレクタは1ページ内に同じIDを複数使用することはできません。[/st-mybox]classセレクタclassセレクタはHTMLの要素に指定されたclassごとにスタイルを適用します。classセレクタはセレクタ名に「.」をつけて管理します。class="myclass">aaa</div>上記はclass「myclass」で指定されたタグの文字が赤になります。titleweight=”bold”]classセレクタは1ページ内に同じclassを複数使用することができます。同じプロパティを持つセレクタを同時に指定することで、変更時の影響度を下げることができます。;}上記の例ではh1タグ、h2タグ、h3タグの文字色が赤になります。子孫セレクタ最初に指定されたセレクタ内のセレクタにスタイルが適応されます。class="myclass">aaa<p>bbb</p></div>上記の例では「myclass」セレクタ内にある「p」タグのみ(ここでは「bbb」)の文字色が赤になります。子セレクタ子セレクタは親から見て子にあたる(1階層下)のタグのみにスタイルが反映されます。(2階層以下には反映されません。class="myclass">aaa<p>bbb<span>ccc</span></p></div>上記の例では「myclass」セレクタ内にある「p」タグのみ(ここでは「bbb」)の文字色が赤になります。(「CCC」は文字色が赤になりません。)以上、CSSの主なセレクタの使い方でした。2019.12.09CSSCSSの基本「ボックスモデル」をCSSで書いてみるCSSの基本「ボックスモデル」を画像ではなくCSSで書いてみました。2019.11.11CSSCSSで印刷されないボタンを作る画面表示は行うが印刷されないボタンをCSSのメディアを利用して実現します。2019.12.09CSSCSSで画像の四隅を丸くする方法CSSの「border-radius」プロパティを使えば簡単に四隅が丸い「角丸画像」が作れます。ChromeだとCSSが反映されない事象が発生しました。判明すればごく当たり前のことなのですが、解決までに半日以上の時間を費やしてしまったので、自戒の念を込めて記事にしておきます。2019.12.09CSSスタイルシートの書き方スタイルシートはHTML文章の見た目を変化させるための言語です。そのスタイルシートの書き方の基本をまとめました。管理人IT業界の片隅で30年近くひっそりと暮らしています。世に出てもいいころかもしれません。管理人IT業界の片隅で30年近くひっそりと暮らしています。世に出てもいいころかもしれません。子孫セレクタ子セレクタタイトルとURLをコピーしました。