【入門】CSSの書き方　〜CSSとは？〜

2019.11.07
2022.05.04
CSS

CSSってなに？
どうやって書いていくの？

こういった疑問に答えていきます。

今回はCSSの概要と、書き方について紹介していきます。
また、HTMLの要素も使っていくので、HTMLについて理解しておくといいです。

HTMLの書き方講座①

1. CSSとは何か？
2. どうやって書いていくのか？
- 2.1. 1つ目の方法
- 2.2. 2つ目の方法
3. CSSの書き方

CSSとは何か？

CSSとは、Cascading Style Sheetsの略で、WEBページの装飾をしていく言語です。

前回紹介したHTMLは、「ダグ」を使ってWEB上に文字や画像を表示させましたね。
このHTMLで書いたものに、CSSで装飾、色付けなどを行なっていくものです。

イメージは、マネキンに洋服や靴、アクセサリーなどをつけていくような感じです。

では、実際に書き方を見ていきましょう！

どうやって書いていくのか？

書き方は２パターンあります。

HTMLの中に、<style>タグを追加し、その中に書いていく方法
別のファイルにCSSのコードを書いていき、HTMLで読み込む方法です。

1つ目の方法

2つ目の方法

どちらでもいいのですが、1つ目の方法は、HTMLとCSSのコードで、埋まってしますので、
見にくくなります。

おすすめは2つ目の、別のファイルでCSSのコードを書いていくものです。
では実際に書いていきましょう！

CSSの書き方

冒頭でも説明したように、HTMLで書いたものに、装飾していく言語なので、HTMLを先に書いていきます。
では復習です。「見出し」と「文章」を書いてみましょう。

<!DOCTYPE html>　　
<html lang="ja">　
    <head>       
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>

    <h1>テスト</h1>
　　 <p>テストですよ<p>

　　</body>

</html>

こうでしたね。

まだHTMLがうまく書けない方はこちらを参照ください。

HTMLの書き方講座①

では次にCSSを書いていきます。
今回は、そんなに書かないので、HTMLの中に書いていきます。

まずは<style>タグを</body>の後に書いていきます。

<!DOCTYPE html>　　
<html lang="ja">　
    <head>       
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>

    <h1>テスト</h1>
　　 <p>テストですよ<p>

　　</body>
   
   <style>

   </style>

</html>

できましたでしょうか？
<style>タグが書けたら、CSSコードを書いてみます。

CSSの書き方は、

HTMLで書いた「タグ」を指定します。
指定したタグに、CSSコードを書いていく。

と言った感じで書いていきます。
実際にやってみたほうがわかりやすいので、早速やっていきます。

今回は、「文字の大きさ」と「文字色」を変えていきます。
「見出しの大きさを変更」、「文章の文字色を変更」でやっていきます。

ではまずは見出しの大きさを変更していきます。
見出しは「h1」で書かれているにで、CSSで「h1」を指定します。

書き方は

<!DOCTYPE html>　　
<html lang="ja">　
    <head>       
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>

    <h1>テスト</h1>
　　 <p>テストですよ<p>

　　</body>
   
   <style>
　　　　h1{ }
　　　　
   </style>

</html>

と書きます。

次に、CSSで文字の大きさを変更します。
文字の大きさは、「font-size」と書きます。そしてサイズの指定は「px」で書いていきます。
他にもサイズ単位はいくつかありますが、基本的には「px」を使うことが多いです。

なので「font-size: 〇〇px;」と書きます。
では書いてみて、ブラウザで反映させてみましょう。

<!DOCTYPE html>　　
<html lang="ja">　
    <head>       
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>

    <h1>テスト</h1>
　　 <p>テストですよ<p>

　　</body>
   
   <style>
　　　　h1{font-size:50px; }　　
   </style>

</html>

CSS書く前

CSS追加後

少しわかりにくいですが、大きくなりましたね。
次は文章の色を変えていきます。

文字の色は「color: 色」と書いていきます。

では書いてみて、ブラウザに反映させみましょう。

<!DOCTYPE html>　　
<html lang="ja">　
    <head>       
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>

    <h1>テスト</h1>
　　 <p>テストですよ<p>

　　</body>
   
   <style>
　　　　h1{font-size:50px; }　　
　　　　p{color:red;}
   </style>

</html>