Passion drives any job 好きこそ仕事の上手なれ お仕事推しブログ

自社ホームページ用サンプルとHTMLの基本

2025/02/18
自社ホームページ用サンプルとHTMLの基本

　前記事では、自社ホームページ用URLの取得方法を紹介しました。 本記事では、ホームページ制作のイメージを掴んでいただけるよう、HTMLの基本を、サンプルを交えて解説します。
自社ホームページ用サンプルとHTMLの基本

好きこそ仕事の上手なれ 記事一覧



専門家への依頼かCMSの利用


　ホームページ制作は、基本的には、専門家に依頼するか、 CMSを利用して自作する方法になります。
　CMSはコンテンツ管理システムで、専門知識がなくてもホームページを制作できます。 代表的なものにWordPressがあります。 レンタルサーバーを借りているなら、そこで用意されている仕組みがあると思います。

解説の目的


　そのため HTML の専門知識は不要かもしれません。 しかし HTML の基礎を知ることで、ホームページ制作のイメージを掴むことができると思います。 また将来的に自作に挑戦したい方の参考にもなると思いますので、 本記事で解説していきます。
　なお HTML は「えいちてぃーえむえる」とアルファベットをそのまま読みます。

Webページの基本はhtmlファイル


　ホームページはWebブラウザーで閲覧するもので、Webページとも呼ばれます。 Webページは HTML という形式で書かれています。
　本記事のURLのように、末尾が .html となっている場合、それが html ファイルであることを表しています。 Webブラウザーはこのファイルを読み込み、Webページとして表示します。

ファイル指定が無いきには index.html が読まれる


　例えば当社ホームページのURL https://www.logic-lovers.com/ には html ファイル名がありません。 この場合は index.html が読まれるという決まりがあります。 つまり前記は https://www.logic-lovers.com/index.html と同じ意味になります。

index.htmlのサンプル


　ここで例えば、 BS202503.pdf および BS202603.pdf というファイル名で、決算公告に必要な各期のファイルが作られているとします。 その場合は index.html に以下を書いて、index.html と 各 .pdf ファイルを同じ場所にアップロードすれば、それらが閲覧できるようになります。
<!DOCTYPE html>
<head>
 <meta charset="UTF-8">
</head>
<body>
決算公告
<ul>
 <li><a href="BS202603.pdf">2026年3月期決算公告</a></li>
 <li><a href="BS202503.pdf">2025年3月期決算公告</a></li>
</ul>
</body>

　これをWebブラウザーで表示すると以下のようになります。 ※ここではリンクをクリックしても何も起きないように変更しています
決算公告

　もしかすると、シンプルすぎてがっかりされる方がいらっしゃるかもしれません。 これはシンプルさを最優先にしたサンプルコードですので、ご了承ください。 ここから HTML や CSS(カスケードスタイルシート・しーえすえす) を工夫すればもっと格好良くできますので、もし自作に挑戦する方はがんばってください！

日本語の文字コードは複数ある


　サンプルコードに記載されている UTF-8 について補足します。 これは文字コードのひとつです。
　コンピューターが扱うデータはすべて数値のため、 文字を数値に変換する必要があり、その対応表が文字コードです。
　厄介なことに、日本語の文字コードが複数あるため、こうした指定が必要になります。 基本的には UTF-8 にしておけば問題ありません。 日本語以外の言語も表現できる、広く使用されている文字コードです。 テキストエディタ等でファイルを保存する際の文字コードにも UTF-8 を指定してください。

ファイル名は半角英数字が無難


　ホームページで扱うファイル名には、日本語を含めず、半角英数字を使用することをオススメします。 文字コードが一致しないことによる問題を回避したいためです。

既にindex.htmlが存在する場合はbodyの中をコピー


　既に index.html が存在している場合は、前述の <body> から</body> までの中身をコピーして、 index.html にも body があると思いますので、その中に貼り付けてください。
　ただし CMS等で自動的に作成されたものがある場合は、ファイルを直接改修するのは避けてください。 また、手書きの index.html が存在しているなら、HTML の知識がある方がいらっしゃるということでしょうから、その方に依頼する形が良いと思います。

まとめ


　本記事ではHTMLの基本について、サンプルを交えて紹介しました。 取り急ぎ決算公告の場所を作りたい方、 自社ホームページを自作したい方や、Webページの動作をイメージしたい方の、少しでも参考になりましたら幸いです。

補足


・本記事で紹介した内容には、例えばファイル名が指定されていない場合に index.html 以外のファイルが読まれるようにするなど、厳密には設定で変更が可能なものがありますが、ここでは一般的な状態を想定して解説しています。
・画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。

カテゴリー：エンジニアリング