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

2022 8/31

2020年4月3日 2022年8月31日

URLをコピーしました！

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

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

<!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.jpeg" 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-color	16進数（#000000) カラーネーム(red,blue) reb(000,000,000)
文字サイズ	font-size	ピクセル指定（16px,24px) 倍数指定(em,rem) その他多数あり
行間	line-height	ピクセル指定（16px,24px) 倍数指定(em,rem) 単位なしの指定（１や２）
書体	font-family	serif(明長系) sans-serif(ゴシック）
文字の色	color	16進数（#000000) カラーネーム(red,blue) reb(000,000,000)
行揃え	text-align	中央揃え（center) 右揃え（right)