Home / Index / Prev / Next

8.文字を入力する

トップページに文字を入力していきますが、その前に、Composer の文字の入力に関係する機能を説明します。

■ 段落の形式を選択

まずは、見出しで使った、書式ツールバーにある [段落の形式を選択] ドロップダウンリストを見ていきます。

段落形式は本文のテキストのまま画面に文字を入力すると、入力したとおりに画面に表示されます（あたりまえ）。

改行したいときは、改行した い部分で Enter キーを押します。Enter キーを2回押すと、改行されて、さらに1行空白ができます。HTML ソースには改行した部分に改行を指定する<br>タグ（Break）が挿入されます。
改行を元に戻すとき（改行しないとき）は、改行した部分の前にカーソルを置いて Delete キーを押すか、改行した部分の後ろにカーソルを置いて BackSpace キーを押します。ワープロソフトと同じ要領です。

段落形式で段落を選択<p>は段落（Paragraph）を指定するタグで、[段落<P>] で 指定した文字列は改行 されて、文字列の前後が1行空きます。

段落形式で見出しを選択10<h1> は見出し（Heading）を指定するタグで、[見出し<H1>] で指定した文字列は、改行されて太字になり、文字列の前後が1行空きます。 <H1>から<H6>の順で、文字の大きさが徐々に小さくなります。

段落形式でアドレスを選択<address> は、メールアドレスなどを指定するタグで、[アドレス<ADDRESS>] で指定した文字列は、改行されて斜体文字になります。
1234567@hotmail.com
<address>1234567@hotmail.com</address>


段落形式で整形済みを選択<pre> は、整形済み文字列（Preformatted text）を指定するタグで、[整形済み<PRE>] で指定した文字列は、HTML ソースにある空白や改行をそのまま画面に表示します。
HTML ソースで改行されていても、そこに<br>タグがなければ、ブラウザ画面で見ても改行されずに表示されますが、<pre> 〜</pre>で囲まれた文字列は、<br>がな くても HTML ソースに表示されているとおりにブラウザ画面にも表示されます。
ただし、Composer の通常の編集モード（標準）で作っていれば、改行したいところで Enter キーを押すと、ソースには自動的に<br>タグが挿入されるので、[整形済み<PRE>] を使うことはないでしょう。

段落の形式を指定する方法は、見出しのところで説明したとおりで、ドロップダウンリストから段落の形式を選択してから文字を入力するか、文字を入力してか ら段落の形式を指定したい部分にマウス カーソルを置いて段落の形式を選択します。
入力した文字列の一部分だけ段落の形式を指定したい場合は、指定したい部分の前後を改行（Enter）してから、指定したい部分にマウスカーソルを置いて 段落の形 式を選択します。改行することによって、指定したい範囲を認識するようです。

■ フォントの指定

