【HTML・CSS】CSSを連携してスタイルシートを試す。雛形あり

Webページを作成するのにHTMLとCSSは必須です。しかし全てを覚えてしまうのは苦労しますし、意味がないと思いませんか?

以前Webページ作成する時の雛形を作成しました。

今回はCSSを連携してCSSを試せる環境を作成しておきます。

CSSを気軽に試せる環境があれば、楽だと思いませんか?ネットで調べるだけと、実際コード書いてみて試してみるとではどちらが学べると思いますか?

もちろん後者です。実際試してみてどうなるかを見る事で学習していきましょう。

目次

CSSを連携してスタイルシートを試す雛形

カスタマイズ

HTMLの雛形

以前のHTMLの雛形の内容に少し追加して、CSS連携のコードを追記します。

<html>
 <head>
  <meta charset="UTF-8">
  <title>タイトル記入</title>
  <link rel="stylesheet" href="test.css">
 </head>
  <body>
  <h1>ページ名</h1>
  <p>コンテンツ</p>
 </body>
</html>

CSSファイル作成

同じフォルダに「test.css」のファイルを作成すればOKです。

HTML表示して見る

htmlを表示して見ましょう。

ではCSSにコードを追記して見ます。

CSSにコードを記入する

h1{
    color: blue;
}
CSSの内容1

h1タグに挟まれた文字を青色に変えます。

更に以下のコードを追記します。

body{
    text-align: center;
    background-color: rgb(43, 191, 218);
}

bodyタグで囲まれた箇所を変更します。つまりサイト全体を変化させます。

CSSの内容2
  • text-aline:center;で文字を真ん中に移動します。
  • background-color: rgb(43, 191, 218) で背景色をRGBで指定します。

CSSの変更を試してみる

これでもう一度ページを表示して見ます。

h1の見出しの文字の色が変化しました。

文字が全て中央に移動しました。

背景色が変化しました。

このようにCSSを変更するだけで、サイトの見た目を変更できます。

このHTMLをCSSの雛形を使って、色々試して見て下さい。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる