コンピュータの総合情報 [Masaaki NEMOTO] ホーム | ソフト | HTML | UNIX | 書籍 | パソコン | リンク | ショッピング | 検索

ウェブサイト作成講座

Download! Quick Post Card
楽天ブックス

HTML をパワーアップ!スタイルシートの活用

HTML4.0 以降の HTML では、ウェブページの構造のみを指定し、文字の太さなどの実際の表示は、スタイルというものを使って記述します。例えば見出しを記述するための<h1>タグの場合、色や枠などをスタイルシートによって変えることが出来ます。

スタイルはタグの中に直接書くことも出来ますが、本書ではスタイルを記述したファイルを別に用意し、それを読み込んで使用する方法を説明します。そうしておくと、スタイルシートを記述したファイルのスタイルを変えるだけで、ウェブサイト全体のスタイルを、一気に変えることが出来ます。季節に合わせてウェブサイトのスタイルを変えたい時などに、とても便利です。

スタイルをファイルに記述

ウェブサイトとは、一般的にはホームページ と呼ばれているもので、インターネット上に公開されている文書のことです。この文書は、HTML という言葉を使って記述され、文字の大きさや色などのレイアウトに関する情報をもっています。何とそれだけでなく、他にも様々な情報を一つのまとまりとして構成することが出来るようになっています。本書では、この HTML の記述方法を解説しています。

HTML と同じようにテキストエディタで記述し、拡張子を css にして保存して下さい。サンプルでは、見出しである<h1>タグで指定された見出しの色を青に変更するスタイルを記述し、ファイル名を style.css にして保存しています。ここでは一つしか指定していませんが、一つのファイルで幾つかのスタイルを指定することが出来ます。

サンプル (style.css)
h1{color: blue}
            

次に、HTML 文書の<head>タグと</head>タグの間に、次のように書いて下さい。すると、先ほど作成したスタイルシートを読み込み、<h1>タグで指定された見出しの色が、青になります。

サンプル (スタイルシートの読み込み)
<link rel="stylesheet" type="text/css" href="style.css">
            

背景色の変更

背景色を変更します。次のサンプルでは、青に変更しています。

サンプル
body {background: blue}
            
サンプルの結果
背景色の変更

見出し (その1)

スタイルシートにサンプルのような記述をして、<h1>タグを使用すると、結果のようになります。なお、改行せずに一行で入力するようにして下さい。

サンプル
h1 {font-size:18pt; color: red; border: double blue;
border-width: 0pt 50pt 10pt 0pt}
            
サンプルの結果
見出し (その1)

見出し (その2)

スタイルシートにサンプルのような記述をして、<h2>タグを使用すると、結果のようになります。

サンプル
h2 {font-size:16pt; color:blue; background: yellow}
            
サンプルの結果
見出し (その2)

見出し (その3)

スタイルシートにサンプルのような記述をして、<h3>タグを使用すると、結果のようになります。なお、改行せずに一行で入力するようにして下さい。

サンプル
h3 {font-size: 14pt; color: lightseagreen; border: solid lightgreen;
border-width: 0pt 0pt 2pt 50pt}
            
サンプルの結果
見出し (その3)


b-click

このコンテンツ内のデータは無断で使用しないで下さい。 ただし「Quick Post Card」については、 付属のドキュメントファイルに従ってご使用下さい。 詳しくは、「このサイトについて」をご覧下さい。


Copyright (C) 2004-2007 Masaaki NEMOTO. All Rights Reserved.
商品無料仕入れ戦隊『電脳卸』 商品無料仕入れ戦隊『電脳卸』