気ままにやっていくプログラミングとかブログ

中学1年生が気ままにプログラムのことを中心に書いていくブログです。

HTML自己流入門3

こんにちは。

Kitachisukuです。

今回はCSSについて説明します。

 


 1.CSSとは?

2.できること

3.書いてみる


 

 1.CSSとは?

CSS「cascading style sheet」の略です。

 

CSSは主にHTMLと組み合わせて使用し、

CSSを使うことによって、

HTMLのみでは表現できない高度なデザインを作ることも可能となります。

 

2.できること

CSSは様々なことができるので、

その一例を紹介します。

  • 背景色・文字色の指定
  • フォントの指定
  • なめらかに動かす
  • テキストの並びを指定

などです。

 

使っているところは、

このHTML入門のコードのシンタックスハイライトにも使われていますし、

余白などもCSSによって記述されています。

 

3.書いてみる

それでは実際にCSSを書いてみましょう。

 

まず、

CSSには3つの書き方があります。

 

  1. styleタグを使用してHTMLに埋め込む
  2. styleを一つ一つのタグに指定する
  3. CSSファイルを参照する

今回は3つとも試してみます。

 

前回お伝えしたタグを使って簡単な文章をHTMLだけで作ってみます。

f:id:Kitachisuku:20210129193018j:plain

<html>
<head>
<title>CSS Example</title>
<meta charset="utf-8">
</head>
<body>
<p>こんにちは</p>
<p>CSS</p>
<p>Hello CSS!</p>
<div>
<p>これはテストです。</p>
<p>これもテストです。</p>
<p>これも多分テストです。</p>
</div>
</body>
</html>

 

ではこれにCSSを付け加えてみましょう。

 

1.styleタグ

<html>
<head>
<title>CSS Example</title>
<meta charset="utf-8">
</head>
<body>
<style>
p{
color: red;
}
div{
background-color: black;
}
</style>
<p>こんにちは</p>
<p>CSS</p>
<p>Hello CSS!</p>
<div>
<p>これはテストです。</p>
<p>これもテストです。</p>
<p>これも多分テストです。</p>
</div>
</body>
</html>

f:id:Kitachisuku:20210129195359j:plain

 

2.htmlタグに記述

<html>
<head>
<title>CSS Example</title>
<meta charset="utf-8">
</head>
<body>
<p style="color: red">こんにちは</p>
<p>CSS</p>
<p>Hello CSS!</p>
<div style="background-color: black;">
<p>これはテストです。</p>
<p>これもテストです。</p>
<p>これも多分テストです。</p>
</div>
</body>
</html>

f:id:Kitachisuku:20210129195527j:plain

 

3.CSSファイル

 

html

<html>
<head>
<title>CSS Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>こんにちは</p>
<p>CSS</p>
<p>Hello CSS!</p>
<div>
<p>これはテストです。</p>
<p>これもテストです。</p>
<p>これも多分テストです。</p>
</div>
</body>
</html>

 

css

p{
color: red;
}
div{
background-color: black;
}

 

f:id:Kitachisuku:20210129195723j:plain

 

 

詳しいことは次のときに説明します。

とりあえずはこんなことができるんだと思ってくれればいいです。

ちょっと急ぎ気味ですが、では。