どの言語でもいえることだと思いますが、HTMLも、「 習うより慣れろ 」ということで、どんどん書いてみましょう。
ここでは、文章や文字を見やすく表示していくためのHTML要素を紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
HTMLでは、<h1></h1> ～ <h6></h6> のタグを使って見出しを書きます。
このタグの「 h 」は「 heading 」（ 見出し ）の略です。
このタグで文字を囲み、見出しとして指定します。
下のように、<h1> から <h6> まで指定してみましょう。
このファイルを保存して、ブラウザで表示を確認すると…
<h1> から <h6> で囲んだ文字は、それぞれ太字になりました。
文字の大きさは、<h1> が1番大きく、そこから <h6> まで段階的に小さくなっています。
そして、何も指定していない文字は、太さが標準で、だいたい <h4> と同じくらいの大きさです。
さきほど、<h1> から <h6> の見出し要素は、文字の太さや大きさを指定していることがわかりましたが、さらに「 重要度 」を表しているともいえます。
太くて大きい見出しほど、重要に見えますし、後ほど紹介するSEOともつながります。
音声ブラウザでは、<h1> から <h6> まで段階的に、特定の音を付けてゆっくり読み上げるなど、見出しを音で表現して重要度を表しています。
■SEOとは
SEOとは、「 Search Engine Optimization 」の略で、「 検索エンジン最適化 」という意味です。
GoogleやYahooなどの検索エンジン（ 検索サイト ）で、特定のキーワードで検索した場合に、検索結果として上位に表示されるための工夫をSEOとよんでいます。
■見出しとSEO
GoogleやYahooなどの検索エンジン（ 検索サイト ）は、検索キーワードに基づいてそれぞれ独自の方法で情報収集を行い、検索結果を表示します。
この情報収集の過程で、各検索エンジンが手がかりとしているものの一つが見出し要素と考えられています。
とすると、ここにサイトのキーワードとなるような重要な文字を入れておくと、SEOとしても機能することになります。
そしてここでも、<h1> から <h6> へと情報収集される時の重要度が低くなっていきます。
そこで、HTML文書内では、上から下へ順番に <h1> から <h6> と配置したほうがSEO的に良いとされています。
見出し要素を、文字の大きさだけでとらえず、SEOの機能も持つことを覚えておきましょう。
ちなみに、タイトル要素（ <title> </title> ）は、見出し要素より高いSEO機能を持っていると考えられています。
先ほど、見出し要素の表示確認をした時には、<h1> から <h6> で囲まれた文字はそれぞれ改行されて表示されました。
これは、見出し要素自体に、自動改行を行うという機能があるからです。
上のHTML文書から見出しタグを消してブラウザの表示を確認してみましょう。
このように、HTML文書内で改行して書かれた文字でも、ブラウザ上では改行なしで表示されてしまいます。
そこで、HTML文書をブラウザ上で改行して表示させるためには、改行タグというものを使って改行を指示する必要があります。
改行タグは <br>と書きます。
次のように改行タグを書いてブラウザ上で表示を確認してみましょう。
改行タグ（ <br> ）を入れたところで改行されて表示されました。
このように、HTML文書をブラウザ上で改行して表示したい場合は、この <br> を書きます。
改行タグ（ <br> ）は、改行の目的以外のことで使わないようにしましょう。
改行タグで改行させて段落を作ったり、1行ずつ改行してテキストで表を作ったりすると、後々不具合が生じる原因になります。
段落やブロックにまとめたり、表を作ったりする要素は個別に用意されているので（ <p>、<div>、<table> など ）、そちらを使うようにします。
段落は、段落タグ（ <p> ）を使って作ります。
タグ要素の「 p 」は、「 paragraph（段落） 」の略です。
このタグで囲まれた文字を段落として指定します。
段落らしく少し長い文章を書いて、段落にしたいところを <p> </p> で囲んでみます。
これを保存してブラウザで表示してみましょう。
上のように、段落タグ（ <p> ）で囲んだ部分が段落になっています。
■段落の幅
さきほど、段落を作ったhtml文書を、ブラウザのウィンドウの幅を変えて見てみると、ウィンドウの幅に合わせて段落の幅も変わってしまいます。
文字が左端から右端までいっぱいに書かれていると、なんだか窮屈な感じですね。
そこで、段落の幅を固定する方法を考えてみましょう。
これは、HTMLの要素ではなく、スタイルシートというものを使って実現します。
■スタイルシートとは
スタイルシートとは、レイアウトの指定を、表示させたい文字や文章とは別の場所に定義しておいて、必要に応じてそれを適用していくという考え方です。
いったん定義したスタイルシートは、複数の文書で共有できるため、全体のデザインに一貫性を持たせることができたり、レイアウトを変更する時などのメンテナンスが容易になったり、というメリットがあります。
HTMLでのスタイルシートの種類は１つではありませんが、一般的にブラウザに用意されているのは CSS（ Cascading Style Sheet ）とよばれるものです。
CSSは、複数の場所で設定した定義を混合して利用（ cascade ）できるという特徴を持っています。
■段落にＣＳＳを指定
CSSの指定は、下のように書きます。
<head> </head> の中に、<style> </style> を書いて、その中にスタイル情報を書きこみます。
ブラウザで表示しを確認してみましょう。
段落（ 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文書内でそのファイルを読み込むという方法が標準です。
ブロックレベル要素とは、その名のとおり「 ブロック 」になる要素です。
これまでに出てきた <h1> ～ <h6> や <p> もブロックレベル要素です。
自然に前後が改行されて、ブロックになります。
そのほか、ブロックレベル要素は、<address> <blockquote> <dl> <fieldset> <form> <ol pre> <table> <ul> などがあります。
<div> もブロックレベル要素の一つです。
「 div 」は「 division（ 分割、区別 ） 」の略です。
<div> 要素は、ブロックレベル要素であるということ以外は、特にHTML上の意味は持たず、他のHTML要素で指定することが出来ない範囲を指定する時などに使います。
例えば、画面全体をセンター合わせにする、メイン画面にドロップシャドウを付ける、など、デザイン面で使ったりします。
インライン要素は、文章の一部の範囲を指定します。
これまでに出てきた要素の中では、<br> がインライン要素です。
そのほかのインライン要素として、<a>、<abbr>、<iframe>、<img>、<input>、<label>、<strong> などがあります。
<span> もインライン要素の一つです。
「 span 」は、期間や範囲の意味です。
<span>要素も、インライン要素であるということ以外は、特にHTML上の意味は持たず、文中の特定の文字だけ色や書体を変えたい時などに使います。
<div> 要素と <span> 要素を使って、CSSを指定してみましょう。
さきほどのファイルに、下のように <div> 要素と <span> 要素を書き加えます。
<div> を <body> のすぐ後に、</div> を </body> の直前に入れているということは、div 要素が、body要素の中身全部を指定しているということです。
また、span要素は文章の一部だけを囲んでいます。
次に、CSSの指定をします。
下のように <div> 要素と <span> 要素に対するCSSの指定を書いてみます。
ついでに <h1> 要素にも色やフォントサイズの指定をしてみます。
ブラウザで表示を確認してみましょう。
これまで左寄せだった文章が中央寄せになりました。
これは、div要素に指定した「 margin-right:auto; 」「 margin-left:auto; 」によります。
div要素の左右のマージンをオート( 自動 ) にすると、ブラウザは中央寄せだと理解します。
また、span要素に指定した「 color:#009900; 」は、文字色を「 #009900 」にするという意味で、「 #009900 」は緑のカラーコードです。
同じように、h1要素には、文字の色を「 #660000（赤茶色）」にして、サイズを30ピクセルにするよう指定しています。
INTERNOUS,inc. All rights reserved.
