スクール講師がホームページの作り方について1から解説していきます。Part1[構造編]

スポンサーリンク

ae46b1

「HTMLがわかったらなぁっ」ていう人って意外と多いのではないでしょうか?

Webページを作るまではいかなくてもWordPressのちょっとしたカスタマイズやブログやホームページのちょっとした更新などちょっとした「自分で出来ること」が格段に広がり、様々なことが表現できるようになり楽しくなります。


プログラムには様々な言語がありますが、ちょっとしたホームページやブログのカスタマイズならHTMLとCSSでほぼ対応できます。HTMLは、プログラム言語の中でも習得が簡単と言われておりますが、実際にチャレンジしてみて挫折した人も多いはず。


HTMLの初心者向けの本は多数ありますが、HTMLを習得するのは言われるほど簡単ではないと僕は思います。
手前味噌ですが、スクールで教わったり、現場で学べたりすれば良いのですが、そんな恵まれた環境にいない人も多いはずです。

今回は、HTMLがどのようなものかが大体見えてくるようになる僕なりの方法を説明します。
この内容は自分が運営しているTAIMEI DESIGN SCHOOLにて初回の授業でお話している内容です。

この記事をみて興味がわいた方でもっと勉強したいという方は当スクールも検討してみて頂ければ幸いです。

目次

  1. そもそもHTMLってなんぞや?
  2. HTML書くのに必要なものは?
  3. HTML構造
  4. タグとはなにもの?
  5. headとbodyの役割


そもそもHTMLってなんぞや?

HTMLとは、HyperText Markup Languageの頭文字をとったものです。
ちょっと丁寧に解釈すれば、

「ハイパーテキストの、文書に目印を付ける方法を定めた文法上の決まり」

ということになります。


HyperText:
ハイパーテキストとは、「テキストを超えたテキスト」というような意味です。
つまり、通常のテキストにない機能を備えた「超」テキスト(ドラゴンボールでいうスーパーサイヤ人です。)というわけです。


Markup:
マークアップとは、普通の文書に目印を付ける(マークアップする)ことで、その部分がどんな働きをしているか(見出しなのか、段落なのかなど)を区別しようという考えです。


Language:
マークアップをどんなルールで行うかをきちんと決めておくための約束、
つまり「文法」という程度の意味です。


まぁ、といっても「よくわからんわ」と思われると思います。
(書いてても小難しいなぁと思いました笑)

スーパーサイヤ人といっても悟空も悟飯もベジータもスーパーサイヤ人なわけで、それぞれ違う顔や技を持っていますよね?
そういうキャラ設定みたいなのを定義した文章だよ。

ってことです。(うん、そういうことにしておきましょう。)

HTML書くのに必要なものは?


HTMLは、コンピュータの機種やOSに依存することなく機能することを目標に定義された言語です。
なので特別なファイルフォーマットを使用しません。
しかも、全てを普通の文字で表現するテキスト形式ファイルになっています。
(つまり普通に文字をうってるだけで書けちゃいます。)

このようなテキストファイルをつくるのに必要なアプリケーションは、、、

「テキストエディタ」です。

Windowsなら「メモ帳、もしくはnotepad」
Macなら「テキストエディット」

というエディタが最初から付属しています。

テキストエディタは、どのプログラムで作ったファイルでも互換性があるので環境がかわってもそのまま編集することができます。

使い方に関しては、

Windows標準のテキストエディタ「メモ帳」を使いこなそう(道すがら講堂さんより。ウィンドウズの方向け。)
http://michisugara.jp/archives/2013/text.html

テキストエディットを使おう!(All Aboutさんより。macの方向け。)
http://allabout.co.jp/gm/gc/2172/

が詳しく記載されています。

上記サイトを参考にプログラムを記述してからデスクトップ等に保存してみてください。
保存するときの拡張子は.txtではなく.htmlにするように注意しましょう。

拡張子とは(Wikipediaより)

巷ではHTMLを覚えなくても「画面に表示されるとおりにレイアウト」できるHTMLエディタと呼ばれるソフトがあります。

例えば、、、、、


などが有名です。
しかしこれらのソフト。
今のところあまりおすすめできるものはありません。
(Bindはあまり文章が崩れなかったのでよかったかも)

そもそもHTMLは「レイアウト」のための約束ではないので、見栄えよりも文書の構造をきちんとマークアップすることが重要です。
(ここ大事です。)

見栄えよりも文書の構造をきちんとマークアップすることが重要です。
(大事だから2回言いました。)

ワープロや画像編集ソフトの「HTML書き出し」機能も同様で、不完全なHTMLができてしまいます。

