Archive for the '初心者HP作り方【HTMLの作り方】' Category

前回ブロックレベル要素について簡単にご説明致しましたので、今回はインライン要素についての説明です。

ブロックレベル要素が“範囲”の指定だとすると、インライン要素は“部分”の指定です。
ちょっと区別しづらいかと思いますが、テキストの一部を指定するものと考えると判り易いでしょう。
文章中のひとつの単語だけを太字にしたり、色を変えたりといった装飾を施したい場合、このインライン要素を利用するのです。

となると、以前ブロックレベル要素のひとつとして例に挙げた見出しタグ、あれはテキストに対して指定しているものなのでインライン要素ではないのかと疑問に思われるかもしれませんが、これはそもそもの見出しの意味を考えてください。
見出しは以下に続く文章のタイトルであり、文章中に含ませるものではありません。
タイトルはそれがひとつの要素であり、他の要素と混在するものではないのです。

HTMLタグとは、基本的には「文書」の構造を忠実に再現するものなのです。
「文書」とは社内報告書や研究室のレポートなど。
最近ではデザイン性の高い作り方のホームページが数多くあるので、そういった無機質な見た目の文書はイメージしにくいかと思いますが、デザイン性を全て省いてHTML構造だけを見ると実にシンプルなものになっていることでしょう。

ただ、実際には正しい文書構造での作り方でHTMLを構成していないホームページも数多くあります。
見た目の良さだけを優先したがばかりに、見出しではないのに見出しタグを使っていたり、インライン要素を無理矢理ブロックレベル要素に見立た作り方をしていたり。
これらこそが初心者にありがちなホームページの作り方だったりします。
当サイトで初心者に正しいホームページの作り方を呼び掛けているのは、そういった間違いを正すためでもあるのです。

ホームページは初心者でも簡単に作れると言われています。
あらゆるプログラミングと比較しても作り方が最も初心者向けとされているのがHTMLのため、初心者の中には独学で予備知識もなくホームページが作れると考えている方もいらっしゃいます。
確かに、独学でも作り方さえ熟知していれば簡単にホームページが作れるのですが、予備知識は必要です。
知識がゼロの状態からHTMLを作れると思ったら、それは大きな間違い。
初心者だからこそ、最初の基本的な知識はしっかりと抑えておきましょう。
それが、初心者として正しいホームページの作り方です。

さて、そのHTMLの基本的な知識ですが・・・
前回ブロックレベル要素とインライン要素(+置換要素)について簡単にご説明いたしました。
今回はそれらについてもう少し詳しくお話しいたします。

まず最初にブロックレベル要素ですが、前回も説明した通りこの種のタグでは指定した箇所を“範囲”と見なして何らかの設定を行います。
ホームページの中でも特によく見かけるブログを例に挙げると、大抵はブログタイトル(ホームページ名)やサブタイトル(ホームページの説明文)などが記されたエリア(ヘッダー)が、ページの最上部に配置されていますね。
その下の左側もしくは右側には自己紹介やカレンダーや「最新記事一覧」といったプラグインを表示するサイドバーがあり、もう片側あるいは中央にブログのメインである記事が載るエリアがあります。
そして、ページの最下部まで下ると、ページ移動のナビゲーションリンクやコピーライトを表示するエリア(フッター)が。

簡単に言うと、これらのヘッダー、サイドバー、メインエリア、フッターが、それぞれブロックレベル要素で範囲指定して配置されているのです。
少し難しく言うと、ブロックレベル要素をいくつも重ねたり併用することで、あのような複雑な表示を成しているのですが。

ホームページを構成するタグには数多くの種類がありますが、それらは大きく分けて2種類に分類することができます。
以下、それらについてです。

●ブロックレベル要素
ホームページ内の文書的な構成を行うための要素です。
ヘッダーやフッターなど、それぞれを“範囲”と見なすため、基本的にはホームページの画面の横幅いっぱいがひとつの要素に含まれることになります。
ただし、横幅や高さを指定することができるので、それを利用して配置していくことも可能。

