ホームページ作成で便利なHTMLタグ8選!【これだけでOK】

スポンサーリンク
ホームページ:htmlHP作成

ホームページを作るにはhtmlのタグを覚えなきゃいけないんでしょ?私、覚えられないわ・・・どうしよう・・・・諦めていい?

こんなお悩みに添いたいと思います。

正直言って、タグは覚えなくてもホームページはできます。20年前だったら覚えた方が良かったでしょうが、今は知識がなくても簡単にホームページは持てますよ。

でも、覚えた方が時間短縮になるし、誰かに頼まなくてもいいし、理想的なホームページになります。今回の記事は最低限の知っていて損しない、「こんなのあったな」だけでも十分役に立つタグです。

基礎過ぎると思う方は読まなくても大丈夫です。

htmlのタグって何?

うさぎ:htmlって何

HTMLは文字に色をつけたり、文字を大きくしたり、文章を見やすくするために考えられた方法です。HTMLは「Hyper Text Markup Language」の略です。

例えば、勉強ノートをつけるときを想像してください。重要なところには文字に色をつけたり、大きくしたりします。また何かテーマがあるときはタイトルが分かるように書きますよね?そういったことを指示する言語がhtmlです。

タグは<>で囲まれた印になります。その<>内の言語に従って文字がどういうものかコンピューターに意味を与えます。

格好いいサイトがあったらページ上で右クリックすると「ソースを表示」でタグを見ることができますよ。また「F12」のボタンを押しても出てきます。

とりあえずページを作ってみよう!

はい、まずは挑戦してみましょう。

Windowsパソコンの付属ソフトの「メモ帳」(テキストエディタ)を開きましょう。半角で下の文字を入力してください。

<html>
<head></head>
<body text="#ffffff" bgcolor="#00ffff">
今日も幸せでした!
</body>
</html>

入力しましたか?そうしたら「test.html」とファイル名をつけて保存してください。

次にファイルを開いてみてください。開けましたか?どうですか?こんな感じでホームページが成り立っています。

私は文字化けしました。これは上記のタグでは不十分だから文字化けが起こりました。
でも、こんな感じでホームページは成り立ってきます。

タグのルール

タグの効果が発揮できるにはルールがいくつかあります。<> </>のセットで使うことさえ守れば後は適当でも大丈夫です。

  1. <> </>のセットで使う
  2. 小文字、大文字どちらでもOK(小文字をおすすめ)
  3. ブラウザによって見え方が違う場合がある
  4. 文章の塊、または文字(センテンス)の2種類のタグがある
  5. タグが重なっても効果が発揮できる

よく使うタグ

うさぎ:おすすめタグ

私がよく使うタグの紹介です。

<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"

&nbsp;

これはタグではないですが、スペースです。「 」をキーボードのスペースで入力してもいいのですが、上手くいかないときにこの言語を使っています。これは<>で囲む必要はありません。

<!–メモ–>

<!– と–>で囲まれた部分はブラウザの画面上には表示されません。必要無いタグを削除したらいいのだけど、また使いたいときや、数名でホームページを管理運営しているときにメモ書きとして便利です。

めんどくさい人は外注しよう

うさぎ:外注しよう

めんどくさい人にはいっそのことホームページや記事を外注してはどうでしょか?

私が奉職する神社のホームページの一番最初は外注しました。その頃は外祭が多かったので、外祭の予約システムとホームページが連動しているサイトでしたよ。しかも、先代の外祭吉日暦もあり、工務店からは便利だと好評でした。

ロリポップ!

ロリポップ!ホーム画面

ロリポップ!

レンタルサーバーサービスですが、ホームページ代行サービスがあります。金額をみたところ相場ですので、よその神社さんと差をつけたい方にはむいています。

グーペ

グーペホーム画面

グーペ

グーペがおしゃれなテンプレートから選ぶだけでホームページがもてます。自分で作るにはめんどくさいお問い合わせフォームや予約機能、お知らせなどもあります。

ホームページの制作依頼もできますよ。

ペライチ

ペライチホーム画面

ペライチ

ペライチ紹介動画

今まで見た中で一番簡単にホームページをつくれます。1~3枚くらいのホームページでいいと思う方に向いています。

ホームページ制作代行サービスがありますよ。

ココナラ

ココナラトップ画像

ココナラ

プロからアマまでスキルを持った人がサービスを提供しています。パーツや記事代行まで幅広く探すことができます。サービスを組み合わせればホームページ制作会社に頼むよりもお得にできますよ。

その他

タグなんて関係なく更新できるのがブログです。手軽に安く始められます。ホームページと併せて運用もおすすめです。

【Seesaaブログ】
2ちゃんねるまとめができます。これは神社ブログには関係ないけども、神社を気軽にアピールしたい人、神社や神道のイメージを変えたい人に向いているサービスです。

アメーバブログ
アメーバブログを個人でずっと利用してきて、使いやすかったので仕事用にも使っています。アメブロでは読者とコミュニケーションが取りやすい雰囲気があります。絵文字は可愛いのでオススメですよ。

無料ブログサービスでは広告が入ります。広告が神社のイメージに合わない場合があるので、有料プランにして広告を消して運用してもいいですね。

はてなぶろぐPro
はてなブログの有料版です。無料もあります。はてなブログの特徴はなんと言っても簡単にブログを始められるところです。アメブロよりももっとシンプルなブログに、アレンジして理想のブログにしたい人まで幅広く対応しています。また読者同士の交流があるので運営していて相手の顔が見えるのは楽しいです。

HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました