CSSの最近のブログ記事

前回までに作ったサンプルページの背景は白のままで、味気ない物でした。
一般のウエブページには壁紙と呼ばれている背景画像が貼ってある物を多く見かけます。
そこで今回はサンプルページにもその壁紙(背景画像)を入れてみます。

この背景画像の設置はスタイルシート(CSS)で行います。
実はHTMLファイルに直接記述して指定しても出来るのですが、デザインに関わる記述はCSSファイルでという原則に基づくのと、HTMLファイルが複数存在する場合(普通存在します。)CSSファイルの記述を一カ所変更するだけですべてのHTMLファイルの背景を変更できるのでやはりCSSファイルに記述した方が都合いと思います。

前回まではXHTMLについてでしたが、今回はいよいよデザインを担当するCSSのお話です。
CSSはHTMLファイルとは別のファイルに書き込んでいきます。
そしてそれをHTMLファイルにつなげます。

  1. CSSファイルの用意
    • エディタを開いて1行目に半角で次のように記述する。
        @charset "Shift_JIS";
    • このCSSファイルを「第1回 いきなりですが、、、」で保存したHTMLファイル「20080808_01.html」と同じフォルダ(xhtml)内に「css」という名のフォルダを作り、その中にに拡張子を「.css」として「test.css」という名前で保存する。
    • ひとまずこの「test.css」は閉じる。
  2. HTMLファイルとCSSファイルをつなげる
    • 「第1回 いきなりですが、、、」で保存したHTMLファイル「20080808_01.html」をエディタで開く。
    • 5行目の先頭にカーソルを合わせて[Enter]キー押して改行する。
    • その場所に次のように記述する。
      <meta http-equiv="Content-Style-Type" content="text/css" />
    • 7行目の先頭にカーソルを合わせて[Enter]キー押して改行する。
    • その場所に次のように記述する。
      <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
    • 上書き保存する。

これで、HTMLファイルとCSSファイルがつながりました。

<head>と</head>の間の記述が次のようになったはずです。
(赤字が今回追加したところ)

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <title>はじめてのXHTML/CSS</title>
 <link rel="stylesheet" type="text/css" href="css/test.css" media="screen,print" />
</head>

 

KUMAOの押入TOPへ

カウンタ

アーカイブ

ウェブページ

ブログランキング・にほんブログ村へ

このアーカイブについて

このページには、過去に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

次のカテゴリはXHTMLです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

books