ホームページの作り方

ホームページ表示の仕組みと作り方

ホームページ(Webサイト)表示の仕組み

※ホームページとは、本来はインターネット・エクスプローラーやエッジ、GoogleクロームなどのWebブラウザを立ち上げた時の最初のホーム画面を指す言葉ですが、Webサイト自体を表す言葉として定着しているため、以下の説明も”ホームページ”で統一します。

まず初めに、ホームページ(Webサイト)の表示の仕組みをご説明します。

ホームページはWebサーバーに設置されたファイル情報をパソコンのWebブラウザが表示形式に変換します

私たちは、パソコンやスマホからインターネットエクスプローラー、エッジ、GoogeクロームなどのWebブラウザを通してホームページを見ています。
その際、URL(例. https://asuiro-web.com)を入力しますよね。このURLは、Webサーバー上に設置されたHTMLファイルやCSSファイルの保存場所を指定するものです。(正確には、URLと1対1のIPアドレスで指定されます)

ブラウザ上で入力したURLにより、サーバーはその指定されたURLに保存されているHTMLファイルとCSSファイルをブラウザに返します。すると、ブラウザは、HTMLとCSSを閲覧できる形式に変換するので、私たちがいつも見ているホームページになるのです。

ですので、ホームページの構成要素としては、Webサーバーに設置するHTMLファイルとCSSファイルが最小構成として必要となります。
(その他必要に応じてjavascriptなどのプログラムファイルや、後述するWordPressでは、HTMLの代わりにPHPファイルで構成されます

HTMLとは
Hyper Text Markup Languageの略で、Webページを作成するためのマークアップ言語です。
具体的には、下記のように、ページの表示内容を、タグ(<>)を使ってマーキングします。
【例】
<h1>ホームページの作り方</h1> ←h1タグ(見出し)
<p>初心者の方向けにホームページの作り方をご説明します</p> ←pタグ(段落)
CSSとは
Cascading Style Sheetsの略で、HTMLで作成されたWebページのスタイル(色や文字の大きさ、配置などのデザイン)を指定するスタイルシートとも呼ばれるファイルです。HTMLのタグを直接指定したり、タグに入れたclassやidを指定して、スタイルを決めることができます。

【例】
(HTMLファイル)
<h1>ホームページの作り方</h1>
<p class=”ma1”>初心者の方向けにホームページの作り方をご説明します</p>

(cssファイル)
h1 {
color: #ff0000; ←文字の色を赤に
font-size: 20px; ←文字サイズを20pxに
}
.ma1 { ←クラス”ma1”指定
font-size: 16px;  ←文字サイズを16pxに
}

ホームページの作り方の種類

このWebサーバーに設置するHTMLファイルとCSSファイルの作り方ですが、下記のような方法に分けられます。

1. HTML/CSSファイルをエディタ(編集ツール)、またはホームページビルダーなどの編集ソフトで作成し、サーバーへアップする

エディタを使って作成する方法は、昔から行われている最も原始的な方法ですが、最近は、スマホ対応したレスポンシブのHTMLテンプレートなどが無料で配布されていますので、知識のある方なら、それを利用して、割と簡単にホームページを作ることができると思います。
ホームページビルダーは、HTMLやCSSの知識がない人でも簡単にホームページを作れるソフトですが、デザインの選択肢が限られるのと、コードが整理されないため、SEO対策上問題があります。

2. WixやJimdoなどのクラウド型CMSを利用する

CMSとは
Content Management Systemの略で、コンテンツ管理システム、つまりホームページのコンテンツ(記事)を管理画面から簡単に行うシステムです。
CMSを利用すれば、HTMLやCSSの知識のない方でも、簡単にWeb上の操作でホームページを作ることが可能です。

クラウド型CMSは、自分でセットアップすることなく、クラウド上に設置されたCMSの管理画面から、手軽にホームページを作ることができます。バージョンアップも自動で行われるので、CMS本体のメンテナンスは必要ありません。

ただ、ソースが公開されていない分、機能面やレイアウトのカスタマイズは自由度が低いです。また、SEO対策用の設定もできますが、見栄えをよくするために、画像を多用したり、ページ構成要素が多くなればなるほど、ページ読み込み速度が遅くなるため、その点でSEO的に問題があります。ページ数の少ないホームページなら問題ないと思います。

クラウドについてもっと知りたい方は↓

シフト管理システム「SHIFREE」

クラウドとは、インターネットを介して、クラウドサービス会社がソフトウェアやプラットフォーム、インフラを提供するサービスの…

3. WordPressなどのオープンソース型CMSを利用する

オープンソース型CMSは、レンタルサーバーにプログラムをインストールして、サーバー上の管理画面からホームページを編集するCMSです。
ソースが公開されているため、誰でも自由にプログラムを改良することができます。
中でも世界で最もシェアされているWordPressは、テーマと呼ばれるテンプレートや、機能面を追加するプラグインの数が豊富で、ホームページのデザインや機能を自由にカスタマイズすることが可能です。
もちろん、カスタマイズにはHTMLやCSS、PHP(HTMLに動きのあるプログラムを追加したもの)などの知識が必要となりますが、記事の更新は、専門知識がなくても管理画面からブログ投稿の感覚で行えます
ですので、カスタマイズが必要であれば、最初にホームページ全体のセッティングをWeb屋にやってもらい、あとは必要に応じて最新記事の投稿は自分自身で行うことができるのです。

SEO対策用の設定もプラグインや、知識があればソースコードに直接いれることもできるため、SEO対策がしやすく、集客効果が高いと言われています。

なお、WordPressは、PHPというプログラムとデータベースを使用しており、ソースが公開されていることから、セキュリティの脆弱性をつかれる危険性があるため、その対策面でのバージョンアップや、機能面の追加のバージョンアップが多いです。WordPressのテーマやプラグインも同様にバージョンアップされます。
そのため、その都度バージョンアップはするにこしたことはないのですが、WordPress本体とテーマやプラグインのバージョンアップのタイミングはバラバラなため、WordPress本体をバージョンアップしたら、テーマが対応してなくて、ホームページのデザインが崩れた、となる場合も多々あります。

ですので、バージョンアップする場合は、専門的な知識のあるWeb屋に、バックアップをとったうえでやってもらうことをおすすめします。

ホームページ制作なら「明日色Web」

集客効果の高いWordPressを使用したホームページの作成、ネットショップ開業支援、Webアプリ作成などを行っています。
愛知県尾張旭市、名古屋市(守山区、名東区他)、瀬戸市、長久手市、春日井市などへご訪問対応致します。
詳しくはこちら