はじめてのホームページ　HTMLとCSS

2020年4月3日2024年12月30日

URLをコピーしました！

01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の<p>をマークアップしています。今回は、デザイン担当のCSSを設定します。

フォルダ・ファイルを作成

お使いのエディタを開き、練習フォルダに直下に、index.htmlというファイルを作ってください。1回目のファイルのまま使っていただいてもOKです。

マークアップされているHTMLにCSSを設定

内部スタイルシートを使ってHTMLにCSSを設定してみましょう。内部スタイルシートは、HTMLファイルの中にCSSを書く方法です。簡単にスタイルシートを試したい場合に便利です。

なお、一般的にウェブサイトでは、CSSを別ファイルに書く外部スタイルシートが使われます。基礎講座では、ファイルが変わると理解しにくい点も出てくるので、便宜上同じファイル内に記述しています。
外部スタイルシートについては、別の講座で解説しますので、今回は内部スタイルシートを練習してみましょう。

内部スタイルシートの書き方

HTMLの <title> 要素の下に、<style> 要素を追加してCSSを書きます。

コード例：内部スタイルシートを使ってみよう

以下のコードを模写して、実際に手を動かしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部スタイルシートの練習</title>
  <!-- 内部スタイルシート -->
  <style>
    body {
      background-color: #f0f8ff; /* 背景色を薄い水色に設定 */
      color: #333333; /* 文字色を濃いグレーに設定 */
      font-family: Arial, sans-serif; /* フォントを指定 */
    }

    h1 {
      color: #ff6600; /* h1の文字色をオレンジに設定 */
      text-align: center; /* 文字を中央揃えに */
    }

    p {
      font-size: 16px; /* 段落の文字サイズを16pxに設定 */
      line-height: 1.6; /* 行間を少し広く */
    }
  </style>
</head>
<body>
  <h1>内部スタイルシートの練習</h1>
  <p>このページでは、内部スタイルシートを使ってCSSを設定しています。</p>
  <p>スタイルシートはHTMLの中に[style]タグで書きます。</p>
</body>
</html>

コードの解説

<style> タグ
- CSSのコードは<style>タグで囲みます。
- <style>タグは、HTMLファイルの<head>セクション内に書くのが基本です。
CSSの設定例
- body タグ：背景色や文字の色、フォントを指定しています。
- h1 タグ：見出しの色をオレンジにし、中央揃えにしています。
- p タグ：段落の文字サイズや行間を設定しています。
コメントの書き方
CSS内では /* コメント */ でコメントを書きます。コードの説明やメモに使えます。コメントは、ショートカットキー ctrl(command) + /　を使います。

CSSプロパティについて

HTMLファイル内にCSS（スタイルシート）を記述する場合は、<style>要素を使います。
<style>要素の設置場所は、<head>要素内で、一般的には<title>要素の下に記述します。

colorプロパティ

colorプロパティは、文字の色を変更するために使うCSSのプロパティです。
このプロパティを使うことで、要素内のテキストの色を自由に設定できます。

色の指定方法

16進数カラーコード

#ff6600 のように#から始まる6桁のコードで色を指定します。
例：#ff0000（赤）、#00ff00（緑）、#0000ff（青）

色名

red、blue、green などの基本的な色名も使えます。
色名は簡単ですが、細かい色の調整には16進数の方が便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>colorプロパティの練習</title>
  
  <style>
    h1 {
      color: #ff6600; /* 文字色をオレンジに設定 */
    }
  </style>
</head>
<body>
  <h1>colorプロパティで文字色を変更</h1>
</body>
</html>

backgroundプロパティ

backgroundプロパティは、要素の背景に関するスタイルを指定するために使うCSSのプロパティです。
このプロパティを使うことで、要素の背景色や背景画像などを設定できます。

具体例：h1要素の背景色を変更

以下の例では、h1要素の背景色を薄いグレーに設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>backgroundプロパティの練習</title>
  
  <style>
    h1 {
      background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
      color: #ff6600; /* 文字色をオレンジに設定 */
    }
  </style>
</head>
<body>
  <h1>background-colorで背景色を設定</h1>
</body>
</html>

backgroundプロパティの便利な点

background プロパティでは、背景色、背景画像、背景の繰り返し設定を1つにまとめて指定できます。

body {
  background: #f0f8ff url("background.jpg") no-repeat center center;
}

#f0f8ff：背景色
url("background.jpg")：背景画像
no-repeat：背景画像を繰り返さない
center center：背景画像の位置（中央に配置）

body要素に背景色を入力

cssを追加する際は、style要素内に追記できます。HTMLではh1要素よりbody要素が上にあるので、CSSもそれに習って上に追記しましょう。

<style>
        body{
            background-color: #ffffe0;
        }
        h1 {
            color: #ff0000;
            background-color: #23b8d3;
        }
</style>

下記のコードにCSSを追加してみよう！

HTMLのマークアップ済みファイルを使って<style>から</style>までの指定箇所にCSSを追加してみましょう。カラーコードがわからない場合は、こちらのページをご参照ください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジー＆環境問題 </title>
    <style>
        /* ここにCSSを追加してみましょう */
        body {
            /* 背景の色を薄い黄色にしましょう */
        }

        h1 {
            /* 背景の色をブルーにしましょう */
            /* 文字の色を赤にしましょう */
        }
    </style>
</head>

<body>
    <h1>ECOLOGY 【エコロジーへの取り組み】</h1>
    <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
        Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
    </p>
    <p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
    </p>
    <p><small>Copyright (C) Computer Technology Groups. All rights reserved</small></p>
</body>

</html>