初心者のためのHTML入門2 ~ 見やすい書き方でどんどん書いてみよう

Design HTML Web Design Template Concept

どの言語でもいえることだと思いますが、HTMLも、「 習うより慣れろ 」ということで、どんどん書いてみましょう。
ここでは、文章や文字を見やすく表示していくためのHTML要素を紹介します。

目次

1.見出しをつけよう
 1.1 見出しを指定する要素
 1.2 重要度
 1.3 SEOとの関係
2.改行しよう
 2.1 HTMLの改行
 2.2 改行タグ
 2.3 気を付けること
3.段落を作ろう
 3.1 HTMLの段落
 3.2 CSSの指定
4.特定の範囲指定をしよう
 4.1 ブロックレベル要素
 4.2 インライン要素
 4.3 CSSの指定

1.見出しをつけよう

1.1 見出しを指定する要素

HTMLでは、<h1></h1> ~ <h6></h6> のタグを使って見出しを書きます。
このタグの「 h 」は「 heading 」( 見出し )の略です。
このタグで文字を囲み、見出しとして指定します。
下のように、<h1> から <h6> まで指定してみましょう。
colmun_image923_01
このファイルを保存して、ブラウザで表示を確認すると…
colmun_image923_02
<h1> から <h6> で囲んだ文字は、それぞれ太字になりました。
文字の大きさは、<h1> が1番大きく、そこから <h6> まで段階的に小さくなっています。
そして、何も指定していない文字は、太さが標準で、だいたい <h4> と同じくらいの大きさです。

▲目次へ戻る

1.2 重要度

さきほど、<h1> から <h6> の見出し要素は、文字の太さや大きさを指定していることがわかりましたが、さらに「 重要度 」を表しているともいえます。
太くて大きい見出しほど、重要に見えますし、後ほど紹介するSEOともつながります。
ちなみに、音声ブラウザでは、<h1> から <h6> まで段階的に、特定の音を付けてゆっくり読み上げるなど、見出しを音で表現して重要度を表しています。

▲目次へ戻る

1.3 SEOとの関係

■SEOとは
SEOとは、「 Search Engine Optimization 」の略で、「 検索エンジン最適化 」という意味です。
GoogleやYahooなどの検索エンジン( 検索サイト )で、特定のキーワードで検索した場合に、検索結果として上位に表示されるための工夫をSEOとよんでいます。
colmun_image923_03

■見出しとSEO
GoogleやYahooなどの検索エンジン( 検索サイト )は、検索キーワードに基づいてそれぞれ独自の方法で情報収集を行い、検索結果を表示します。
この情報収集の過程で、各検索エンジンが手がかりとしているものの一つが見出し要素と考えられています。
とすると、ここにサイトのキーワードとなるような重要な文字を入れておくと、SEOとしても機能することになります。
そしてここでも、<h1> から <h6> へと情報収集される時の重要度が低くなっていきます。
そこで、HTML文書内では、上から下へ順番に <h1> から <h6> と配置したほうがSEO的に良いとされています。
見出し要素を、文字の大きさだけでとらえず、SEOの機能も持つことを覚えておきましょう。
ちなみに、タイトル要素( <title> </title> )は、見出し要素より高いSEO機能を持っていると考えられています。

▲目次へ戻る

2.改行しよう

2.1 HTMLの改行

先ほど、見出し要素の表示確認をした時には、<h1> から <h6> で囲まれた文字はそれぞれ改行されて表示されました。
colmun_image923_01
colmun_image923_04
これは、見出し要素自体に、自動改行を行うという機能があるからです。
上のHTML文書から見出しタグを消してブラウザの表示を確認してみましょう。
colmun_image923_05
colmun_image923_06
このように、HTML文書内で改行して書かれた文字でも、ブラウザ上では改行なしで表示されてしまいます。
そこで、HTML文書をブラウザ上で改行して表示させるためには、改行タグというものを使って改行を指示する必要があります。

▲目次へ戻る

2.2 改行タグ

改行タグは <br>と書きます。
次のように改行タグを書いてブラウザ上で表示を確認してみましょう。
colmun_image923_07
colmun_image923_08
改行タグ( <br> )を入れたところで改行されて表示されました。
このように、HTML文書をブラウザ上で改行して表示したい場合は、この <br> を書きます。

▲目次へ戻る

2.3 気を付けること

改行タグ( <br> )は、改行の目的以外のことで使わないようにしましょう。
改行タグで改行させて段落を作ったり、1行ずつ改行してテキストで表を作ったりすると、後々不具合が生じる原因になります。
段落やブロックにまとめたり、表を作ったりする要素は個別に用意されているので( <p>、<div>、<table> など )、そちらを使うようにします。

▲目次へ戻る

3.段落を作ろう

3.1 HTMLの段落

段落は、段落タグ( <p> )を使って作ります。
タグ要素の「 p 」は、「 paragraph(段落) 」の略です。
このタグで囲まれた文字を段落として指定します。
段落らしく少し長い文章を書いて、段落にしたいところを <p> </p> で囲んでみます。
colmun_image923_09
これを保存してブラウザで表示してみましょう。
colmun_image923_10
上のように、段落タグ( <p> )で囲んだ部分が段落になっています。

