センタリング（中央揃え）の方法： STEP3 【 HTMLファイルにHTMLタグを入力しよう】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

HTMLタグについて

基礎部分の入力

タイトルの入力

背景の設定方法

文字の入力

改行をする

平行線を引く

中央揃えの方法

画像を張る

サイト内リンク

他サイトへのリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　センタリング（中央揃え）の方法

センタリング（中揃え）とは


	センタリング（中央揃え）とは、文章や画像をWebブラウザ内の中央に表示させて配置させることを指します。通常ホームページでは、何も指定をしないと左側に揃えられて表示されます。そこで、中央に表示させたい場合に、このセンタリングタグ入力することで、文章や画像を中央に表示させることができるようになります。

中央揃えにしてみよう！

それでは実際にセンタリング（中央揃え）にしてみましょう。

～（上略）～
<body bgcolor="#fffeee">
<div align="center">
体験ホームページ
<br>
<br>
<hr width="300">
<br>
<b>体験ホームページへようこそ</b>
</div>
</body>
</html>

HTMLタグ【文字・画像の配置】

上の赤い部分がセンタリングをさせるためのタグになります。
「<div> ～ </div>」で囲まれた部分を、ひとまとまりとして指定することができます。そして、「align="*"」は属性タグで、この部分でセンタリングとして指定します。
それでは実際に上のように入力してみてください。

上のように表示されたと思います。文字がWebブラウザの中央に表示されましたね。試しに「<div> ～ </div>」以外の場所に文字を入力するとわかると思いますが、この範囲内に入力していない文章は指定をしていないことになり、左に揃えられて表示されます。それでは次に、応用編として左や右に揃えてみましょう。

応用編：左揃え、右揃えに指定する

中央揃えの方法はわかりましたが、左や右に揃えたい場合もありますよね？そこで、次に進む前に左揃えや右揃えにする方法も練習しておきましょう。
この方法を使用すると、通常だと真中に表示されてしまう罫線も左、もしくは右に配置することができます。それでは下記をご覧ください。

～（上略）～
<body bgcolor="#fffeee">
<div align="right(left)">
体験ホームページ
<br>
<br>
<hr width="300">
<br>
<b>体験ホームページへようこそ</b>
</div>
</body>
</html>

上の属性タグ内の赤い部分を変更することで右揃え、もしくは左揃えに変更することができます。英語を翻訳すればわかることですが、「right」が右揃え、「left」が左揃えとなります。それでは「center」を一度消して、そこに入力してみてください。
（サンプル通りにする場合は変更後、元の「center」に戻してください）

上の絵が左揃え、下の絵が右揃えとなります。上記でも説明しましたが、罫線も一緒に揃えることができていますよね。このタグは、ページ全体を同じ揃え方にする時に便利なタグだと思います。

それでは基本的なHTMLタグの入力はこれで終了です。お疲れ様でした。
次に画像に関する勉強をしましょう。「STEP4」に進んでください。

ページの上へ

前のページ

トップページ

STEP4 【 HTMLに画像を張ってみよう】

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.