超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
Style Sheet
スタイルシートについて 基本のページ ファイルの保存方法 スタイルシートの基本 見出しの書き方 表示位置を変える 段落・改行を入れる 画像を表示する 文字サイズと色の変更 テーブル(表)の基本 セルに文字を入れる セルの統合 セル内の位置を変える 文字の太さを変える リスト番号をつける リンクを張ってみよう！ All About
ホームページ作成 All About　JavaScript

見出しの書き方

見出しを指定するタグは、 <h*>　</h*>　を使います。

*には、1から6までの数字が入ります。
<h1>見出し1</h1> のように書きます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

それぞれ見出しの大きさは次のようになります。

見本の文字の大きさを見る

実際に見出しを書いて見ましょう

先ほど作ったファイルを開いてください。

＜例題1で保存したファイル＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>タイトル</title>
</head>
<body>

本文

</body>
</html>

まず、<title>　と　</title>、<body>　と　</body>　の「本文」の文字を　「MY HOMEPAGE」　に書き換えます。
すると、以下のようになります。
（MY HOMEPAGE　の部分は何でもかまいません。好きな題名をつけてください。）

ソース内の半角スペース及びタブ、改行は無視されますので、適当に改行をして見やすくしてください。

＜例題2＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
</head>

<body>

MY HOMEPAGE

</body>
</html>

では、ブラウザで確かめて見ましょう。

ファイルを上書き保存して、閉じてからファイルをダブルクリックしてみてください。下の図のようになりましたか？

上記のように表示出来たら、「MY HOMEPAGE」の部分をh1タグで囲んで見ましょう。

フラウザは閉じずにそのまま、ブラウザのメニューバーの表示から「ソース」を選択してソースを表示してください。

すると、メモ帳でソースが開きます。

では次に、「MY HOMEPAGE」を <h1>　</h1>タグではさんでください。

＜例題3＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
</head>

<body>

<h1>MY HOMEPAGE</h1>

</body>
</html>

上記のように書き込んで上書き保存をしたら、ブラウザの更新ボタンを押します。

すると、情報が更新されて以下のように表示されます。

どうですか？
うまく表示できましたか？


表示位置を変えてみましょう

では次に、見出しを真中に移動させましょう。（センタリングと言います）

センタリングするためには、センタリングさせるスタイルシートを<head>　〜　</head>の間に記述し、　 <div　class="クラス名">　</div>　ではさむと、タグではさまれた部分がすべてセンタリングされます。

では、先ほどの <h1>MY HOMEPAGAE</h1>をセンタリングしてみましょう。

＜例題4＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>

<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>
</div>

</body>
</html>

HTMLと同じファイルに書く場合は、　<style type="text/css">　〜　</style>　の間にスタイルシートを記述します。

そして、必ずスタイルシートに対応していないブラウザのために　<!--　-->でコメントアウトしておきましょう。
（コメントアウトされた部分はブラウザには表示されなくなります。）

body {
color: #000000;
background-color: #FFFFFF;
}
この部分はbody全体のスタイルを指定しています。
この場合は color で文字の色を黒、　background-color　で背景色を白に指定してます。
.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
次のこの部分がセンタリングの指定です。
クラスセレクタ名に「.center」を使いました。
クラスセレクタ名は、適当にわかりやすい名前をつけてもいいです。
但し、最初の一文字には数字を使わないように気をつけましょう。

文字をセンタリングするには　text-align:center　を使います。
最後の ; はここで区切りますよと言う意味です。複数の項目を続けて指定する場合は忘れずに書きましょう。

次の　padding-top:10px;　 padding-bottom:10px;　でセンタリングする文字の上下の部分に10pxの余白を作っています。
この余白を作ることがHTMLタグだけではできませんでしたよね。

<div class="center">
<h1>MY HOMEPAGE</h1>
</div>
そして「MY HOMEPAGE」の文字には、ひとかたまりの範囲として定義するブロック要素　<div>　</div>　を使って全体をひとつのかたまりとしてまとめています。
この　<div>　</div>　にセンタリングするクラスセレクタを適用して、　 <div class="center">　</div>　ではさむと ひとかたまりに定義された部分全体がセンタリングされます。

では、ファイルを上書き保存したあとブラウザの更新ボタンを押すと、 以下のように題名がセンタリングされました。


段落・改行をする

画像をタイトルの下に表示させるために段落を入れます。
段落を入れるには、
　<p>　
と書くと一段下がって、段落を入れることができます。

HTMLの場合、段落に終了タグがなくても表示には問題ありません。
終了タグを入力する場合は<p> と　</p>ではさみます。

段落ではなく、改行をする場合には
　<br>　
と書くと改行をすることができます。 改行タグには終了タグはありません。

画像を表示させてみよう

では、画像を貼り付けてみましょう。

画像を表示させるには、次のように書くと画像を表示させることができます。

　<img src="ファイル名">　
ファイル名には拡張子まで書きます。（ .jpg や .gif などです）

見本画像の写真のファイル名は「cake.jpg」なので、ソースには

　<img src="cake.jpg">　
と書きます。

もしも、画像のファイルを別のフォルダにおいている場合は、

　<img src="フォルダ名/cake.jpg">　
となります。

では、先ほどのソースにタイトルで改行をして、画像を追加してみましょう。

＜例題5＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>

<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>

<p>
<img src="cake.jpg">
</div>

</body>
</html>

ファイルを保存してブラウザを更新してください。
下のように表示できましたか？

▲このページのトップに戻るTop

Tips スタイルシートを記述するときの注意！

スタイルシートを連続して指定する場合、指定した部分の区切りで必ず「;」をつけましょう。
「;」を付け忘れるとWebが真っ白で表示されなくなります。
もし、Webが真っ白で表示されなくなったら「;」を付け忘れていないか確かめてくださいね。