フォント（font）というのは、文字の書体のことです。
メニューバーの [書式(O)] → [フォント(F)] で表示されるメニューからフォントを選択して文字を入 力するか、あるいは、文字を入力した後に、指定したい文字を範囲指定（ドラッグ）してからフォントを選択することで、表示される文字の書体を指定すること ができます。
フォントを選択するたくさんのフォントが用意されていますが、インストールされているフォントはパソコンによって違うので、あまり特別なフォント を使うと、作者（あなた）の パソコンとビジターさんのパソコンとで、違うフォントが使われてしまうことになります。
とは言っても、どれが特別なフォントかわからないですね…(＾＾；
あまり気にしないで使っても大丈夫です。作ってみてから、友達のパソコンとか、学校や会社とかで見てみれば良いです。
フォントを指定しなければ、ビジターさんのブラウザで指定されたフォントで表示されます。

※ブラウザで表示されるフォントの指定は、[編集(E)] → [設定(E)] で[設定] ダイアログボックスを開き、[表示] カテゴリから [フォント] を選択します。
いくつか見本を見てみましょう（ソースの HTML タグは省略しています）。
固定幅
 12345 ABCDEFG あいうえお予約受付中
 style="font-family: monospace;"
Helvetica,arial
 12345 ABCDEFG あいうえお予約受付中 style="font-family: helvetica,arial,sans-serif;"
Times
 12345 ABCDEFG あいうえお予約受付中 style="font-family: times new roman,times,serif;"
Courier
 12345 ABCDEFG あいうえお予約受付中 style="font-family: courier new,courier,monospace;"
Arial Black
 12345 ABCDEFG あいうえお予約受付中 style="font-family: arial black;"
Comic Sans MS
 12345 ABCDEFG あいうえお予約受付中 style="font-family: comic sans ms;"
Impact
 12345 ABCDEFG  あいうえお予約受付中 style="font-family: impact;"
Roman
 12345 ABCDEFG あいうえお予約受付中 style="font-family: roman;"
ms sans serif
 12345 ABCDEFG あいうえお予約受付中
 style="font-family: ms sans serif;"
Times New Roman
 12345 ABCDEFG あいうえお予約受付中 style="font-family: times new roman;"
Verdana
 12345 ABCDEFG あいうえお予約受付中 style="font-family: verdana;"

CSS でフォントを指定するためのプロパティは font-family です。フォント名とフォント名の間にカンマ（,）を入れることで、第1希望、第2希望、第3希望、…というように、複数の フォントを指定することができます。第1希望のフォントがビジターさんのパソコンに入っていなければ第2希望のフォントで表示され、第2希望のフォントも なければ第3希望のフォントで表示されることになります。Helvetica,arial 、Times 、Courier は複数のフォントが指定されていますね。

いろいろなフォントを選んで、どのように表示されるか試してみてください。

■ 文字サイズの指定

文字の大きさを指定します。
メニューバーの [書式(O)] → [サイズ(Z)] で表示されるメニューからサイズを選択して文字を入力 するか、あるいは、文字を入力した後に、サイズを変えたい文字を範囲指定（ドラッグ）してからサイズを選択することで、表示される文字の大きさを指定する ことができます。
文字の大きさを指定する[小さくする(R)] は、書式ツールバーの文字を小さくすると同じです。何も指定しない文字に比べて、ひとまわ り小さくします。2回クリックすると、ふたまわり小さくなります。
[大きくする(G)] は、書式ツールバーの文字を大きくすると同じです。何も指定しない文字に比べて、ひとまわ り大きくします。2回クリックすると、ふたまわり大きくなります。

[medium] は標準サイズ（デフォルト）で、[small] は小さめ、[x-small] はもっと小さめ、[large] は大きめ、[x- large] はもっと大きめ、[xx-large] は非常に大きめ、ということになります。
こんな感じです。
小さくする
 12345 ABCDEFG あいうえお予約受付中
大きくする
 12345 ABCDEFG あいうえお予約受付中
x-small
 12345 ABCDEFG あいうえお予約受付中
small
 12345 ABCDEFG あいうえお予約受付中
medium
 12345 ABCDEFG あいうえお予約受付中
large
 12345 ABCDEFG あいうえお予約受付中
x-large
 12345 ABCDEFG あいうえお予約受付中
xx-large
 12345 ABCDEFG あいうえお予約受付中

HTML ソースはこうなってます。
小さくする
 <small>12345 ABCDEFG あいうえお予約受付中</small>
大きくする
 <big>12345 ABCDEFG あいうえお予約受付中</big>
x-small
 <font size="-2">12345 ABCDEFG あいうえお予約受付中</font>
small
 <font size="-1">12345 ABCDEFG あいうえお予約受付中</font>
medium
 12345 ABCDEFG あいうえお予約受付中
large
 <font size="+1">12345 ABCDEFG あいうえお予約受付中</font>
x-large
 <font size="+2">12345 ABCDEFG あいうえお予約受付中</font>
xx-large
 <font size="+3">12345 ABCDEFG あいうえお予約受付中</font>
文字を小さくするを2回クリックした場合は、ふたまわり小さくなるの で、ソースはこのようになります。
<small><small>12345 ABCDEFG あいうえお予約受付中</small></small>
HTML では、開始タグと終了タグはセットなので、開始タグ<small>を2つつけたら、終了タグ</small>も2つになります。 <big>も同じで、より大きくしたいときは、<big><big>〜</big>< /big>となります。
x-small は標準（medium）に比べて2段階小さいので<font size="-2">〜</font>、xx-large は3段階大きいので<font size="+3">〜</font>となります。わかりやすいですね。

なお、上のソースは全て HTML で指定されていますが、本当は、x-small から xx-large は CSS のプロパティ font-size に対する値なので、ソースはこのようになるのが正しいはずです（HTML タグは省略しています）。
x-small
 style="font-size: x-small;"
small
 style="font-size: small;"
medium
 指定なし
large
 style="font-size: large;"
x-large
 style="font-size: x-large;"
xx-large
 style="font-size: xx-large;"

■ テキストの装飾

テキストの装飾を指定します。
メニューバーの[書式(O)] → [テキストの装飾 (S)] で表示されるメニューから装飾する項目を 選択して文字を入力 するか、あるいは、文字を入力した後に、装飾したい文字を範囲指定（ドラッグ）してから装飾する項目を選択することで、表示される文字の装飾を指定する ことができます。
テキストの装飾を選択する[太字(B)]、[斜体(I)]、[下線(U)] については、タイトルをつけるときに説明したとおりで す。
それぞれ、書式ツールバーの太字にする、斜体文字にする、下線をつけるをクリックしても指定することができます。
指定した装飾を解除するには、装飾した項目を再度クリックします。
見本とソースを書いてみます。
太字
 Mozilla Composer Lecture
 <span style="font-weight: bold;">Mozilla
Composer Lecture</span>
斜体
 Mozilla Composer Lecture <span style="font-style: italic;">Mozilla
Composer Lecture</span>
下線
 Mozilla Composer Lecture <span style="text-decoration: underline;">Mozilla
Composer Lecture</span>
取り消し線
 ぶさいく個性的な顔
 <span style="text-decoration: line-through;">ぶさいく</span>個性的な顔
上付き
 わたしは上付きです。50m3
 わたしは<sup>上 付き</sup> です。 50m<sup>3</sup>
下付き
 わたしは下付きです。
 わたしは<sub>下 付き</sub> です。
固定幅
 Mozilla Composer Lecture
 <span style="font-family: monospace;">Mozilla
Composer Lecture</span>
改行なし
 見本はありません。
 見本はありません。
強調
 Mozilla Composer Lecture <em>Mozilla Composer Lecture</em>
強い強調
 Mozilla Composer Lecture <strong>Mozilla Composer Lecture</strong>
引用
 Mozilla Composer Lecture <cite>Mozilla Composer Lecture</cite>
略語
 HTML <abbr>HTML</abbr>
頭文字略語
 URL <acronym>URL</acronym>
コード
 Mozilla Composer Lecture <code>Mozilla Composer Lecture</code>
サンプル出力
 Mozilla Composer Lecture <samp>Mozilla Composer Lecture</samp>
変数
 Mozilla Composer Lecture <var>Mozilla Composer Lecture</var>
・太字、斜体、下線、取り消し線および固定幅は CSS の指定で、そのほかは HTML で指定されています。
・固定幅は、フォントの指定にあった固定幅と同じです（monospace）。
・改行なしは、文章が横に長い場合に、通常はブラウザでは画面の横幅に合わせて勝手に改行されますが、改行なしを指定すると、自動改行しないことができま す。改行禁止のタグ<nobr>になるはずですが、うまくできませんでした。
・強調（emphasis）は斜体文字で表示され、強い強調（strong）は太字で表示されます。画面の表示上は、それぞれ斜体文字（italic）、 太 字（bold）を指定しても同じですが、HTML タグにはそれぞれ意味があるので、目的にあった指定をした方が良いです。以下の項目も同じで、表示は変わらなくても目的に応じて使い分けをしましょう。
・引用（citation）は、参考にした文献名などを記載するときに使います。
・略語（abbreviation）は、その文字列が略語であることを示します。
・頭文字略語（acronym）は、その文字列が頭文字を合わせた略語であることを示します。
・コード（code）は、その文字列がコンピュータのプログラムコードであることを示し、固定幅で表示されます。
・サンプル出力（sample）は、その文字列がコンピュータからのサンプルであることを示し、固定幅で表示されます。
・変数（variable）は、その文字列がコンピュータのプログラムコードの中の変数であることを示し、斜体で表示されます。

いろいろありますが、太字と斜体以外はあまり使うことはないかもしれませんね。

■　文字列の色

文字列の色を指定します。
メニューバーの [書式(O)] → [文字列の色 (C)] をクリックすると [文字列の色] ダイアログボックスが 開くので、指定したい色を選択して文字を入力するか、あるいは、文字を入力した後に、色を指定したい文字を範囲指定（ドラッグ）して [文字列の色] ダイア ログボックスから色を選択することで、文字の色を指定することができます。 文字列の色を指定する
タイトルをつけるときに説明しましたが、書式ツールバーにあるテキストの色を選択ボタンの上のほうをクリックしても [文字列の色] ダイアロ グボックスが開くので、文字の色を指定することができます。こっちのほうが楽です。
テキストの色を選択

■ テキストの装飾を削除する

テキストの装飾を削除する 文字列を範囲指定（ドラッグ）してから、メニューバーの [書式] → [テキストの装飾を削除(X)] をクリックすれば、指定した文字列の書体、装飾、色な どが削除（解除）されます。
また、テキストの装飾を設定したままで文字を入力している場合に、途中で設定を中止するには、設定を中止する場所にマウスポインタを置き、[書式] → [テ キストの装飾を一時中止(X)] をクリックすれ ば、そこからは装飾のない文字を入力することができます。

■ トップページに文字を入力する

文字の入力に関する設定はだいたい説明しました。
さっそく実践してみましょう。といっても、説明した機能はほとんど使わなかったりします^^

トップページにコンテンツを入れていきます。
コンテンツ（Contents）というのは、ページの内容の目次のことです。メインテーマのほかに、作者の自己紹介、日記、リンク集などが定番ですね。今 作っているホームページは「スキー大好きっ！」ですから、メインテーマはスキー場の紹介とスキー日記にします。

画面に「Contents」と入力して Enter キー押して改行します。続けて、「スキー場の紹介」と入力し、今度は Enter キーを2回押します。2回押すのは、1回目で改行、2回目で1行空けるためです。、「スキー日記」、Enter ×2、「プロフィール」、Enter ×2、「リンク集」、Enter、と入力していくと、画面はこうなります。
Contents
スキー場の紹介

スキー日記

プロフィール

リンク集
まとめてセンタリングします。
「Contents」から「リンク集」までをマウスで範囲指定して、センタリングするをクリックすると、画面の真ん中にきます。
Contents
スキー場の紹介

スキー日記

プロフィール

リンク集
「Contents」は段落の形式を [見出し3<H3>] にします。Contents だけ1行空けなかったのは、見出しを使うので自動的に改行が入るためです。書体は「Times New Roman」、文字色は「#339999」にします。手順はこうですね。
・Contents を範囲指定して、[段落の形式を選択]ドロップダウンリストから [見出し3<H3>] を選択。
・[書式(O)] → [フォント(F)] から [Times New Roman] を選択。
・テキストの色を選択ボタンの上の方をクリックして、[文字列の色] ダイアログボックスから文字色を選択。

トップページはこのようになりました。うまくできましたか？
コンテンツを入れたトップページ10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
<title>スキー大好きっ！</title>
</head>
<body style="background-image: url(bg1-yuki.gif);
 background-color: rgb(204, 255, 255);
 color: rgb(0, 0, 0);"
 alink="#000099" link="#000099" vlink="#990099">
<h1 style="color: rgb(51, 102, 255);
 text-decoration: underline;
 font-style: italic;
 text-align: center;">
 スキー<span style="color: rgb(255, 0, 0);">大好きっ！</span>
</h1>
<div style="text-align: center;">
<h3 style="font-family: times new roman; color: rgb(51, 153, 153);">Contents</h3>
スキー場の紹介<br>
<br>
スキー日記<br>
<br>
プロフィール<br>
<br>
リンク集<br>
</div>
<br>
</body>
</html>
<div style="text-align: center;">は、終了タグ</div>まで（リンク集まで）の間をセンタリングするためのタグです。

ブロック要素とインライン要素
HTML タグは、ブロック要素とインライン要素に分類されます。
ブロック要素は、タグで囲まれた文字列の前後に改行が入るもので、上で説明した[段落の形式を選択]ドロップダウンリ ストの中で出てきたタグは全てブ ロック要素です。そのほかに、文章を引用するときに使う<blockquote>要素、作表に使う<table>要素などがあり ます。
インライン要素は、タグを挿入しても改行されないもので、上で説明したテキストの装飾を指定するときに出てきたタグは 全てインライン要素です。そのほか に、リンクを張るときに使う<a>要素、画像を挿入するときに使う<img>要素などがあります。
<div>要素と<span>要素は、いずれも文字列の範囲を指定するときに使うタグですが、<div>要素はブ ロック要素、<span>要素はインライン要素になります。

Home / Index / Prev / PageTop / Next