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

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

自己流HTML入門4(終わり)

こんにちは。

Kitachisukuです。

今回は前回さささーっっと終わってしまった部分を詳しく説明していきたいと思います。

 


 1.前回のコード

2.説明

3.まとめ


 

  1.前回のコード

意味合い的には全部同じなので外部CSSを使う方式の方を書きます。

index.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>

 

style.css

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

 

さて説明していきます。

 

2.説明

まずこの部分です。

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

これは「リンクタグ」というもので、

他ファイルのCSSなどを読み込むときに使います。

 

まずrel=で読み込むファイルの種類(CSS)を指定し、

href=でファイルを指定しています。

 

この場合は、

同じ階層にある「style.css」ファイルを指定しています。

 

次にCSSです。

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

 

CSSの書き方は次の通りです。

CSSを適用したい要素の名前{
種類: ;
}

 

今回は適用したい要素にpタグとdivタグを指定しています。

 

次に、

color: red;

です。

colorは文字色という意味で、

ここでは定義されている「red」を使って赤色にしています。

 

次にこれです。

background-color: black;

background-colorは背景色という意味で、

同じく定義されている「black」を使って黒色にしています。

 

f:id:Kitachisuku:20210129195723j:plain

そのためこのようになります。

 

全体に適用したいときはbody要素にスタイルを指定します。

 

また、

設定できることはこれだけではないので、

是非調べてみてください。

 

3.まとめ

CSSを使うと文字色や背景色を指定できます。

 

このCSSとHTMLを使えば、

ブログも書けます。

 

また、

このようにして書くのが嫌だ、

という人は、

有償のホームページビルダーなどを使ってもいいですし、

このサイトなどを見て無料のものを探して使ってみてもいいでしょう。

 

これらの知識を使えば、

もう簡単なウェブサイトが作れます。

 

がんばってください。

 

では。