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

Webサイト制作,ホームページ基礎講座,動画

前回の03はじめてのホームページでは「画像要素」の設置を行いました。

今回は、HTMLでマークアップされたファイルにCSSを使って、背景色の設定や、線で枠を設置したり、行の中で中央揃えにするなどを行います。まずここで学習するhtmlファイルは下記になりますので、練習04という名前のフォルダを作成後、index.htmlというファイル名でHTMLファイルを作成し、コード模写もしくは、下記コードをコピーして準備します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エコロジー&環境問題</title>
</head>

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

HTML内に書く内包のスタイルシート

上記のindex.htmlファイルのtitle要素の下にstyle要素を書いて、その中にCSSを記述します。

このようにHTMLファイルの中の記述するスタイルシートを「内部スタイルシート」や「内包のスタイルシート」といいます。

このようなCSSの記述は、HTMLファイルに同梱して記述できますが、行数が増えるとメンテナンスしずらいので、通常は外部スタイルシート(CSS部分が別のファイル)に記述することになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エコロジー&環境問題 </title>
    <style>
        body{
            background-color: #999999;
            font-size:100%;
            line-height: 1.7;
            font-family:serif;
        }
    
        h1{
            background-color: #000000;
            color: #ffffff;
            text-align: center;
        }
    
        p.center{
            text-align: center;
        }
    </style>
</head>

CSSのプロパティ

設定内容プロパティ名
背景色background-color16進数(#000000)
カラーネーム(red,blue)
reb(000,000,000)
文字サイズfont-sizeピクセル指定(16px,24px)
倍数指定(em,rem)
その他多数あり
行間line-heightピクセル指定(16px,24px)
倍数指定(em,rem)
単位なしの指定 (1や2)
書体font-familyserif(明長系)
sans-serif(ゴシック)
文字の色color16進数(#000000)
カラーネーム(red,blue)
reb(000,000,000)
行揃えtext-align中央揃え(center)
右揃え(right)

p要素にclassをつけてみる

p要素に中央揃えである「text-align:center」の指定したい場合、1箇所だけでよい場合、<p class="center"> という他の<p>とは違う特別性を持たせたclass指定をおこないます。

cssで指定するときは、下記のように p要素に .center という形で指定します。class名だけの.centerでもよいのですが、どの要素に指定がある「class」というのがわかりやすくなる為、要素名+class名とつけています。

p.center{
   text-align:center;
}

続きは動画で確認してみましょう。

CSSの設定を行なってみた 4回目の動画