CSS基礎｜WEB学習の記録

CSS基礎#007 セレクタについて【フクロウセレクタ】

* + * フクロウセレクタユニバーサルセレクタについて調べていると気になるセレクタが！フクロウセレクタ * + *　これがふくろうの顔に見えるからだとか。なんだかかわいくて、本来調べようと思っていたことそっちのけでふくろうのとりこに。フクロウセレクタとは最初の要素以外を指定するセレクタらしい。どんな時に利用できるのかなと見ているとナビゲーションの余白設定に便利だということ。他にも、リストの一番上に余白を持たせたくない時などにも使えるらしい。作り

CSS基礎#006 セレクタについて【ユニバーサルセレクタ】

*｛～｝ユニバーサルセレクタ *アスタリスクをセレクタに指定すると、すべての要素を対象にスタイルを適用できる。単独で指定する以外にも他のセレクタとの組み合わせで使用することもできる。

CSS基礎#005 セレクターについて【タイプセレクター】

要素名｛～｝タイプセレクター要素名を各セレクターに指定すると、指定した要素にスタイルが適用される。最も基礎となるセレクター。 h1 { color: #000;}p { background-color: #888;}strong { color: #fff;} <h1>WEB_STUDY</h1><p><strong>0からはじめる</strong>WEB_STUDY</p>

CSS基礎#004 セレクタについて

セレクタ ◆ タイプセレクタ【タグ名】 HTML内の、同じタグ名の要素すべてを選択するセレクタ。 ◆ 全称セレクタ【*】アスタリスク（ * ）を記すとすべての要素（タグとコンテンツ）が選択される。 ◆ classセレクタ【 .class名】 HTMLで指定した同じclass属性を持つ要素すべてを選択するセレクタ。 ◆ idセレクタ【#ID名】 HTMLで指定した同じid属性を持つ要素を選択するセレクタ。HTML内で一度しか使えないため、選択できる要素は一つだけ

CSS基礎#003 マージン・パディングのショートハンド

ショートハンド padding・marginのプロパティ値を省略できる。 padding：パディング４辺の大きさを一括で指定上下左右3px p {　padding: 3px;} 上下3px左右6px p {　padding: 3px 6px;} 上3px左右6px下1px p {　padding: 3px 6px 1px;} margin：マージン４辺の大きさを一括で指定上下左右8px p {　margin: 8px;} 上下8px左右1px p

CSS基礎#002 ボックスモデル

ボックスモデル W width：幅を指定 min-width：幅の最小値を指定 max-width：幅の最大値を指定 H height：高さを指定 min-height：高さの最小値を指定 max-height：高さの最大値を指定 padding：パディング４辺の大きさを一括で指定 PT padding-top：上パディングの大きさを指定 PR padding-right：右パディングの大きさを指定 PB padding-bottom：下パディングの大きさを指定

CSS基礎#001 コメントアウト

/* コメントアウト */ HTMLと同様CSSにもコメントが書ける。 ※「/*～ */」の中に「/*」「 */」を入れることはできない。

CSS基礎

記事一覧