大阪府堺市のSEO・MEO対策ホームページ制作会社
トランジット( 合同会社うえせいや)
営業時間 9:00〜17:00(土日祝休)

ホームページが表示される仕組みを知る【HTML超入門】

ホームページが表示される仕組み
LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

合同会社うえせいやの最新情報をお知らせします。

友だち追加

sponsored link

うえせい写真

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

取引実績業種

公立高校・各種クリニック・歯科・産婦人科・商店街・鍼灸院・整骨院・整体院・ホテル・ネイルサロン・各種モデル・講師業・生花店・ベビーマッサージ協会・カメラマン・自動車教習所・占い・飲食店・各種クリニック・旅館・ホテル・宿泊施設・など

全国どこでも対応可能です

メールはもちろん、SNSや、LINE、スカイプなどを使ってしっかりとコミニュケーションをとりながら、進めることが可能です。
もちろん、お近くの方や、仕事で行くとこの多い関東圏であれば、実際お会いしてのコンサルティングやレクチャーも対応可能です。

面談可能地域

堺市堺区・堺市中区・堺市東区・堺市西区・堺市南区・堺市北区・堺市美原区・和泉市・大阪狭山市・泉大津市・岸和田市・貝塚市・泉佐野市・泉南市・松原市・富田林市・大阪市此花区. 大阪市福島区 · 大阪市北区 · 大阪市都島区 · 大阪市旭区 · 大阪市港区 · 大阪市西区 · 大阪市中央区 · 大阪市城東区 · 大阪市鶴見区 · 大阪市大正区 · 大阪市浪速区 · 大阪市天王寺区 · 大阪市東成区 · 大阪市西成区 ·大阪市阿倍野区 · 大阪市生野区 · 大阪市住之江区. 大阪市住之江区. 大阪市住吉区 · 大阪市東住吉区 · 大阪市平野区・吹田市
※ここに掲載されている場合でも、一部地域では困難な場合もございます。

ホームページを制作していくにあたっては、HTMLという言語を知ることが、最初の第一歩となります。

最近は、簡単にホームページを作れるWixやJimdoなどのサービス。

または、当サイトのようにWordPressなどを使ってホームページを作るという場合もあるでしょう。

ただ、ちょっとしたカスタマイズをしたいなどと思った場合は、少しは知っておいた方が理解か早いです。

uesei.png
うえせい

私のところにも、よくカスタマイズの質問が来ますが、基本的なことから説明しないといけないので、回答はお断りしているんです

ということで、あって損はしない知識ですので、少しずつ解説していきます。

 

sponsored link

まず、HTMLとは?

ちゃんとした名前は、「ハイパーテキスト・マークアップ・ランゲージ」といいます。

uesei.png
うえせい

覚えなくていいからね!

ほとんどのホームページはHTMLとCSS(これは、別シリーズで解説していく予定)という言語で、ホームページ自体の見た目部分が作られています。

uesei.png
うえせい

もちろん、この「うえせいやブログ」もHTMLとCSSで表示されています。

 

HTMLを画面に表示させるには、ブラウザが必要

ブラウザ
ブラウザというのは、HTMLを閲覧するためのアプリケーションです。

スマートフォンが普及しているので、普段からよく使っている方が多いと思います。

たくさん種類があるのですが、代表的なものだと、次のような感じですね。

  • Internet Explorer
  • Google Chrome
  • Safari
  • FireFox
  • Opera

じつは、他にもたくさんあるのですが、使っている人は少数派でしょう。

インターネットに接続されている状態(スマートフォンだと、だいたいいつも繋がっている)で、ブラウザを起動することで、インターネット上に存在するhtmlファイルを表示させる・・・ということが、「ホームページを見る」という行為になるのですね。

girl.png
A さん

インターネットに繋がってなかった見られないの?

uesei.png
うえせい

インターネットに接続されていませんって表示されるでしょ?

uesei.png
うえせい

でも、それが自分のパソコンの中にあるHTMLファイルなら、表示されるよ

 

HTMLファイルをブラウザに表示させてみる

HTML表示
▲サンプルを表示

HTMLの意味が分からなくてもいいので、次のテキストファイルをテキストエディター(メモ帳など)に「sample.html」というファイル名で保存してみてください。

<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<h1>見出し1</h1>
		<p>本文ほんぶん本文ほんぶん本文ほんぶん本文ほんぶん本文ほんぶん</p>
	</body>
</html>

▼できた「sample.html」を起動
sample.htmlのアイコン

そのパソコンで、既定のブラウザとして設定されているブラウザが起動して、表示されます。

uesei.png
うえせい

サンプルの画面は、Google Chromeのもので、他のブラウザで表示した方は、見た目がすこし違って表示されているかも知れません。

 

ブラウザによって見た目が変わる理由

例えば、前述のHTMLのタグ内に<h1>とか、<p>とか書いてあります。

  • h1 ・・・ 大見出し
  • p ・・・・ 本文

という意味付けをしていて、この意味付けされた文字の表示を、ブラウザがそれぞれ表示をさせているので、見た目が変わるんです。

uesei.png
うえせい

cssを使って、自分で指定はできるのですが、それは後々解説予定です

 

【まとめ】ホームページはHTMLで書かれたものが、ブラウザに表示されているだけのもの

うえせいイラスト
HTMLで書かれたタグを、ブラウザで指定した通りに表示されているだけのものです。

言語といっても、上から順番に表示させる内容を書いているだけなので、とっても難しいものではありません。

ご自身で、ホームページやブログを運営されているなら、学んでみて損はないですよ。

では、また。最後まで読んでくれて、テリマカシ。

【関連記事】SEO(検索エンジン対策)の問題点は、ブログのソースコード(HTML)を確認すると見えてくる

【関連記事】ブログの見出しを装飾して、簡単に使う5ステップを解説します

【関連記事】AddQuicktag 予めよく使うHTML雛形を登録しておくと、記事作成が楽になるWordPressプラグイン