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

ホームページが表示される仕組み

HTML/CSS入門

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

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

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

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

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

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

 

まず、HTMLとは?

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

うえせい
覚えなくていいからね!

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

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

 

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

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

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

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

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

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

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

A さん
インターネットに繋がってなかった見られないの?
うえせい
インターネットに接続されていませんって表示されるでしょ?
うえせい
でも、それが自分のパソコンの中にあるHTMLファイルなら、表示されるよ

 

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

HTML表示
▲サンプルを表示

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

sponsored link

   
うえせいイラスト

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

 

sponsored link

lineat

「この記事が気に入ったらLINE@で友だち追加をしよう!

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

友だち追加