HTML基礎の基礎

Publish2011/01/08(土)

Update2016/01/02(土)

HTML基礎の基礎

今回はサイト更新担当者様向けの今更聞けない基礎知識編として、HTMLの基礎中の基礎について紹介します。

Webサイトは、HTMLという言語で記述されていて、その言語をインターネットエクスプローラーなどのブラウザが読み取ってサイトを表示しています。
ブラウザで見ているその画面は、HTMLという言葉を通してブラウザが表示してくれているものだという事を理解しましょう。
ただ、HTMLは日常生活であまり見かけないものなので、ちょっととっつきにくいなーと思われている方が多いかと思います。
でもHTMLにはルールがあって、そのルールさえ守れていれば問題がなくて、そのルール自体もすごく少ないです。
なので、必要最低限のものから覚えていけば、ある程度理解するまでにそこまで時間がかかるものではありません。
例えば、「タグで文字を囲う」というルール。
HTMLの基礎ともいえるルールで、多くのHTMLタグと呼ばれる記述の指定のベースともいえるルールです。
(一部例外はあります。)

例えば、文字を強調する場合は以下のようにHTMLで書きます。

<strong>強調する文字列</strong>

見たままなんですが、<strong></strong>の間に文字を入れると強調文字になるという具合です。
この基本ルールさえ覚えておけば、あとは「strong」のようなタグと呼ばれる文字列を覚えるだけといっても過言ではありません。

このルールさえ把握できていれば、ある程度はどんな内容か分かるようになりますし、分からなくても検索する手がかりにはなります。
理屈が分かれば修正をするのにもそんなに怖くないんじゃないでしょうか。

HTMLで必須ともいえる基礎中の基礎のタグ

以下で紹介するタグは、サイトに必ず入っている必要最小限のHTMLタグになります。
逆に言えば、最低限これだけあれば世界に文書を公開できる準備ができるともいえるくらい重要で基本的なものになります。
まずはこの4つを覚えてください。
最悪この4つだけでサイトを表示する事も出来ます。

html

<html></html>

HTMLは一部例外を除いて基本的に全部この中に含みます。
ここの中がHTMLですよーという事をブラウザに教えている感じです。

head

<head></head>

画面に表示されない部分でHTMLの情報などが入っているエリアを指定しています。
サイトの名前や説明などを入れる部分がここになります。

body

<body></body>

画面に表示される部分はここの中です。画面内に表示させたい場合はここの中に入れましょう。

title

<title></title>

headタグ内に入れるそのページの名前を設定するタグです。これはそのページごとにきちんと書いておきましょう。

実際にかいてみよう

基本的な4つのタグを使って実際にページを作ってみましょう!
僕も一番最初はこの4つのタグでページを作ってみた事がはじまりでした。
文字を実際に入力して保存し、ブラウザで表示できた時はすごく嬉しかったのを覚えています。

まずは新規テキストファイルを用意します。
そしてそのテキストファイルを開きタグを書いてください。

サンプルとしてこんな感じで大丈夫です。

<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>表示できたよ!</body>
</html>

コピペでもいいですが、このくらいは書く量も少ないですし、なにより実際の自分が書いたものが出来上がる感覚をつかむためにもコピペではなくしっかりとタイプして見てください。
書けたら一旦そのまま保存しましょう。
保存が終わったらファイルを保存します。
保存する際は別名で保存するようにして、ファイルの名前を「index.html」に変更しましょう。

注意点
※.htmlのような拡張子と呼ばれる文字が表示できていない場合は、Windowsの場合は適当なフォルダを開いて「ツール」にある「フォルダオプション」の「表示」タブから「登録されている拡張子は表示しないのチェックをはずす」で「OK」にして設定を変更すると表示されるようになります。
Macの場合は Finderの「環境設定」の「詳細」タブから「すべてのファイルの拡張子を表示」のチェックボックスにチェックを入れる事で表示されます。
※ファイル名を変更する時は全角文字ではなく半角英数にしましょう。

