More than 5 years have passed since last update.

CSS入門1~書式~

Last updated at 2019-05-11Posted at 2019-01-23

CSSとは##

Cascading Style SheetsでCSSです.
Webページの見た目を整えるやつです.

基本的な書式は以下の通りです


セレクタ{
　　　　　プロパティ: 値
         このカギ括弧の中をスタイルっていいます
}

p {
   background-color: #000000;
}

セレクタには次の種類があります

html内の,同じタグ名の要素を全て選択します.

<h1>hogehoge</h1>
<p>コンテンツ</p>
<p>コンテンツ2</p>

例えばhtmlでこう書いてあるとします.
CSSでp {スタイル}って書くと全ての<p>タグに作用します.

全ての要素(タグとコンテンツ)が選択される.
* {スタイル}こうかくの.

セレクタで指定した｢クラス名｣と同じclass属性を持つ要素全て選択.
書き方は,ドットに続けて選択したい要素のクラス名をかく
とりあえず下をご覧ください.

<h1 class="title">コンテンツ1</h1>
<p> コンテンツ</p>
<p> コンテンツ</p>
<h1 class="title">コンテンツ2</h1>
<p>コンテンツ</p>
<p>コンテンツ</p>

htmlがこう書いてあって,"title"の部分をしていしたいとします.
そしたらこうです..title {スタイル}

セレクタで指定した｢ID名｣と同じid属性を持つ要素を選択します.
id属性につけるID名は1つのhtml内で一度しか使えないので,idセレクタで選択できる要素は1つだけ,となります.
書き方はこうです.

#title {スタイル}↔<h1 id="title">コンテンツ</h1>

ある要素が特定の状態にあるときだけ選択するセレクタ.
例えばリンクにマウスポインタが｢乗っている状態｣,｢押された状態｣などです.
下のような感じで書きます.
a:hover{スタイル}↔<a href="http://///"></a>

｢<ul>~</ul>のなかにある<li>要素｣や｢<table clas="info"></table>の中にある

要素｣など,特定の親要素に含まれる子要素などを指定するのが子孫セレクタです.

<nav class="navi">
  <ul>
    <li>ナビ1</li>
    <li>ナビ2</li>
    <li>ナビ3</li>
    <li>ナビ4</li>
  </ul>
</nav>

htmlがこうだったとします."navi"の<li>タグにだけ適用したときはこうかきます.
.navi li {スタイル}

これはカンマで区切るだけ

th, td{スタイル}