Kakera.link

ゼロから始めるCSS

初めてのCSS〜CSSで何ができる?〜

Webサイト(ホームページなど)の表面に見えている部分は主にHTMLとCSSという2つの言語で書かれています。
HTMLはページの構造、骨格にあたる部分を作成するのに使います。
どこがタイトルで、どこが本文で、.... といった、それぞれのパーツがどういった役割なのかを表すのに使います。

その一方でCSSにはそのHTMLで書かれた内容に対して、文字の色をつけたり、大きさを変えたり、文字と文字の余白を調整したりと装飾にあたる部分を書いていきます。
HTMLだけを書いた段階でも、見出しタグのh1タグなどを使えば文字が大きく表示されますが、それはあくまでブラウザが勝手にやってくれているものです。
せっかくWebページをつくるのであれば、自分好みにしていきたいですよね。

CSSが書けるようになると自由自在にページが作れるようになって、Webページ作成がとても楽しくなります。
そんなわけで早速これからCSSを学んでいきましょう。

最終更新: 2020/10/01 20:27

【コレさえ出来ればあとは一気に】CSSで背景の色を変えてみる

今回はHTMLにCSSを読み込んで、背景の色を変えるところまで一気にいきます!

STEP1. HTMLファイルをつくる

まずは簡単なHTMLファイルをつくります。あくまでHTMLがメインでCSSはサブ、中心となるHTMLからサブとなるCSSを読み込むというイメージをもっておくと分かりやすいです。

例えばこんな内容の index.html というファイルをつくります。

<html>
  <body>
    <h1>初めてのCSS</h1>
  </body>
</html>

STEP2. CSSファイルをつくる

CSSファイルをつくるのは簡単です。
STEP1でつくったHTMLファイルと同じフォルダにCSSファイルをつくります。
ファイル名は何でもいいですが、 style.css のように拡張子を css にしてください。
ファイルの中は空のままで大丈夫です。

STEP3. CSSファイルをHTMLで読み込む

いよいよCSSファイルをHTMLファイルから読み込みます。

STEP1で作成したHTMLファイルのbodyタグの上にこのように3行追加してください。
style.css のところには作成したCSSファイル名を書いてください)

<head>
    <link rel="stylesheet" href="style.css">
</head>

HTMLファイル全体はこのようになります。

<html>
    <head>  <!-- ←追加 -->
        <link rel="stylesheet" href="style.css">  <!-- ←追加 -->
    </head>  <!-- ←追加 -->
    <body>
        <h1>初めてのCSS</h1>
    </body>
</html>

STEP4. 背景の色を変える

これでHTMLファイルを開くと同時にCSSファイルも読み込まれるようになりました。

ちゃんと読み込みできているか背景の色を黄色(yellow)に変えてみます。
CSSファイルに、

body {
    background-color: yellow;
}

と書いてみてください。
そしてHTMLファイルを表示してみます。

背景が黄色になったのが確認できましたか?
yellowの部分をblueやredにすると色が変わることも確認出来ます。
うまくいかなかった人は、

  • HTMLで読み込んだファイル名が間違っていないか
  • HTMLファイルと同じフォルダ内にCSSファイルがあるか

など確認してみてください。

最後に

これでCSSファイルを書いていく準備が整いました。
あとは、どうやったら文字の大きさを変えられるのかや文字の色を変えられるのかを実践していくだけです。

次から早速いろんな書き方を一緒にやっていきましょう!

最終更新: 2020/10/05 17:41

【CSS基礎ノック 1本目】文字の大きさを変える

h1タグ内の文字サイズを32pxにしてください。

最終更新: 2020/10/05 18:04

【CSS基礎ノック 2本目】文字の色を変える

h2タグ内の文字の色を好きな色に変えてください。

最終更新: 2020/10/05 18:17

【CSS基礎ノック 3本目】文字の色を変える〜カラーコード編〜

h2タグ内の文字の色を文字コードをつかって好きな色に変えてください。

最終更新: 2020/10/06 13:29

【CSS基礎ノック 4本目】文字を太くする

aタグ内の文字の太さを太くしてください。

最終更新: 2020/10/06 13:29

【CSS基礎ノック 5本目】画像の幅と高さを調整

画像の幅を500pxにしてください。

最終更新: 2020/10/06 13:53

【CSS基礎ノック 6本目】h1とh2を1行に連結させる

h1タグとh2タグの文字を1行にしてください。

最終更新: 2020/10/06 14:17

【CSS基礎ノック 7本目】リンクを1行に独立させる

リンクを1行に独立させてください。

最終更新: 2020/10/06 14:19

【CSS基礎ノック 8本目】文字を中央に配置

リンクの文字を画面(左右)中央に移動させてください。

最終更新: 2020/10/06 14:31