文章のイメージを変える

エディターやブラウザーを使いやすいものに変え効率をアップします。文章の行間を空け文章を読みやすくする等、実際にホームページを作っていく上で役に立つタグを解説しています。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

エディター、ブラウザーを使い易いものに代える ▲

今まではNotepadを使って文章を書いてきましたが、効率という観点からはお世辞にもいいとはいえません。
無料で使えるフリーソフトでも、非常に優れたものがあります。

HTMLエディター

フリーウェアでは、Homepage Manager、TTTeditor等がお勧めです。Homepage Managerは市販のホームページ作成ソフトのように、IEで見るのと同じ状態の画面で、ホームページを造っていくことができます。
TTTeditorは、タブ切り替え方式になっているので一度にたくさんのホームページを開いても、混乱せず、編集が実にやりやすくなっています。タグを入れるのも簡単です。たとえば「Shiftキー」を押しながら「Enterキー」を押すと <BR>のタグが入りますので、普通の文章を書く感覚でHTML文が作れます。両方ともフリーソフトと思えない、一度使うと手放せなくなる優れものです。(よく似た名前で TTeditorというものもありますが別物です)
ここ迄でHTMLの基本的なことが理解できているはずですから、ぜひこれらを使うことをお勧めします。

作者のホームページ　　TTTeditor　　　　　　　http://homepage1.nifty.com/taka36/
　　　　　　　　　　　　　　Homepage Manager　　http://homepage1.nifty.com/~akira_t/

ブラウザー

Sleipnir・・・雑誌等でよく紹介されていますので、すでに使っている人も多いと思います。タブ切り替え方式になっているので、多数のホームページを同時に開くときに、とても便利です。これも一度使うとありがたさがよくわかると思います。フリーソフトです。

著作権者のホームページ　　http://www20.pos.to/~sleipnir/

上に戻る

タグの追加 ▲

　　　　　　　　　　　
文章を書くためのタグで１章では紹介できなかったもの、あるいは不足してた部分を補います。

文字の色・・・色の指定方法

１章では文字の色は <FONT color="色の名前">というタグを使いました。しかし色は１６７７万色あります。これを名前で指定できるはずがありません。色はRGBの３原色から成り立っていますので、その配合割合を数値で指定します。 <FONT color="#000000">のように指定します。最初の二桁が赤の量、真中の二桁が緑の量、最後の二桁が青の量を表しています。わかりにくいのは数字に１６進数を使っていることです。「0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,12,13,14,15,16,17,18,19,1a,1b・・・・f0,f1,f2,f3,f4,f5,f6,f7,f8, f9fa,fb,fc,fd,fe,ff」というように数は増えていきます。<FONT color="#000000">は赤、緑、青ともにゼロの状態ですから黒を表すことになります。 <FONT color="#FFFFFF">は赤、緑、青とも最大の状態ですから白を表します。<FONT color="#FF0000">は赤が最大で緑と青がない状態ですから赤色を表すことになります。

色記号の一覧

早速やってみましょう。

<HTML>
週間ファミコン通信90年2月2日号です。<BR>
<FONT color="#FF6666">ドラクエ4</FONT>の特集が載っています。<BR>
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

この方法では、色の微妙な変化を指定できますので、下のサンプルのようにグラデーション風にすることもできます。一文字づつ色の指定をしているだけですが結構見映えはいいと思います。かなり面倒ですが、画像でグラデーションを使うよりファイル容量が少なくて済むので、軽いページに仕上がります。

週間ファミコン通信90年2月2日号です

このサンブルのタグを見る

上に戻る

文字の大きさ・・・全部の文字サイズをまとめて変える

一箇所づつ文字サイズを変更するのが面倒なこともあります。そんなときは全部の文字サイズを一気に変更し、特定の部分だけ修正するという使い方があります。
<BASEFONT size="文字サイズ">というタグを最初に書いておくと、すべての文字がこのサイズになります。このタグは単独で使用しますので閉じるタグは必要ありません。
<FONT size="±数字">～</FONT>というタグを変えたい部分に使い数字でサイズを増減します。

全体の大きさをサイズ「2」にし、「非常にきれい」の部分をサイズ「4」にしてみます。

<HTML>
<BASEFONT size="2">
週間ファミコン通信90年2月2日号です。<BR>
ドラクエ4の特集が載っています。<BR>
汚れ、破れ、書き込み等なく<FONT size="+2">非常にきれい</FONT>です。
</FONT>
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

上に戻る

書体の指定