「index.html」に変更する事で、ファイルがHTMLで作成された文書であるという事をコンピューターが認識できるようになります。
「index.html」はフォルダにアクセスした際に一番最初に表示されるファイルの種類という意味でお考えください。
(この部分は厳密にいうとちょっと違うんですが、そういう解釈で考えていても間違いではありません。)

変更後そのファイルをダブルクリックするか、「index.html」ファイルをブラウザにドラッグすると、記載した内容がブラウザで表示されている事を確認できます。

自分が書いた文字の情報がブラウザで表示されたというだけの事ですが、最初にでてた時にはすごく達成感があります。
まずはこのような小さい成功を積み重ねていくという事が大事なので、少しづつステップアップしていきましょう。
次回はよく使うタグのご紹介でもしようと思います。
お楽しみに!
 

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • HTML/CSSの基礎を学習する時にドットインストールを使ってみてはどうかHTML/CSSの基礎を学習する時にドットインストールを使ってみてはどうか GW中に色々考えていたんですが、これからサイトを運用していこうとか、サイトを活用して何かをしたいという人は、まず「HTML」と「CSS」の基礎的な知識を学習した方がいいと、しておかないと色々と厳しいと思っています。 HTMLとCSSを知らなくても、ブログを書いたり、更新したりもある程度は何とかできます。 ただし、知っていないとできない事が多いという事を考えると必須の知識だ […]
  • ホームページ/Webサイトのアクセスアップの基礎知識。流入経路を把握する。ホームページ/Webサイトのアクセスアップの基礎知識。流入経路を把握する。 今回はホームページ/Webサイトのアクセスアップを行う際の基礎知識として、サイトへのアクセスが発生する流入経路にはどの様なものがあるのかを考察します。 単純にサイトにアクセスを集めれば売上が上がるということではありませんが、どの様な人に見てもらうかや、ホームページ/Webサイト上での成果を出すためには、アクセスをどこからどうやって集めるのかということを知っておくことは必要で […]
  • 会社概要のページと会社沿革のページはけっこう大切会社概要のページと会社沿革のページはけっこう大切 最近サイトを運用する事もしてますが、実は作る仕事の方が今は多くて、サイトの制作をけっこうしているんですが、作っているコンテンツで会社概要や会社の歴史コンテンツを編集する機会があってそこで感じた事を今日は書こうと思います。 その作っているサイトはとある会社のサイトなんですが、特徴のある商品を1世紀以上売っているようなところで、けっこうな歴史があります。 なので、会社概要ペー […]
  • これからサイトを作る人向けに最適な学習コンテンツ「ウェブマスターアカデミー」これからサイトを作る人向けに最適な学習コンテンツ「ウェブマスターアカデミー」 今日は「これからサイトを作る人向け」にGoogleが公開しているウェブマスターアカデミーを紹介します。 サイトをこれから作ろうという場合、まず何からしていいものやらと思うことになりますが、その手順をGoogleが教えてくれるコンテンツという非常に効果的かつ有益な内容になっています。 この内容をしっかり学習することで、Webサイトの作成、運用をスムーズに行うことができるよう […]
  • Webサイトの運用にかかせないテスト環境構築のススメWebサイトの運用にかかせないテスト環境構築のススメ 今日は、サイト運用をより効果的に行うための方法の一つとして僕も実践している「テスト環境を作成する」ことについて書きます。 Webサイトのテスト環境を作る理由とメリット まず、テスト環境を作るというと、「そんなのめんどくさい」とか、「作る側の人だけでしといてくれたらいい」とか、そういう意見をいただくこともあるのですが、テスト環境は作成して使っていくことで多くのメリッ […]
  • これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】これからECをはじめる方向け。ECサービスの比較と特徴など調査【2015年6月版】 今日は先日お客さんにECサイトをはじめたいという質問があったので、今後の事もかねて手軽にはじめる事が出来るサービスを比較してまとめてみました。 今回比較するサービスはSTORES.jp、BASE、Yahooショッピング、カラーミーショップ、Makeshop、ショップサーブの6つ。 ECのサービスというか一般的にはASPといわれる部類のものですが、これからはじめる人がASP […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month