HTML&CSS基礎知識
Webページ作成の基本となるHTMLとCSSについて勉強しましょう。サイトマップ風にまとめました。
- HTMLとXML
- メモ帳でHTMLを作る
- タグの基本ルール
・開始タグと終了タグ
・タグと要素
・タグに属性を追加する
・入れ子構造
・コメント - HTMLファイルの基本構造
- 覚えておきましょう
・改行と段落分けを使い分けよう
・連続スペース - ブロックレベル要素とインライン要素
- ビルダーはタグを書き込んでくれます
・ビルダーで新規作成（白紙）
・段落や見出しの挿入
・リストの挿入
・範囲を設定する - 絶対パスと相対パス
◎CSSの基礎知識
- CSS（スタイルシート）とはなにか？
- スタイルシートの記述場所
- ＣＳＳの基本的な記述方法
- セレクタ（スタイルの対象）について
- スタイルシートをHTMLに適用する
- フォントサイズ
- CSSのコメント情報
- ボックスの概念
- ホームページビルダーとCSS
HTMLの基礎知識
私たちがいつも見ているホームページは、カラフルな文字やイラスト、写真で構成されています。しかしその実体はHTMLと言う文字で書かれたソースです。ホームページを勉強することは、HTMLの書き方を勉強することです。
※HTMLはHyperText Markup Languageの略で、ウェブページから別のウェブページにリンクを貼ったり、同一ページ内に画像等のデータをリンクで埋め込むこんだり、目印をつける意味です。
HTMLとXML
ホームページ作りではHTMLで十分ですが、HTMLをXMLの文法で定義しなおした、後継仕様のXHTMLも制定されています。記載方法はどちらもほとんど同じですが、両者の違いを知っておいてください。Ｗｅｂページの「文書型宣言」を確認したり、解説書の準拠を、確認してください。HTMLを手書きして勉強する際には、厳しいルールに慣れるという意味でも、XHTMLがいいと思います
※ビルダーのHTMLは、HTML4.01（もしくは5）で作成されます
メモ帳でHTMLを作る
OS付属のテキストエディタ（メモ帳など）を使い、HTMLを記述し、拡張子「.css」に変更すると、ＨＴＭＬファイルが作れます。しかし、専用ソフトのビルダーを使えば、ワープロ感覚？で、タグを意識することなく、出来上がりイメージを目で確認しながら、ホームページが作成できます。
本ページでは HTMLの基礎を理解するため、「メモ帳」に文字列を入力することから始め、ビルダーの「ページ編集」画面での入力作業を学びます。
タグの基本ルール
タグ（tag ）は、荷札、付箋といった意味ですが、ホームページやブログで、文字の色を変えたり、リンクを貼ったりする時に使う記号をHTMLタグと言います。あらかじめ定められた特殊な記入方法で、付加情報を文書に埋め込みます。
●開始タグと終了タグ
タグには開始タグと終了タグがあります。開始タグのタグ名の前にスラッシュ（/）をつけたものが終了タグです。開始タグを記述するときはそれに対応する終了タグも記述するのが原則ですが、終了タグを省略できる<li><dd>タグや、終了タグの無い<br>や<img>タグもあります。 ※「<」と「>」は山括弧といいます
●タグと要素
開始タグと終了タグで囲まれたひとまとまりをエレメント（要素）といいます。下の例では文字列が<p>タグに囲まれていることから「P要素」と呼び、段落であることを意味します。
※「ｐ」はparagraphの略です
（例）
・<p>4月には入学式があります</p>
↑ ↑ ↑
開始タグ 内容（文字列） 終了タグ
●タグに属性を追加する
開始タグの中でスペースで区切られた後に文字がある場合は、そのタグの属性を表します。タグに属性を追加することで 要素のサイズや配置などをより詳細に指定できます。通常、タグ名の後に「=」が続き、「"」と「"」の間に何らかの文字や値が入ります。 タグの種類ごとに指定できる属性の名称とその値が定義されています。
（例）
・<p align="center">段落を中央揃えにします</p>
↑ ↑
属性 属性値
※「ｐ」はparagraphの略で段落を表し、「align」属性は配置指定属性です
・<a href="http;//...．ｃｏｍ">トップページへリンク</a>
↑ ↑
属性 属性値
※ 「a」はanchorの略でリンクを表し、「ｈref」属性はリンク先のURIを指定する属性です
●入れ子構造
HTMLでは、タグの内側に別のタグを入れることができます。この入れ子の関係は何重にもすることができ、入れ子の外側にあるタグを「親要素」、内側にあるタグを「子要素」と呼びます。
（例）
<body>←親要素
<p>タグは入れ子にできます</p>←子要素
</body>
●コメント
コメントは制作者のメモガキやユーザーへのメッセージなどに使います。<!-- -->で囲まれた部分がブラウザに表示されないコメントになります。コメントは1行でも複数行でも構いません。 始まりの<!--は続けて記述する必要がありますが、終わりの--と>の間には空白が入っても良いことになっています。
（例）
<!--
これは
複数行にまたがる
コメントです。
-->
HTMLファイルの基本構造
HTML文書はhtml要素を始まりにして、 その中に<head>要素や<body>要素が含まれ、さらにその中に<p>要素などが含まれるツリー構造です。
- <head>要素=HTML文書のメタデータ群を内包
- <body>要素=文書の本体を示します
- <title>要素=タイトル部分です
- <meta>要素=汎用的なメタ情報を提供します
- <link>要素=CSS等が使えるようにします
- <h1>要素=コンテンツ文中の大見出し（タイトル）に
- <p>要素=コンテンツ本文の段落に使用します
- <ul>要素=箇条書きを作る際に使用します
- <adress>要素=連絡先・問合せ先を表します
- <div>要素=ボックス(領域）を作ります
覚えておきましょう
大切と思ったことをランダムに列記します
連続スペース
「ページ編集」画面で連続したスペースを文中に表示させたい場合は、全角スペースを挿入します。半角スペースをで入力できるのは最初だけで複数入力できません。「HTMLソース」画面上では、文頭の半角スペースは無視され,、文中の半角スペースは２つ以上は無視され半角スペース一つ分として認識されます。
コンピュータにとって「半角スペース」は、文字ではなく、記号として認識されるので、「 」をHTMLソースに書き込みます。ソースに
「 」と入力すると、文章の先頭、途中に限らず、入力した分だけの半角スペースが反映されます。
※ビルダーの編集画面とメモ帳（テキストエディタ）で 、それぞれ同じように文頭、文中、文末に半角スペース（・）を入力してみてください。違いが理解できます。
※「 」はnon-breaking spaceの略で、本来は「改行されない空白文字」です
メモ帳にコピペで確認 してください
「全角スペース」は□（「半角スペース」は・で代用表示します。
（例）
４月□□入学式
３月・卒業式
８月・・・・お休み
と表示されるはずです
ここから↓
<html>
<head>
<title>連続するスペース</title>
</head>
<body>
<p>４月 入学式（四月□□入学式）</p>
<p>３月 卒業式（三月・卒業式）</p>
<p>８月 お休み（８月・×4お休み）</p>
</body>
</html>
↑ここまで
ブロックレベル要素とインライン要素
HTMLでは多くの要素タイプが定義されていますが、そのうち<body>要素の中で使われるものは大きく「ブロックレベル要素」と「インライン要素」に分けることができます。
ブロックレベル要素は、見出しや段落など文書を構成する基本となる要素です。ブロックレベル要素には、別のブロック要素やインライン要素を含むことができますが、逆にインライン要素の中にブロックレベル要素を置くことはできません。
インライン要素は、主としてブロックレベル要素の内容として用いられるもので、文書の構造を構成するというより、ブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素です。ある語句に対してハイパーリンク機能を与える要素とか、特定の語句を強調する要素などです。
インライン要素は、その内容に文字データあるいは他のインライン要素を持つことができますが、ブロックレベル要素を含むことはできません。
ビルダーはタグを書き込んでくれます
ビルダーを使っている人から、「ビルダーしかわかりません」と言われたことがあります。「タグは分からない」の意味だったと思います。後で触れる<p>タグ、<h>タグ、<li>タグやリンクタグなどの主要なタグを覚えておくだけでも、HTMLの理解が深まります。タグを意識させないのは良し悪しです。
ビルダーで新規作成（白紙）
ホームページを作成するにはHTML タグを書く必要がありますが、ビルダーの「ページ編集」画面で、「新規作成」ボタン→白紙で作成するをクリックすると、「HTMLソース」画面の文頭に定型文（約束部分）が下記のように記入されます。確認してください。
- <!DOCTYPE html>
HTMLバージョンを宣言します。サイト作成後の白紙のページは「HTML4.01」 に、「かんたんナビバー」→「新規作成」⇒「白紙から作成」では「HTML5」になります。上図参照。
●<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">（HTML 4.01 Transitionalの場合）
●<!DOCTYPE html> ←（HTML5の場合）
※HTML.Verは「属性」ダイアログで変更できますし現時点でHTML4.01で問題無しです - <html lang="ja">
html要素のlang属性の値に"ja"を指定、ドキュメントの言語が日本語であることを宣言 - <head>～</head>
そのHTML文書に関する情報（メタデータ）を集めたものです。例えばタイトルやスタイルシート - <body>～</body>
文書の本体です - </html>
日本語のhtml文書がここで終了しますの宣言です
改行と、段落や見出しの挿入
改行とは読んで「字」のごとく行を改めることです。テキストエディタやワープロソフトなどの環境ではEnterキー(reternキー、改行キー）を押すと、（⏎）や（↓）の改行マークが画面に表示され、次の行にカーソルが移動します。
ビルダーのページ編集画面では、Enterキーに<br>要素が割り当てられています。ビルダーの「ページ編集」画面上でEnterキーを押すたびにピンクの枠が拡大し、ワープロのように改行（⏎）マークが追加されていきます。HTMLソース領域には<br>タグ（改行タグ）が書き込まれます。
段落として改行する場合は、もともと割り当てられている要素を切り替えるために「Shift」キーを押しながら「Enter」キーを押します。カーソルが一行空けて下方に移動し、フォーカス枠（ピンクの□）もカーソルを囲むように下方に移動します。HTMLソースには<p>タグ（段落タグ）が書き込まれます。
※この機能は下図のように割り当てを変更できます。
行を改める際には、改行 と段落を使い分けましょう。HTMLでは、段落わけの<p>タグを使用すると行間の前後を一行分空けて「１つの文章のまとまり」として表示されます。<br>タグは単に改行するだけで意味合いも見た目も違います。
※<P>タグはParagraphの、<br>タグ はBreakの略です
メニューバーから、[挿入]→[段落]→〔標準〕または[見出し1から6] を選択します。[書式ツールバーを利用する場合は[標準]または、[見出し]を選択します。 HTMLソースには、段落を選択すれば<ｐ>タグが挿入され、見出し（1～6）を選択すると<h（1から6）>タグが挿入されます。
※<P>タグはParagraphの略で、<P>～</P>で囲まれた部分がひとつの段落であることを 表します。hはHeadingの略で、見出しを意味します。 <h1>が最上位の見出しで、以下数字が小さくなるにつれて下位の見出し（小見出し）となります
表の枠を作成する
表組によるデータをWebページ上に表現したい場合、データ入力より先に表の枠を作ります。[ナビメニュー]→[表の挿入\（または[メニューバー]→[表]→[表の挿入]をクリックすると、「表の挿入」ダイアログが表示されます。
ダイアログで行数と列数を指定すれば、最もシンプルな表が作れます。また、目的に応じて「見出し行の有無」、「枠線の有無」、「表の幅をページ幅に合わせるかどうか」および、「スタイルの適用の有無」を指定できます。
●表の構造についてまとめてみました
HTMLにおける表の構造は「マス目（セル）を行単位に表したもの」になります。表を構成する各セルには文字や画像、サウンド、スクリプトなど、ページに挿入できるものであれば何でも挿入できます。
- 表全体を表すには<table>タグを
- 行は<tr>タグを
- 見出しセルは<th>タグを
- データセルの場合は<td>タグを
- 表の直前あるいは直下に表題を表す<caption>タグを挿入できます
リストの挿入
ビルダーでは「リストの挿入」アイコンから-、リストの種類を選択してリストの作成ができます。メニューバーから、[挿入]→[リスト]→「作成するリストを選択」でも同じです。HTMLでは<li>でリスト内容をマークアップして、それを<ul>か<ol>タグで囲みます。
範囲を設定する
範囲を設定するには、<div>、<span>を使用します。多くは、その設定した範囲に対してスタイルシートを設定する為に使用します。
- <div>～</div>
複数の段落やリストなどの複数の要素を一つの範囲として設定する事ができ、そのまとまった範囲に対してスタイルシートを設定する事が出来ます。まとまった範囲を、範囲領域とかボックスとか呼んでいますが、ビルダーではレイアウトコンテナと名付けています。 メニューバーから[挿入]→-「レイアウトコンテナ」を選択します。 下図はレイアウトコンテナ挿入の図です。
- <span>～</span>
文章中の一部分を一つの範囲として設定する事ができ、そのまとまった範囲に対してスタイルシートを設定する事が出来ます。
- スタイルを設定したい文字列を選択します。
- メニューバーから［書式－文字飾り－フォント スタイルの設定 (SPAN)］を選択します。
- ［スタイルの設定］ダイアログボックスが表示されます。
- スタイルを設定し、［OK］ボタンをクリックします。
<div>タグを使いこなし、外部CSSで自由自在に読み込ませられるようになればと思います。ホームページのレイアウトと、HTMLとCSSの関係を図にしてみました。分かりにくいですが、漠然とイメージできたらと思います。本サイトの最終目標は、ここからCSSを使って段組に挑戦することです。
絶対パスと相対パス
リンクを貼ったり画像を挿入する場合、絶対パスと相対パスの知識が必要です。ビルダーでは意識しませんが、知っておいてください。パスとはHTMLファイルや画像ファイルなどのファイルの場所を指定する方法で、img src タグの「””」で囲まれた部分が表示したい画像の場所（パス）を示します。
パスには相対パスと絶対部分があります。絶対パスとはhttp://から始まるアドレス（URL)を使ってファイルの場所を指定することで、相対パスとは、基準となるファイルから見て任意のファイルの場所を指定します。
相対パスのお約束
- 上位階層にリンクするときは、../ に続けてファイル名を記述します、
2つ上の階層を指定するときは、../../ に続けてファイル名を記述します - 同一フォルダ内にリンクするときは、ファイル名のみ(または ./ に続けてファイル名)を記述
- 下位階層にリンクするときは、フォルダ名に続けて / を入れ、ファイル名を記述します。