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

  • URLをコピーしました!

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

今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。

まずは、このページで学習するhtmlファイルを作りましょう。下記のコードになりますので、04という名前のフォルダを作成し、index.htmlというファイル名でHTMLファイルを作成します。03同様、画像もフォルダに設置しておきましょう。下記コードをコード模写入力もしくは、コピーして準備します。

目次

HTMLコード index.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.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のプロパティ

上記で記述した、CSS(カスケーティングスタイルシート)内で使用した、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」を指定したい場合、p要素が記述されているところ全てではなく、1箇所だけのp要素に適用したい場合は、class名を指定、特別性をもたせます。

<p class="center"> 

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

p.center{
   text-align:center;
}

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次