さいごうの技術メモ集

HTML入門

HTMLとは

Webページを構成するための言語です。

「ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language」の略で、専用の文字列を用いて、文章の構成や文章の役割を示し、Web上で表示させます。

基本的にWeb上で表示されるページを構成するのは「HTML」と「CSS」です。

CSSとは

CSSとは、HTMLで構成した基本的な要素に対して、装飾を施すものです。

文字の色や大きさ、画像のサイズやそれぞれのコンテンツの幅など、細かな指示を行います。

Webページの背景に画像を差し込みたい時なども、CSSで対応が可能です。

JavaScriptとは

躍動感のあるページにしたい時は、JavaScriptを活用します。

JavaScriptとは、他に変更したり、拡大表示や動かしたりできるプログラミング言語です。注目を集めたい部分や、特に閲覧者の注目を引きたい部分への使用がおすすめです。

JavaScriptはHTML上に書きます。書く時は以下のよう記述します。

<script>
  document.write("Hello");
</script>

詳細は省きますが、上記を記述すると、ブラウザ上で「Hello」と表示されます

HTMLをブラウザで表示させる

それでは、実際にHTMLファイルを作成してブラウザで表示させてみようと思います。

1. テキストエディタでコードを書く

まずは、下記の通りに記述してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>Hello</title>
</head>
<body>
  <h1>見出し1</h1>
  <p> 表示したい文章</p>
</body>
</html>

2. 「.html」という拡張子で保存する

記述が終わったら、名前を付けて保存します。ドキュメントフォルダなどに保存してください。

ここではtest.htmlとします。

3. 保存したファイルをダブルクリックする

保存したtest.htmlをダブルクリックして下さい。

すると、設定しているブラウザでtest.htmlが開くと思います。

このように表示されれば問題ないです。

マスターすべきHTMLタグ

HTMLを記述するためには、複数のタグを使いこなさなくてはいけません。

まずはタグとはなんなのかマスターすべき基本的なタグを解説していきます。

HTMLタグとは？

HTMLタグとは、マークのことです。ブラウザはこのマークに従って、要素を表示します。

HTMLを記述するためには、見出しとして表示して欲しい・テキストとして表示して欲しい・画像を表示して欲しいなど、要素に沿ってそれぞれ指示出しが必要です。

ブラウザへ正確に指示出しするためには、適切なタグ使用が必須となるので覚えておきましょう。

HTMLタグの基本ルール

HTMLの基本的なルールは２つです。

要素をタグで挟む

まず１つ目のルールは、表示したい要素をタグで挟むことです。

<p>表示したい文章はここに記述しましょう</p>

要素の終わりには、頭に「/」を付けたタグを記述することで、ブラウザは「指示の終了」を認識します。

上記のHTMLで、「表示したい文章はここに記述しましょう」だけを文章として表示すればいい、とブラウザは判断するのです。

タグの中にタグを書く

タグは、タグの間に挟むように記述します。表示したい部分はここからここまで、とブラウザに指示を出したい場合はまず<body>タグで囲みます。

そして、その表示したい部分のエリアに、さらに表示したいコンテンツを入れ込んでいくのです。

<body>
	<p>表示したい文章はここに記述しましょう</p>
</body>

上記のHTMLで、ブラウザ上で表示したい部分は「body」タグの中にある部分で、「表示したい文章はここに記述しましょう」だけを文章に表示すればいい、とブラウザに指示ができます。

マスターすべきHTMLの基本構造

HTMLのルールは難しくありません。まずは基本的な構造を理解していきましょう。

HTMLファイルであることを宣言する

まず、HTMLファイルを書き始める前に、必ず<!DOCTYPE html>と記述しましょう。

<!DOCTYPE html>は、ブラウザにこのデータは「HTML」ですよと宣言するもので、HTMLそのものではありません。

従って最後の/がついた終了タグは必要ありません。

htmlタグで構成要素全体をはさむ

ここからここまでHTMLですよ、とブラウザに指示するためにhtmlタグで構成要素全体を挟みましょう。

HTMLタグの外に記述すると、HTMLとしてブラウザが認識できなくなるため注意が必要です。

headタグにwebページのタイトルなどを書く

Webページのタイトルは<head>タグで挟みましょう。headタグで挟んだ部分は、ブラウザ上に表示されません。

ブラウザのタブに表示されたり、検索エンジンがなんのコンテンツのWebページであるか判断するために必要です。

<head>
  <title>HTMLの練習</title>
</head>

ブラウザに表示させたい要素をbodyに書く

ブラウザで表示させたい要素をbodyタブの中に記述していきましょう。