ホームページタグの例:h1~h6(見出し)、p(段落)、table(表)、div、など

●インライン要素
ホームページ内の文章(テキスト)の一部を編集するための要素です。
ホームページの文章中の一部の単語や文字に装飾を加える場合などに使用するので、いずれかのブロックレベル要素内での使用が原則となっています。
“範囲”を指定する要素ではないため基本的には横幅や高さの指定はできませんが、例外として、スタイルシートにインライン要素をブロックレベル要素として利用できるものがあります。

ホームページタグの例:a(アンカー)、strong(強調)、br(改行)、span、など

○置換要素
ホームページタグのうちインライン要素に含まれる種類のもので、テキストに置き換えて使用できる要素です。
上記で述べたとおりインライン要素は横幅や高さの指定が基本的にはできませんが、置換要素に類されるタグに関してはそれらが指定できるようになっています。

ホームページタグの例:img(画像)、select(セレクトボックス)、textarea(テキスト入力エリア)、など

HTMLでは、主に「タグ」と呼ばれるパーツを組み合わせて、ホームページの構成をプログラミングしていきます。
タグはタグ名と属性(属性名、属性値)で構成されており、それらが“<”と“>”で囲まれて成り立っています。
また、タグにはいくつかの種類がありますが、それらの大半には「開始タグ」と「終了タグ」があります。
終了タグには属性と値は無く、代わりにタグ名の前に“/”が入ります。
タグ名は要素名と呼びます。
要素とは開始タグから終了タグの全体を含めたもののことです。

例:<h1 id="head">見出し</h1>

<h1 id="head">見出し</h1>・・・要素
<h1 id="head"></h1>・・・タグ
<h1 id="head">・・・開始タグ
</h1>・・・終了タグ

h1・・・タグ名(要素名)
id="head"・・・属性
id・・・属性名
head・・・属性値

この例の場合「見出し」というテキストが要素の内容で、ブラウザに表示されます。
要素の内容と一部の属性値以外のタグ類は、原則半角文字で記述しなくてはなりません。
タグ名と属性名は半角であれば大文字と小文字のどちらでも構いませんが、XHTMLの場合は全て小文字でなくてはいけないので小文字で作成することをお勧めします。

