【基本】初心者向け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>

こんな感じです。
<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>

要素の中に直接style属性を追加していきます。
個人的にはこの書き方はあまりしたくないですね。
コードを見た時に何が書いてあるか解り難くなるので。

3.別ファイル(.css)に書く

HTMLとCSSの2つのファイルを作ります。
書き方は以下のようになります。

まずはHTMLから。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>CSSアニメーション</title>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>CSSアニメーション</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div class="box">テスト</div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
   </body>
</html>

CSSファイルはこちらです。

.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);
 }

簡単に説明すると、HTMLでは<link>タグでstyle.cssというCSSファイルを読み込んでいます。
そしてstyle.cssにスタイルを書いていきます。

こちらの内容は1と同じ結果になります。