ホームページを作るにはhtmlのタグを覚えなきゃいけないんでしょ？私、覚えられないわ・・・どうしよう・・・・諦めていい？
こんなお悩みに添いたいと思います。
正直言って、タグは覚えなくてもホームページはできます。20年前だったら覚えた方が良かったでしょうが、今は知識がなくても簡単にホームページは持てますよ。
でも、覚えた方が時間短縮になるし、誰かに頼まなくてもいいし、理想的なホームページになります。今回の記事は最低限の知っていて損しない、「こんなのあったな」だけでも十分役に立つタグです。
基礎過ぎると思う方は読まなくても大丈夫です。
HTMLのタグって何？
HTMLは文字に色をつけたり、文字を大きくしたり、文章を見やすくするために考えられた方法です。HTMLは「Hyper Text Markup Language」の略です。
例えば、勉強ノートをつけるときを想像してください。重要なところには文字に色をつけたり、大きくしたりします。また何かテーマがあるときはタイトルが分かるように書きますよね？そういったことを指示する言語がHTMLです。
タグは<>で囲まれた印になります。その<>内の言語に従って文字がどういうものかコンピューターに意味を与えます。
格好いいサイトがあったらページ上で右クリックすると「ソースを表示」でタグを見ることができますよ。また「F12」のボタンを押しても出てきます。
とりあえずページを作ってみよう！
はい、まずは挑戦してみましょう。
Windowsパソコンの付属ソフトの「メモ帳」（テキストエディタ）を開きましょう。半角で下の文字を入力してください。
<html>
<head></head>
<body text="#ffffff" bgcolor="#00ffff">
今日も幸せでした！
</body>
</html>
入力しましたか？そうしたら「test.html」とファイル名をつけて保存してください。
次にファイルを開いてみてください。開けましたか？どうですか？こんな感じでホームページが成り立っています。
私は文字化けしました。これは上記のタグでは不十分だから文字化けが起こりました。
でも、こんな感じでホームページは成り立ってきます。
タグのルール
タグの効果が発揮できるにはルールがいくつかあります。<> </>のセットで使うことさえ守れば後は適当でも大丈夫です。
- <> </>のセットで使う
- 小文字、大文字どちらでもOK（小文字をおすすめ）
- ブラウザによって見え方が違う場合がある
- 文章の塊、または文字（センテンス）の2種類のタグがある
- タグが重なっても効果が発揮できる
よく使うタグ
私がよく使うタグの紹介です。
<br>
<br>は改行です。これはよく使いますし、よく使われます。テキストエディタやWordで「エンター」を打つと改行されます。それと同じ機能です。
このタグは文字や文章の最後に<br>とだけ入力します。
<div></div>と<p>
<div><p>は文章の塊（文章）を表します。二つの違いは<div>は塊を表すだけですが、<p>は前後に一行分スペースを空けます。
<div><p>は文章を真ん中寄せにしたい、右寄せにしたいときに使う事が多いです。Wordpressはタグを知らなくても作れる機能がありますが、文章を装飾したい時によく使っています。
align=”center(またはright, left)”
文章を揃えるときにタグの中に上記を書き込みます。これは見出し、画像や表、ラインにもつかえます。このalignなどタグの効果を詳しく設定するときにしようします。タグの効果の詳細を「属性」と呼びますよ。
上記のようにalignは前のタグだけに書き込めばOKです。タグの効果の詳細を指示するときは「”」「”」で囲みます。
<b></b>
<b></b>は文字を太くします。これた似たタグに<strong>があります。<strong>は強調する意味がありますが、現在はほぼ同じように使われています。
<hr>
<hr>はラインを表しています。テーマを変えたいとき、ページの装飾に使います。長さ、太さを指示することもできます。
<hr>の属性
size・・・ラインの太さでピクセルで指示します。
width・・・ラインの長さをピクセルかパーセントで指示します。
align・・・ラインの位置の指示です。center,right,left
noshade・・・・ラインを塗りつぶします。色はグレーです。
<font> </font>
<font>は文字を表していて、色やサイズ、書体を指示することができます。
色の指示するときや「ここを変えたい」というピンポイントの時に私はよく使っています。
WordPressでは<span>の方が<font>の役割をしています。
<a herf></a>
<a herf></a>はリンクを張るときに使用しています。ページ内またはサイト内ページや別のサイトにリンクを張るときに使用しています。
ページ内のリンクや別のページにあるコーナーへ飛ばしたいときが結構便利に使えます。
<a href=”ファイル名/＃位置名”></a>と<a name=”位置名”></a>
この記事の目次はこのタグを使っています。<a herf>の前のタグに＃を着け忘れないようしてくださいね。
<a href>の属性
targetを使うとリンク先のページを別のウィンドウ・タブに表示することができます。自分のサイトを表示させたままにしたいときは、targetを使うと便利です。
target="_blank"
これはタグではないですが、スペースです。「 」をキーボードのスペースで入力してもいいのですが、上手くいかないときにこの言語を使っています。これは<>で囲む必要はありません。
<!–メモ–>
<!– と–>で囲まれた部分はブラウザの画面上には表示されません。必要無いタグを削除したらいいのだけど、また使いたいときや、数名でホームページを管理運営しているときにメモ書きとして便利です。
めんどくさい人は外注しよう
めんどくさい人にはいっそのことホームページや記事を外注してはどうでしょか？
私が奉職する神社のホームページの一番最初は外注しました。その頃は外祭が多かったので、外祭の予約システムとホームページが連動しているサイトでしたよ。しかも、先代の外祭吉日暦もあり、工務店からは便利だと好評でした。
ココナラ
プロからアマまでスキルを持った人がサービスを提供しています。パーツや記事代行まで幅広く探すことができます。サービスを組み合わせればホームページ制作会社に頼むよりもお得にできますよ。