また、属性値を囲む引用符(")ですが、属性値が以下のもののみの場合は省略可能となっています。
※省略可能の属性値・・・半角数字、-、_、:、.
だだし、こちらもXHTMLでは省略不可となるので、省略しないホームページの作り方を心がけましょう。

閑話休題を挟みまして、再び初心者向けホームページの作り方についてです。
たった今気付いたんですが、このサイト名にもしている「初心者向けホームページの作り方」、この言い方だと、ホームページの作り方が初心者向けなのではなく、作られるホームページが初心者向けのようにきこえますね(汗)
まあ、それも良しとしましょう。
初心者向けのホームページということは、それだけ見易く、操作もしやすいと考えられます。
ホームページはいろいろな人が見るものですから、そうでなくてはいけません。

さて、今回説明する初心者向けの“作り方”ですが、これからしばらくはHTMLについて訥々と述べて行きたいと思います。
どうぞお付き合いくださいませ。

HTMLとは正式名を「HyperText Markup Language」と言い、最も簡単なプログラミング言語と言われているものです(しかし、よくあるプログラミング言語のリストには含まれていません)
正式名の意味まで説明しようとすると、ホームページの作り方とはあまり関係のない話題にまで飛び火してしまうので割愛させていただきます。
まずは、以前述べたことと少々かぶりますが、HTMLでは何を書くのかについて説明しましょう。

HTMLでは、主にページ内の文書構成を整えます。
判りやすい例として、学校から保護者あてに配布されるプリント類を例に挙げましょう。
あれらの最上部にはまずプリントの大見出しがありますね。
そしてその下に時候の挨拶やプリントの主旨等があり、それから小見出しやそれぞれの内容が続きます。
内容によっては文章だったり箇条書きだったりしますし、小見出しの中にさらに小さな見出しで区別されている場合もありますね。

HTMLに書くのは、そういった基本的な文書構成だけです。
見栄えやレイアウトは全く意識しません。
次回から、HTMLの書き方について細かく説明していきましょう。

今回の記事にはホームページ初心者にありがちな間違いを正す注意が含まれていますので、ホームページ初心者の皆さんはじっくりとこの作り方を熟読してくださいね。

ただのテキストファイルを保存するのでしたら、基本的にファイルにはどんな名前でも付けられます。
しかし、ホームページにおいてHTMLファイルの名前に使用できる文字は半角英数と一部の記号のみとなっています。
日本語や全角英数で名前を付けると、そのホームページはブラウザに表示されません。
表示されないということはサーバにホームページが認識されないということで、これは初心者向けにサービスを行っているサーバでも専用サーバでも同じことです。

半角英数以外に使用できる記号は「.(ピリオド)」「-(ハイフン)」「_(アンダースコア)」等です。
「#(シャープ)」や「/(スラッシュ)」等は使えません。
(しかし、基本的に記号は使用せず、全角英数のみで名前をつけるのがよいとされています)

使えない記号として、ホームページ初心者の皆さんに作り方に注意していただきたいのが半角スペースです(厳密には記号ではありませんが)
スペースを入れてHTMLファイル名をつけると、サーバやブラウザに認識されないばかりか、ファイルの編集ができなかったりバックアップ(データファイルのダビングのこと)できなくなってしまう恐れがあります。
特に、ファイル名の先頭にスペースを入れると、そのファイルの削除さえ不可能となってしまいますので、そういったことのないよう充分ご注意ください。

さて、ホームページには必ずいちばん最初に閲覧者が訪れるページがありますね(厳密にはその1ページのみを「ホームページ」といい、以降のページを含めた全体を「サイト」といいます)
その最初のファイル名は「index.html」と定められています。

もしファイル名を「first.html」としていたなら、そのページのURLは「http://ドメイン名/first.html」となりますが、「index.html」とした場合URLは「http://ドメイン名/」となるのです。

HTMLファイルはホームページのひとつひとつのページになるものです。
ホームページのひとつのページにつき、HTMLファイルをひとつ用意しなくてはなりません。

HTMLとはプログラミングの一種です。
「プログラミング」というと作り方が物凄く難しいことのように聞こえますが、臆することはありません。
HTMLは最も作り方が簡単なプログラミングと言われているくらいで、ホームページの作り方を知らない初心者でも簡単に取り組めます。

HTMLファイルの作り方は、「タグ」と呼ばれるプログラムコードを書いて作ります。
初心者向けのホームページ作成ソフトとして「ホームページビルダー」や「Dreamweaver」など便利なものがありますが、メモ帳やワードパッドなど、家庭用パソコンに既存のツールでホームページ初心者でも作れます。

HTMLを書いたら当然そのファイルを保存しなければならないのですが、この際の保存形式には決まりがあります。
例えばメモ帳に書いたものを何の指定もなく保存しようとすればその形式はテキストファイルとなり、「ファイル名.txt」と名前がつきます。
ファイル名の後に付属する「.txt」は拡張子といいます。

HTMLファイルはその拡張子を「.html」もしくは「.htm」としなくてはなりません。
ふたつの違いはサーバによってどちらに指定されているかの違いなので、確認の上どちらかに指定して作ってください。

拡張子の変更は初心者でも特に難しいことではありません。
新規保存の際「ファイル名」だけを入力して保存すれば「ファイル名.txt」となりますが、「ファイル名.html」とまで入力して保存すれば拡張子ごと変更されます。