市販のHTMLエディタ(ホームページ作成ソフト)は、以前に比べ質がかなり改善されたと思いますが、標準で使うとやはり画面レイアウト優先だったりするので、ホームページ制作ソフトを利用するにしても最低限HTMLを理解している必要があります。

テキストエディタでHTMLを書くと、「伝説のハッカーになれる」(※ 犯罪者の意ではありません。)という説もあります(?) 
さあ、エディタを用意して、HTMLを書く事をはじめてみましょう。


HTML構造


と、ここであやまっておかないといけないのが厳密にいうと今はHTMLではなくXHTMLやHTML5といった言語が使用されています。
今回の記事ではXHTMLを取り上げてみようと思います。
HTML5で書けよって言われるかもしれませんがそれはまた書くであろう次回の記事のためにネタとして温存させていただきます笑

HTMLとXHTMLって何が違うの??


HTMLは、SGML(Standard Generalized Markup Language)に基づいて書かれた実装の1つです。一方のXHTMLは、バージョンアップごとに複雑多様化するHTMLを、XMLに基づいて書き直した実装の1つで、HTMLの後継仕様となります。また、XHTMLはXML文書でもありますので、XMLパーサを利用して各種の処理をすることができます。
引用ー 「HTMLとXHTMLの違いはどこにある?」


はい、わかりません(笑)

まぁ簡単にいうと大筋そこまで変わってないんですが細かい規約ができたりしてます。
こうした方がよくない?ってことをちょこちょこ修正してみた。

みたいな感じです。


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title></title>
<style type=”text/css”></style>
</head>

<body></body>

</html>


こちらがXHTMLの基礎構文となります。

基礎構文=ホームページつくるときになくちゃならない最低限の文章です。

タグとはなにもの?


見て頂くと、大きく分けて4つの固まりにわけることが出来るんですが、


そのまえにでてくる < 〜 > この括弧。

これをタグと言います。


< 〜 > この括弧。これをタグと言います。(大事だから2回言いました。)


このタグがHTMLやXHTMLを構成している最小構成単位となっています。


んで、先ほどもいったように4つのかたまりに分ける事ができます。

  • <!DOCTYPE>
  • <html>
  • <head>
  • <body>


の4つですね。(DOCTYPEの後ろは補足的な情報なのであくまでここはDOCTYPEタグとなります。)
こいつらそれぞれ役割があります。
その前によく見ると、

  • <html>〜</html>
  • <head>〜</head>
  • <body>〜</body>


のように同じ名前のタグが2個あるものがありますよね。

そう、タグも2種類あって
<タグ名>  ←開始タグという。
</タグ名>  ←閉じタグという。2つで1つのセットになっている。
というものと、

<タグ名 />  ←セットになっていない。空要素という。
というものの2つにわかれます。

基本的には開始タグと閉じタグをつかって
「こっからhtmlでこっからここまでがhtmlの内容だよ〜」

fig1

ということを示してあげるのがHTMLを勉強する際に出てくるタグの基本的な考え方です。

headとbodyの役割


上のイメージ図にもあるようにHTML文書はheadタグとbodyタグで構成されます。

headの役割
ヘッドとは文書自身に関する情報(タイトル、関連ページ、スタイルなど)を納めた部分です。
(このような情報をメタ情報といいます)

bodyの役割
ボディが文書の本文です。


ってすごい簡単にかいちゃいましたが、どういうことかというと、、

fig2

こんな感じのイメージです。

とにかくブラウザの画面に表示されるタグで表現される文章や画像などの要素はbodyに。
それ以外の情報はheadに入る。

ということです。

いかがでしたでしょうか?
ここまで「ホームページの作り方について1から解説していきます。」という題目でHTMLの構造について述べさせて頂きました。

次回は第2弾として、bodyタグに入れられるものやhead内に記入できるもの。を解説して行こうとおもいます。

ホームページの作り方について1から解説していきます。
このシリーズを見て頂ければ最終的には自分でホームページが簡単に作れてしまうようになるくらいの知識を皆様に提供できるように頑張って記事を書いて行くので参考になった方はシェアなどで拡散してください笑

普段はスクールで教えているので記事の更新は不定期になりますのでご了承ください。
質問や分からない事がある場合、もう少し詳しく勉強したい場合は、無料体験レッスンも実施していますので、都内の方は実際に会ったときにお話させていただきますのでお気軽にお問い合わせください。

とちょっぴりスクールの宣伝なんかもしつつ(笑)

それでは、第2弾を書きましたらまたお会いしましょう。

今月最も見られている記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です