書体をいろいろ代えることができます。しかしみんなが持っている書体でないと意味がありませんので、使い方には注意が必要です。
<font face="書体の名前">～</FONT>という使い方をします。
下のサンプルでは「HGS行書体」を使いました。この書体がパソコンに入っていないと、パソコンが似た書体と判断したものを表示します。これが曲者ですが・・・
書体の指定は、全角・半角・大文字・小文字・スペースの有無全て厳格に区別します。少しでも違っていると正しく表示されません。また「ＭＳＰゴシック」のようにスペースを含んだフォントはダブルコーテーションマーク「"」で括ります。
すでにダブルコーテーションマーク「"」が使われている時は、シングルコーテーションマーク「'」を使います。
シングルコーテーションマーク「'」は「shiftキー」を押しながら、数字「7」をクリックするとでてきます。

<HTML>
<font face="HGS行書体">週間ファミコン通信90年2月2日号です。<BR>
ドラクエ4の特集が載っています。 <BR>
汚れ、破れ、書き込み等なく非常にきれいです。
</FONT>
</HTML>

週間ファミコン通信90年2月2日号です。
ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

上に戻る

空白を入れる

文章の途中に空白を入れたいとき、半角スペースはいくつ入れても、IEで表示すると一つ分しか入っていません。
対応方法は二つあります。
その1　全角スペースを使います。全角スペースは入れた分だけ空白として、表示されます。
その2　特殊文字を使います。　半角スペースを表す特殊文字は、「 」 (最後についているのはセミコロン)です。これを使うと入れた分だけ半角の空白ができます。

上に戻る

特殊文字を使う

タグで使う記号を表示したいときは、特殊文字を使わないと表示できません。「>」の記号を使いたいときに、Notepadで「>」を入れてもタグの一部とみなされ、全体の表示がおかしくなるだけです。Notepadに「>」と入れるとIEでは>が表示されます。トランプのマークなども特殊文字で表すことができます。文字化けする心配はありません

<	<	♥	&hearts;
>	>	♠	&spades;
半角スペース		♦	&diams;
"	"	♣	&clubs;

上に戻る

箇条書き

目次のところで箇条書きを使っています。<UL>～</UL>というタグと<LI>(エル・アイ)というタグを使います。 <LI>は単独で使い</LI>は不要です。<UL>タグでは丸印のついた箇条書きになりますが<UL>の代わりに<OL>を使うと数字の箇条書きになります。
使い方は、箇条書きにしたい文章の最初と最後に<UL></UL> を追加します。
次に箇条書きにしたい文章一つ一つの頭に<LI>を追加していきます。
箇条書きの中に更に箇条書きを入れたい時は、その部分を<UL></UL> ではさんでやります。
<LI>は何もしなくても頭のマークは自動的に黒丸から白丸に変化します。改行の<BR>等も必要ありません。
箇条書きのタグを最初から順番に書いていこうとすると混乱しますから、まず実際に文章をNotepad等に箇条書きで書き、そこにタグを追加していきます。

<UL>
<LI>エディター、ブラウザーを使いやすく
<LI>タグの追加
<UL>
<LI>色の指定
<LI>文字サイズをまとめて変える
<LI>書体の指定
<LI>空白を入れる
<LI>特殊文字
<LI>罫線のいろいろな使い方
</UL>
<LI>文字の位置指定
<LI>文章を読み易く
<UL>
<LI>行間の指定
<LI>幅の指定
</UL>
<LI>人のタグを参考にする
</UL>

エディター、ブラウザーを使いやすく
タグの追加
- 色の指定
- 文字サイズをまとめて変える
- 書体の指定
- 空白を入れる
- 特殊文字
- 罫線のいろいろな使い方
文字の位置指定
文章を読み易く
- 行間の指定
- 幅の指定
人のタグを参考にする

上に戻る

罫線のいろいろな使い方

罫線は高さ、幅、位置、色等を変えるえることができます。

罫線の太さを変える

罫線の幅を変える

罫線の位置を変える

罫線の色を変える

特殊な罫線

テーブルと組み合わせると、面白い罫線ができます

テーブルの枠を表示すると、どうなっているかよくわかると思います。

<TABLE width="640">でテーブルの幅を決め、<TD><HR width="50" size="3"></TD>とセルの中に罫線を入れたタグを作ります。これを好きなだけ繰り返します。
<TABLE width="640"><TR>
<TD><HR width="50" size="3"></TD><TD><HR width="50" size="3"></TD>
<TD><HR width="50" size="3"></TD><TD><HR width="50" size="3"></TD>
<TD><HR width="50" size="3"></TD><TD><HR width="50" size="3"></TD>
<TD><HR width="50" size="3"></TD><TD><HR width="50" size="3"></TD>
<TD><HR width="50" size="3"></TD></TR></TABLE>

