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>] を選択すると、ふつうの文字を入力するときよりもカーソルが大きくなります。
見出し1を選択
タイトルを入力します。
「スキー大好きっ!」と入力すると、画面にはこのように表示されます。

スキー大好きっ!

ソースにはこのように表示されます。
<h1>スキー大好きっ!</h1>
段落の形式を選択する前に、文字を入力してから形式を選択する方法もあります。
文字を入力してから、 フォームのプルダウンメニューで、[見出し1<H1>] を選択すると、書式が見出しに変わります。
文字を入力する書式を選択する10見出しができる

■ 文字の配置

次に、タイトルをセンタリング(中央寄せ)します。
カーソルはそのままで(「スキー大好きっ!」のところにあることを確認して)、 書式ツールバーのセンタリングするをクリックすると、 タイトルは画面の中央に配置されます。

スキー大好きっ!

ソースにはこのように表示されます。align は「並べる」という意味です。
<h1 style="text-align: center;">スキー大好きっ!</h1>
ついでに、左寄せは左寄せです。何も しない(デフォルト)と左寄せなのであまり使うことはないですが、一度センタリングした後に、やっぱり戻そうというときに使います。右寄せは右寄せです。画面 の右端に配置されます。

スキー大好きっ!

ソースにはこのように表示されます。
<h1 style="text-align: right;">スキー大好きっ!</h1>
後から文字の配置を変えたいときなどは、カーソルを文字列の前後、あるいは文字列の中に置いてから位置を指定(ボタンをクリック)します。

■ 文字色の指定

文字色を指定するには、まず、文字列の色を変えたい部分をマウスで範囲指定します。
範囲指定は、文字列の前にマウスをあてて左クリックし、そのまま(人差し指を押したままで)文字列の後ろまで移動します(ドラッグする)。
テキストをドラッグ1テキストをドラッグ2テキストをドラッグ310
範囲を指定したら、書式ツールバーにあるテキストの色を選択ボタンの上の方(黒い方)をクリックするとカラーパレットを開くので、指定したい色を選択して、 [OK] をクリックします。
テキストの色を選択
薄い青を選んでみました。
[デフォルト(D)] というボタンがありますが、 デフォルトとは何も指定しない場合のことで、ボタンをクリックすると、[新しいページの設定]→[デフォルトのページ設定] で指定したテキストの色になり ます。
画面はこうなります。

スキー大好きっ!

ソースはこうなります。色の指定(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つの指定で1つの要素だけでなく、同じページの複数の要素、さらに複数のページにわたって適用することができます。
CSS を使った場合、上の例はこうなります。
<h1 style="text-align: center;">スキー大好きっ!</h1>
プロパティが「text-align」、プロパティ値が「center」となります。
Composer の場合、ソースの中に style="~" と書いてあれば、プロパティを CSS で指定しています。

Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座