【基本】初心者向けCSSの解説

こんにちは朱夏です。

今回は、CSSについて書きたいと思います。
基本的に、以下の様な疑問を持っている初心者の方向けに書いています。

朱夏

CSSってどんなことができるの？

どうやって使うの？

HTMLに直書きと別ファイル読み込み、どっちがいいの？

CSSとは何か？
ここについては多く触れませんが、ざっくり言うと、WEBサイトの見た目を整えるためのものです。

それでは、やっていきましょう。

[もくじ]
CSSでできること
CSSの書き方
どの書き方が良いのか
あとがき

CSSでできること

CSSで出来ることは、WEBサイトにスタイルを付けることですね。
具体的には大まかに以下のようなことが出来ます。

文字の大きさ、色、フォント変更
背景の色、マージン、パディング、ボーダーの調整
画像のサイズ、透過、エフェクトの設定
アニメーション
ドロップシャドウ

基本的なものはこんな感じです。
HTMLで要素を組み込んで、CSSで要素の見た目を整えていく、こういった役割分担で書いていくことになります。

CSSの書き方

CSSの書き方には3種類あります。

HTMLの<head>タグ内に書く
HTMLの<body>タグ内に書く
別ファイル(.css)に書く

どうやって書くのか、簡単に解説します。

1.HTMLの<head>タグ内に書く

HTMLの<head>タグ内に書く場合は、以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>CSSアニメーション</title>
      <style>
         .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 10%;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            transition: 0.2s linear;
            cursor: pointer;
            user-select: none;
         }

         .box:hover {
            transform: scale(1.2);
         }

         .box:active {
            transform: scale(1.2) rotate(360deg);
         }
      </style>
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>CSSアニメーション</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div class="box">テスト</div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
   </body>
</html>

<!DOCTYPE html>

<head>

<title>CSSアニメーション</title>

<style>

.box {

width: 200px;

height: 200px;

background-color: skyblue;

border-radius: 10%;

text-align: center;

line-height: 200px;

font-size: 30px;

transition: 0.2s linear;

cursor: pointer;

user-select: none;

}

.box:hover {

transform: scale(1.2);

}

.box:active {

transform: scale(1.2) rotate(360deg);

}

</style>

</head>

<body>

<header>CSSアニメーション</header>

</footer>

</body>

</html>

こんな感じです。
<head>タグ内に<style>タグを使い、CSSを書いていきます。
今回の例だと、”box”というclassに対して適用されているスタイルになります。

2.HTMLの<body>タグ内に書く

こちらの書き方は以下のようになります。

<div style="width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 10%;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            transition: 0.2s linear;
            cursor: pointer;
            user-select: none;">テスト
</div>

<div style="width: 200px;