0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSS入門

Last updated at Posted at 2020-06-15

#CSSの書き方
書き方には3パターンある

  • CSSファイルに書いて、HTMLから読み込む
  • HTMLファイルにStyleタグを作る
  • HTMLタグの中に書く
    今回は2つめの書き方を説明する

#基本構造
セレクタ {
プロパティ:値;
プロパティ:値
}

セレクタはどこのタグかを示す(class名やid名)
プロパティはそのタグのどの値かを指す
値はプロパティに割り当てる値を指定する

#プロパティの書き方
「{}」でプロパティを囲む
プロパティと値の間は「:」(コロン)でつなぐ
また、複数のプロパティがある場合は「;」(セミコロン)

注意点
半角スペースやタブ、改行は挿入しても構わないが、全角スペースは禁止

#セレクタの書き方
基本タグ名を書けば該当のタグ名の部分に反映される
そのほかには

  • ID名・・・セレクタに記入する際は先頭に**「#」(シャープ)**を書く

  • class名・・・セレクタに記入する際は先頭に**「.」(ピリオド)**を書く

  • 一度に複数書ける。その場合は間に**「,」(カンマ)**を書く

  • 子孫セレクタ・・・「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」という絞り込んで指定させたいときに使う。半角スペースで区切る
    例)class=”main”タグの中のpタグの中のspanタグ内にのみデザイン(オレンジ色)を適用させたい場合は

.main p span{
color:orange
}

#プロパティの書き方
取り合ず並びて行く

  • font-size(フォントサイズ)
  • color(フォント色)
  • text-align(文字寄せ)
  • background-color(背景色)

#コメントアウトについて
/コメントアウトする内容/ とするとおけ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?