こんな罫線もできます。

テーブルの枠を表示するとこうなっています。

基本的には上と同じですが
<TD><HR width="50" size="3"></TD>の部分を
<TD><HR width="50" size="3"></TD><TD><HR width="5" size="3"></TD>の繰り返しにしています。
セルの幅指定をしないと、セルの幅は中身のサイズに応じて伸び縮みしますから、それを利用しています。

上に戻る

文字の位置 ▲

文字の位置を右寄せ・センター寄せ・左寄せの指定ができます。
位置を変えたい部分を<DIV align="center">～</DIV>あるいは<P align="center">～</P>ではさみます。center と入れると中央、right と入れると右、left と入れれば左に寄ります。<DIV align="center">と<P align="center">の違いは下のとおりです。

<HTML>
<DIV align="center">週間ファミコン通信90年2月2日号です。</DIV>
ドラクエ4の特集が載っています。<BR>
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。

ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

<P align="center">では空行が入ります。

<HTML>
<P align="center">週間ファミコン通信90年2月2日号です。</P>
ドラクエ4の特集が載っています。<BR>
汚れ、破れ、書き込み等なく非常にきれいです。
</HTML>

週間ファミコン通信90年2月2日号です。

ドラクエ4の特集が載っています。
汚れ、破れ、書き込み等なく非常にきれいです。

センター寄せだけであれば<CENTER>～</CENTER>というタグもあります。センターに寄せたい文字をこれではさむだけです。

上に戻る

書いた文章を読みやすく ▲

文字ばかりのホームページが読みやすくなるように、行間を空けたり、全体の幅を規制したりします。

行間を空ける

<head>と</head>の間に下に書いたタグを入れます。

このように書くと<BODY>と </BODY>の間に書かれた文字すべてがサイズ１１ポイント、色はグレー、行の高さが文字の１.３倍になります。今表示されているのがその状態です。この指示は、テーブルの中には適用されませんから、テーブルの中にも適用したいときは、BODY{font-size:11pt; color:"#333333"; line-height:130%}の下に　
TD{font-size:11pt; color:"#333333"; line-height:130%} を追加します。<TD>と</TD>ではさまれた部分がここで指示したとおりになります。
適用したいタグを頭に書き、内容を{ }の中に書きます。
DIV{font-size:14pt; color:"#FF3333"; line-height:130%} と書いておくと、文中の<DIV>～</DIV>ではさんだ部分だけがピンク色の少し大きめの文字になります。そのほかにも
A{font-size:14pt; color:"#FF3333"; line-height:130%} とか
P{font-size:14pt; color:"#FF3333"; line-height:130%} とかも使えます。Aはリンクを表す<A>タグ、Pは段落を作る<P>タグです。 <head>と</head>の間にこのような記述をし、要所、要所を<DIV>～</DIV>とか<P></P> タグで囲んでいけば、すべての文字のサイズ・色・行間・太さ・バックの色等々を、ここでコントロールできることになります。見映えをよくするための修正作業が非常に楽になります。

上に戻る

全体の幅を規制する

横に長く広がった文章は読みづらく感じます。テーブルを使わなくても全体の幅を規制することができます。
<DIV style="width:640px">～</DIV>を使います。これで囲んだ範囲が640ピクセルになります。
ページ全体の幅を規制したいときは<BODY>のすぐ後に入れます。

<HTML><HEAD><TITLE>タイトル文</TITLE></HEAD>
<BODY><DIV style="width:640px">本文</DIV></BODY></HTML>

のように入れます。

上に戻る

文字にマーキングをつける

<SPAN STYLE="background:背景色; color:文字の色;">～</SPAN>のように入れます。
<SPAN STYLE="background:#FFAAAA; color:#000000;">マーキング効果</SPAN>と入れるとこのような表示になりマーキング効果、
<SPAN STYLE="background:#FF0000; color:#FFFFFF; font-weight:bold; font-size:11pt;">マーキング効果</SPAN>と書くとマーキング効果このような表示になります。
(backgroundの後ろについているのは「コロン」、色指示の後ろについているのは「セミコロン」です。以下同様)

人のタグを参考にする ▲

　　　　　　　　　　　
IEでホームページを見ているときに、「こういうホームページ作りたい」と思うものがあったら「メニュー」の「表示」「ソース」とクリックすれば、そのホームページがHTML文で画面表示されます。面白そうなホームページがあったらこの方法でそのタグを調べ、参考にすることができます。

上に戻る

全体の目次