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 2021-03-02

#CSSとは??
前回マークアップしたHTMLがブラウザに表示される文字ですが、それだけでは味気ないですよね??
ここで使うのがCSSです!😊
お化粧みたいな感じですね!😳
それでは書き方を見ていきましょう👍

##CSSの記述方法

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>CSSの書き方</title>
</head>
<body>
  <section>
    <h1>CSSについて</h1>
  </section>
</body>
</html>


style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
}

と記述します!
ポイントは、HTMLのheadタグの中に リンクタグをかき忘れないことです👍
そして、CSSフォルダを作り、その中にCSSファイルを作ることを忘れないでください👌
これをブラウザに表示するとこうなります!

スクリーンショット 2021-03-02 11.22.30.png

ちょ、h1長くねと思った方、HTMLにはインライン要素とブロック要素がありましたね😁
https://qiita.com/akari_0618/items/f3b6892932cb6080c905
その前の記事を御覧ください!

長すぎだよと思った場合は、こう入力して幅を指定してしまいましょう!

style.css
h1 {
  color: black;
  font-size: 40px;
  background-color: red;
  width: 40px;
  height: 65px;
}

(width)がついかされていますね!
40%は適当にセットしましたが指定の仕方には3つほどあります。
①auto
初期値。つまり最初の画面のまま表示されます。
②%
こちらは親要素の幅次第で変わります。
③px
こちらは親要素に関係なく指定できます。
ちなみに当たり前ですが、親要素より大きくは指定できません。
そしてくどいようですが、インライン要素には幅指定できませんので反応しない場合は要素の確認をしてみましょう☺️

(height)も追加されていますね!
こちらは高さの設定になります。ここでは背景カラーの高さの設定になります。
高さ指定には主にピクセル(px)で指定します。

スクリーンショット 2021-03-02 11.50.16.png
こうなりましたらOKです👍

文字を真ん中にしたいので次はそちらをやっていきたいと思います!
おそらく初心者がつまずくpaddingとmarginですね🥲
(大丈夫、私もだから)

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?