36歳がHTMLを勉強してみる_その２

shin

2020年8月23日 11:33

前回に引き続き、HTMLを勉強してきます。

【やったこと】
●CSSファイルを読み込んでみる
●class属性とid属性を使ってみる

【参考サイト】
http://www.tohoho-web.com/css/basic.htm

まずは、CSSファイルを読み込んでみたいと思います。

CSSとはCascading Style Sheets の略で、役割としてはHTMLで作成したWebページの見栄えをよくするためのものです。

●CSSファイルを読み込んでみる

まずはCSSファイルを新規作成します。

ファイル名：stylesheet.css(htmlファイルと同じフォルダに置きます)

コード：

h1{ color: blue; }
h2{ color: red; }

このコードでは、h1タグに青色を指定して、h2タグに赤色を指定しています。

色以外にも配置であったりフォントサイズであったり様々なスタイルを細かく設定することができます。

続いて、HTMLファイルにスタイルシートを読み込んでみます。

ファイル名：myhtml.html

コード：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>習慣</title>
   <link rel="stylesheet" href="stylesheet.css">　#追加
</head>
<body>
  <h1>こんにちは</h1>
  <h2>こんにちは</h2>
  <h3>こんにちは</h3>
  <h4>こんにちは</h4>
  <h5>こんにちは</h5>
  <h6>こんにちは</h6>
  <a href= "https://note.com">noteへのリンク</a>
</body>
</html>

スタイルシートを読み込みには、次のコードを追加するだけです。

「link rel」にはstylesheetと入力して、「href」には自分で作成したスタイルシート名を入力します。

これでスタイルシートが読み込めたので、HTMLファイルを表示させます。

スタイルシートの設定通り、h1タグの文字は青色に、h2タグの文字は赤色になりました。

このように、スタイルシートを使うことによって、HTMLで作成したWebページの見栄えをよくすることができます。

●class属性とid属性を使ってみる

続いてはclass属性とid属性を利用して、Webページのデザインを変えてみたいと思います。

class属性とid属性については以下の説明があります。

id 属性とclass 属性の違いについてですが、id 属性は要素に一意の識別子を割り当てるものであるのに対して、class は、スタイルシートなどで定義したクラスに要素を関係つけるものです。文書内に、同じ ID を持つ複数の要素は存在しないのが普通ですが、同じクラスに関係づけられた複数の要素は存在します。

簡単に言うと、グループと個人みたいなもので、classがグループ、idが個人のイメージになります。

グループでは複数の要素が同じグループを利用することができますが、個人では他の人が利用できなくなります。

それでは実際に見ていきます。

ファイル名：stylesheet.css(htmlファイルと同じフォルダに置きます)

コード：

h1{ color: blue; }
h2{ color: red; }
.green { color: green; }　#追加
#orange{ color: orange}　#追加

class属性を作成する場合は、ドット「.」＋class名を付けます。
このコードではclass名「green」で緑色を指定しています。

id属性を作成する場合は、シャープ「#」＋id名を付けます。
このコードではid名「orange」でオレンジを指定しています。

ファイル名：myhtml.html

コード：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>習慣</title>
   <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <h1>こんにちは</h1>
  <h2>こんにちは</h2>
  <h3>h3タグ</h3>　#追加
  <h3 class='green'>h3クラスタグ</h3>　#追加
  <h4>h4タグ</h4>　#追加
  <h4 id='orange'>h4IDタグ</h4>　#追加
  <h5>こんにちは</h5>
  <h6>こんにちは</h6>
  <a href= "https://note.com">noteへのリンク</a>
</body>
</html>

このコードでは先ほど作成した、class属性とid属性を、h3、h4タグに割り当てています。

class属性を利用する場合は、タグのあとに「class=class名」を追加します。

id属性を利用する場合は、タグのあとに、「id=id名」を追加します。

以上で、終わりなので確認してみましょう。

ブラウザを読み込みすると以下のようになります。

ちゃんとh3タグでclassを指定したタグは、緑色になっていて、h4タグでidを指定したタグは、オレンジになってます。

本日はここまでです。

ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？