CSSを使ってみよう

CSS

2020.09.252020.11.22

CSSとは？

CSSとは Cascading Style Sheets の略でHTMLなどをどう装飾するか指示する物です。CSS はスタイルシート言語であり、プログラミング言語ではありません。HTMLで書かれた文字を大きくしたり、赤くするなどできます。

HTML,CSSのファイルを用意する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの書き方</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <h1>WEB講座</h1>
    <p>はじめてのHTMLを作りました</p>
  </body>
</html>

HTML基礎コードまとめで用意したHTMLを装飾していきます。HTMLファイルにこのコードを書くとこのように表示されます。

デモサイト1

この文字を赤くする場合<h1>タグに対してCSSを書くのですが、まずCSSファイルを用意します。

HTMLと同じ階層内にstyle.cssをおきます。

style.css内にコードを記述します。

そしてHTMLの<head></head>内にCSSを読み込むコードを書いていきます。

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

これで読み込みは完了です。次はstyle.cssファイルにcssを書いていきます。

style.cssに書いてみる

@charset "utf-8";
h1{
  color:#FF0000;
}

それでは実際に、こちらを書いてみてください。WEBデザイン講座の部分が赤くなっていると思います。

デモサイト2

これでCSSファイルにCSSを書くことによって、反映できるようになりました。細かいCSSの設定については別でご紹介します。