▲目次へ戻る

3.2 CSSの指定

■段落の幅
さきほど、段落を作ったhtml文書を、ブラウザのウィンドウの幅を変えて見てみると、ウィンドウの幅に合わせて段落の幅も変わってしまいます。
colmun_image923_11
文字が左端から右端までいっぱいに書かれていると、なんだか窮屈な感じですね。
そこで、段落の幅を固定する方法を考えてみましょう。
これは、HTMLの要素ではなく、スタイルシートというものを使って実現します。

■スタイルシートとは
スタイルシートとは、レイアウトの指定を、表示させたい文字や文章とは別の場所に定義しておいて、必要に応じてそれを適用していくという考え方です。
いったん定義したスタイルシートは、複数の文書で共有できるため、全体のデザインに一貫性を持たせることができたり、レイアウトを変更する時などのメンテナンスが容易になったり、というメリットがあります。
HTMLでのスタイルシートの種類は1つではありませんが、一般的にブラウザに用意されているのは CSS( Cascading Style Sheet )とよばれるものです。
CSSは、複数の場所で設定した定義を混合して利用( cascade )できるという特徴を持っています。

■段落にCSSを指定
CSSの指定は、下のように書きます。
<head> </head> の中に、<style> </style> を書いて、その中にスタイル情報を書きこみます。
colmun_image923_12
ブラウザで表示しを確認してみましょう。
colmun_image923_13
段落( p要素 )は、幅500ピクセル( px )に固定されています。
また、ついでに文字の色も指定したので(「#00F」は青のカラーコードです)、文字が青になっています。

<style>
p {
color: #00F;
width: 500px;
}
</style>

まず、<style> </style> タグで囲みます。
そうすると、その部分はスタイルシートだと指定できます。
その中に p要素の指定として、 { } の中に中身を書きます。
ここで指定したCSSの内容は2つ、「 color 」と「 width 」です。
「 color 」は文字の色を意味します。ここでは、カラーコード「 #00F 」の青を指定しています。
「 width 」は幅を意味します。ここでは、500ピクセルを指定しています。

※ここでは、簡単にCSSを説明したかったので、HTML文書内の <head> </head> の中にCSSを書く方法を紹介しましたが、 CSSはHTML文書内ではなく「独立したCSSファイル」を作ってその中に記載して、HTML文書内でそのファイルを読み込むという方法が標準です。

▲目次へ戻る

4.特定の範囲指定をしよう

4.1 ブロックレベル要素

ブロックレベル要素とは、その名のとおり「 ブロック 」になる要素です。
これまでに出てきた <h1> ~ <h6> や <p> もブロックレベル要素です。
自然に前後が改行されて、ブロックになります。
そのほか、ブロックレベル要素は、<address> <blockquote> <dl> <fieldset> <form> <ol pre> <table> <ul> などがあります。
<div> もブロックレベル要素の一つです。
「 div 」は「 division( 分割、区別 ) 」の略です。
<div> 要素は、ブロックレベル要素であるということ以外は、特にHTML上の意味は持たず、他のHTML要素で指定することが出来ない範囲を指定する時などに使います。
例えば、画面全体をセンター合わせにする、メイン画面にドロップシャドウを付ける、など、デザイン面で使ったりします。

▲目次へ戻る

4.2 インライン要素

インライン要素は、文章の一部の範囲を指定します。
これまでに出てきた要素の中では、<br> がインライン要素です。
そのほかのインライン要素として、<a>、<abbr>、<iframe>、<img>、<input>、<label>、<strong> などがあります。
<span> もインライン要素の一つです。
「 span 」は、期間や範囲の意味です。
<span>要素も、インライン要素であるということ以外は、特にHTML上の意味は持たず、文中の特定の文字だけ色や書体を変えたい時などに使います。

▲目次へ戻る

4.3 CSSの指定

<div> 要素と <span> 要素を使って、CSSを指定してみましょう。
さきほどのファイルに、下のように <div> 要素と <span> 要素を書き加えます。
colmun_image923_14
<div> を <body> のすぐ後に、</div> を </body> の直前に入れているということは、div 要素が、body要素の中身全部を指定しているということです。
また、span要素は文章の一部だけを囲んでいます。
次に、CSSの指定をします。
下のように <div> 要素と <span> 要素に対するCSSの指定を書いてみます。
ついでに <h1> 要素にも色やフォントサイズの指定をしてみます。
colmun_image923_15
ブラウザで表示を確認してみましょう。
colmun_image923_16
これまで左寄せだった文章が中央寄せになりました。
これは、div要素に指定した「 margin-right:auto; 」「 margin-left:auto; 」によります。
div要素の左右のマージンをオート( 自動 ) にすると、ブラウザは中央寄せだと理解します。
また、span要素に指定した「 color:#009900; 」は、文字色を「 #009900 」にするという意味で、「 #009900 」は緑のカラーコードです。
同じように、h1要素には、文字の色を「 #660000(赤茶色)」にして、サイズを30ピクセルにするよう指定しています。

▲目次へ戻る