下のhtmlであれば、「「HTMLの練習」 大見出し」と「表示したい文章はここに記述しましょう」の部分のみがブラウザ上に表示されます。

<html>
<head>
  <title>HTMLの練習</title>
</head>
<body>
  <h1>「HTMLの練習」 大見出し</h1>
  <p>表示したい文章はここに記述しましょう</p>
</body>
</html>

マスターすべきHTMLタグ

基本構造をマスターした後は、細かに指示を出していくタグを覚えましょう。

段落：Pタグ

pタグは、段落を指定するためのタグです。「p」は「paragrah」の頭文字から来ています。

pタグはすでにサンプルで登場しているので例は省きます。

見出し：hタグ

hタグは、要素の見出しを表示させるタグです。hタグには「h1」〜「h6」まであり、数字が小さくなるほど文字の大きさも小さくなります。

ブラウザによりその割合は異なるので、細かく指定したい場合は、HTMLやCSSで文字サイズを指定するようにしましょう。

また、ブラウザの文字を大きくしたい・小さくしたいという理由でhタグを利用するのは絶対にやめてください。検索エンジンは、hタグを適切に使用しているか判断します。

文字サイズの変更はかならずHTMLやCSSで行いましょう。

画像：imgタグ

画像を表示する時は、imgタグを使用します。imgタグは、画像を表示するという指示なので特に終了タグは必要ありません。

リンク：aタグ

リンクを貼りたい場合は、aタグを使用します。

<a href="URLを記載する">リンクを表示する</a>

href=””と表示することで、どのURL先に飛ぶのか指示できます。aタグで挟んだ文字がブラウザに表示され、その文字にリンクが貼られます。

aタグで挟むのは、URLそのものでも、何かの文字列にリンクを貼っても問題ありません。ここにimgタグを入れれば、画像にリンクを貼れます。

リスト(羅列)：olタグ/ulタグ

要素の羅列するときには、olタグやulタグを使用します。olタグは、「ordered list」の略です。

<ol>
    <li>順序①</li>
    <li>順序②</li>
    <li>順序③</li>
</ol>

上記のように記述すると、

1.順序①
2.順序②
3.順序③

と表示されます。

ブロック：divタグ

divタグは、囲った部分をブロックレベル要素としてグループ化できるタグです。

pタグの文章や、画像、リストなどの要素を一つの箱に入れてかたまりにすることで、CSSなどで一気に指示出しできます。

部分的に指示する：spanタグ

文章の一部を太くしたい、赤文字にしたいなどの時に使用するタグです。

<p>表示したい文章は<span style="font-weight:bold">ここ</span>に記述しましょう。</>

上記のように記述すると、「ここ」のみ太字になります。

改行：brタグ

改行したいときは<br>タグを使用しましょう。

brは改行したい個所にのみ必要で、終了タグは必要ありません。

自分用のメモ書き：コメントアウト

HTMLの中にメモ書きを残しておきたいときはありませんか？「後から編集したい」「注意書きを残しときたい」などの時は、コメントアウトを利用しましょう。

コメントアウトとは、ブラウザ上で表示されないコードです。「<!—」と「—>」で挟んでいる本文などは、ブラウザ上で表示されません。

<p>
	表示したい文章はここに書きましょう
	<!-- ここからコメントアウト部分 -->
</p>

上記のHTMLの場合、「表示したい文章はここに記述しましょう」のみブラウザ上で表示され、ここからコメントアウト部分は表示されません。

特に長いコードを書くときや、複数人でHTMLコードを編集するときにコメントアウトを活用すると、情報の整理に役立つでしょう。

htmlタグには個別に名前を付けて指示が出せる

htmlには、個別に名前を付けてそれぞれに指示を出せます。個別に名前を付ける方法は「id」と「class」の２つです。それぞれ見ていきましょう。

html内に１つだけ付けられる「id」

idはhtml内に１つだけ付けられます。

<p id="example">表示したい文章1</p>
<p>表示したい文章2</p>

上記のようなHTMLの場合、pタグに対してCSSを記述した場合、HTML内のすべてのpタグにかかる文章に適用されます。

しかし、exampleに対してCSSを記述した場合、表示したい文章1にのみ指示が適用されるのです。

何度でも同じ名前が付けられる「class」

「id」がHTML内で1回しか使用できないのに対して、「class」は何度でも使用可能です。

<p class="example">表示したい文章1</p>
<p>表示したい文章2</p>
<p class="example">表示したい文章3</p>

上記のようなHTMLで、classに対してCSSを記述した場合、「表示したい文章1」と「表示したい文章3」にのみ指示が適用されます。

HTMLの中の要素の中で、複数個所の要素にスタイルを合わせたい場合に活用しましょう。

saigo

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です