Home / Index / Prev / Next
5.トップページにタイトルを入れる
■ 見出し
トップページにタイトルを入れます。
タイトルには目立つように、「見出し」を使いましょう。新聞や雑誌で使われる大見出し・小見出しのあの見出しです。
HTML では、「見出し」には大きさの違いで6種類あります。また、「見出し」を使うと、改行されて、文字は太字になります。
見出し1<H1>
|
ABCDEFGあいうえお12345
|
| 見出し2<H2> |
ABCDEFGあいうえお12345
|
| 見出し3<H3> |
ABCDEFGあいうえお12345
|
| 見出し4<H4> |
ABCDEFGあいうえお12345
|
| 見出し5<H5> |
ABCDEFGあいうえお12345
|
| 見出し6<H6> |
ABCDEFGあいうえお12345
|
Composer
で見出しを入れるには、書式ツールバーにある、ドロップダウンリスト
を使います。
ドロップダウンリストを開いて、[見出し1<H1>] を選択すると、ふつうの文字を入力するときよりもカーソルが大きくなります。
タイトルを入力します。
「スキー大好きっ！」と入力すると、画面にはこのように表示されます。
スキー大好きっ！
ソースにはこのように表示されます。
<h1>スキー大好きっ！</h1>
段落の形式を選択する前に、文字を入力してから形式を選択する方法もあります。
文字を入力してから、
フォームのプルダウンメニューで、[見出し1<H1>] を選択すると、書式が見出しに変わります。
→
→
■ 文字の配置
次に、タイトルをセンタリング（中央寄せ）します。
カーソルはそのままで（「スキー大好きっ！」のところにあることを確認して）、 書式ツールバーの
をクリックすると、
タイトルは画面の中央に配置されます。
スキー大好きっ！
ソースにはこのように表示されます。align は「並べる」という意味です。
<h1 style="text-align:
center;">スキー大好きっ！</h1>
ついでに、
は左寄せです。何も
しない（デフォルト）と左寄せなのであまり使うことはないですが、一度センタリングした後に、やっぱり戻そうというときに使います。
は右寄せです。画面
の右端に配置されます。
スキー大好きっ！
ソースにはこのように表示されます。
<h1 style="text-align:
right;">スキー大好きっ！</h1>
後から文字の配置を変えたいときなどは、カーソルを文字列の前後、あるいは文字列の中に置いてから位置を指定（ボタンをクリック）します。
■ 文字色の指定
文字色を指定するには、まず、文字列の色を変えたい部分をマウスで範囲指定します。
範囲指定は、文字列の前にマウスをあてて左クリックし、そのまま（人差し指を押したままで）文字列の後ろまで移動します（ドラッグする）。
→
→
範囲を指定したら、書式ツールバーにある
の上の方（黒い方）をクリックするとカラーパレットを開くので、指定したい色を選択して、
[OK] をクリックします。
薄い青を選んでみました。
画面はこうなります。
スキー大好きっ！
ソースはこうなります。色の指定（color）が入りました。
<h1 style="text-align: center; color:
rgb(51, 102,
255);">スキー大好きっ！</h1>
もちろん、文字列の一部だけを違う色にすることもできます。「大好きっ！」だけ範囲を指定して、カラーパレットから赤を指定すると、こうなります。こっち
のほうがいいかな。
スキー大好きっ！
ソースでは、「大好きっ！」の前に、文字を赤くする指定が入りました。
<h1 style="text-align: center; color: rgb(51,
102,
255);">スキー<span
style="color: rgb(255, 0, 0);">
大好きっ！</span></h1>
■ 文字列の装飾
文字に色をつけるのも「文字列の装飾」ですが、書式ツールバーには、そのほかにも、太字
、斜体
、下線
などがあります。
「見出し」ははじめから太字になっていますので、ここでは使いませんが、せっかくだからやってみますね。
「少年よ大志を抱け！」の太字にしたい部分（今回は全部）を範囲指定して、をクリックするとこうなります。
Boys, Be Ambitious!
英語になったりして…。
ソースはこうです。bold が太字という意味です。
<div
style="font-weight: bold;">Boys,
Be
Ambitious!</div>
次は斜体文字です。
タイトル「スキー大好きっ！」の斜体にしたい部分（今回は全部）を範囲指定して、をクリックするとこうなります。
ス
キー大好きっ！
斜めになりましたね。斜体文字は italic です。
<h1 style="text-align: center; color: rgb(51,
102, 255); font-style:
italic;">スキー<span style="color: rgb(255, 0,
0);">大好きっ！</span></h1>
さらに、下線を引いてみます。同じように範囲を指定してから、をクリックします。
ス
キー大好きっ！
下線は underline です。
<h1 style="text-align: center; font-style:
italic; color: rgb(51, 102, 255); text-decoration:
underline;">スキー
<span style="color: rgb(255, 0,
0);">大好きっ！</span></h1>
なんかタイトルっぽく見えるようになりましたか？
通常は、ホームページのリンク部分には下線がついています。不用意に下線を使うと、訪問者がリンク部分と間違ってしまうおそれがありますので、注意して使
いましょう。
HTML と CSS
HTML（HyperText Markup Language） は、
ホームページを作るための基本となるプログラム言語で、タグ（tag）と呼ばれる印を使ってページを作成します。タグは、文字列などを開始タグ（開タ
グ）と終了タグ（閉タグ）とで囲んで記述し、その開始タグから終了タグまでを「要素」、囲まれた文字列を「要素の内容」と言います。また、その要素に対し
てタグに関連するプロパティ（属性）とその値を指定します。
<h1
align="center">スキー大好きっ！</h1>
この場合、全体を<h1>要素、開始タグ<h1>、終了タグ</h1>、プロパティ「align」、プロパティ
値「center」、そして、要素の内容が「スキー大好きっ！」ということになります。
CSS（Cascading Style Sheets） は、
HTML からスタイルに関する指定を分離するために使用します。つまり、ページの構造は HTML
を使い、色をつけたり、レイアウトを指定するといった、ページの見栄え（見た目）をよくするためには CSS を使いましょうということです。CSS
は、HTML
に比べてより細かい指定が可能で、また、CSS
で指定したプロパティとその値は、１つの指定で1つの要素だけでなく、同じページの複数の要素、さらに複数のページにわたって適用することができます。
CSS を使った場合、上の例はこうなります。
<h1
style="text-align: center;">スキー大好きっ！</h1>
プロパティが「text-align」、プロパティ値が「center」となります。
Composer の場合、ソースの中に style="~" と書いてあれば、プロパティを CSS で指定しています。