カテゴリー: HTML

カテゴリー
HTML

クラスセレクタについて知ろう

この章ではクラスセレクタについて説明します。
セレクタについては学習しましたが、それは「基本セレクタ」という形式で以下の通り書いてきました。116 基本セレクタの他にもクラスセレクタとIDセレクタがありますが、この章ではクラスセレクタを説明していきます。
IDセレクタは次章で説明します。
クラスセレクタはpなどの要素にclass属性によって特定の名前が付けられた時、それに対してスタイルを設定します。
例えば117 と、CSSを設定した場合、HTML文書の中のすべてのp要素の色が青くなってしまいます。
そこで、以下の形式でHTMLの要素に対して118で個別に名前を付けて、その設定した箇所にだけCSSの設定を適用させるのがクラスセレクタの役割です。119 では実際の例を見てみましょう。120 では説明を始めます。
HTMLの中でのクラスの設定箇所は以下の箇所です。
class名にそれぞれ違う名前が付いています。121次にそのクラスに対するCSSの設定方法について説明します。122123 要素名を省略すると同じクラス名であればどの要素でも同じCSSを適用させることが出来ます。
要素名を省略した例はこの章の最後に載せます。
では例について説明します。124 上のようにCSSを設定しているので、p要素のyahoo1にはblueを適用して、p要素のyahoo2にはredが適用されます。125 次は先ほどの例に以下の通りaddressタグを加えます。126 上の例のp要素とaddress要素は同じクラス名を使っていますが、このようにクラス名を同じyahoo1にして、さらにCSSの設定で以下のように要素名を省略した場合にはp要素とaddress要素両方に同じ値を適応させることができます。
この例ではp要素とaddress要素の両方ともblueになります。
yahoo1の前の127は省略できません。128

カテゴリー
HTML

CSSについて知ろう3

この章では3番目の「head要素の中でlink要素を使ってCSSを設定する方法」について説明します。
この方法はCSSを直接HTMLやXHTMLの中に書くのではなく、外部のファイルに記述します。
HTML(XHTML)の中にはCSSの設定自体は書かないのですが、head要素の中にlink要素を書くことによって、CSSの書いてある外部ファイルとリンクさせることが必要になります。
では例をみてみましょう。104105 では基本構文から見てみましょう。106head要素の中にこのlink要素を記述してください。
この例では以下の箇所です。107 rel属性にはこのHTML文書とCSSファイルの関係を指定するのですが、ここには108と書きます。
href属性にはCSSのファイル名、type属性には109を指定します。
次にCSSのファイルを以下のように作成します。110
以下がhref属性に指定した111の中身です。112 このファイルを保存する時の拡張子は113にしてください。
例えばこの例のファイル名は114です。
CSSで指定した通りにHTML文書の色などが変化します。
head要素の中でlink要素を使ってCSSを設定するメリットについて説明します。
〇デザイン部分を担当するCSSが別ファイルに分離されるのでHTML文書がすっきりします。
これは検索エンジンにヒットさせるためには重要なことです。
〇１つのCSSファイルで複数のページのデザインを変更することが出来ます。
ですので、変更もCSSファイルを変更するだけで済むので、作業の効率化を図ることが出来ます。
結果は以下の通りです。115

カテゴリー
HTML

CSSについて知ろう2

この章ではCSSを設定する2番目の方法である「html文書の要素にstyle属性を使ってCSSを設定する方法」について説明します。
(前後のHTMLは省略しています)96
結果は以下の通り、文字が青や赤に変わっていることが確認できます。9798 では例の説明をします。
99のようにp要素の属性にstyleを付けて、その100と101を102で繋いだ形式になります。
この例ではp要素全体を青にして、strongタグの内容である「検索」の文字だけredに設定しています。
一見するとすべてがp要素で指定したblueになりそうですが、インライン要素で103のようにCSSを指定するとインラインの方が優先されます。
また、この例ではプロパティを１つしか指定していませんが、複数設定することができます。
プロパティについてはこの章以降にたくさん学びます。
html文書の要素にstyle属性を使ってCSSを設定する方法はそのページ内でのみの反映となりますので、サイトのリニューアルなどの理由で何ページもあるサイトの共通したデザインを変更しようと思った時にすべてのページで設定を変更しなくてはいけないので大変な作業になってしまうのが欠点です。
次の章では「head要素の中でlink要素を使ってCSSを設定する方法」について説明します。

カテゴリー
HTML

CSSについて知ろう1

この章ではCSSについて説明します。
CSSは76の略語でHTMLやXHTMLの要素をどのように修飾するかを決める機能です。
CSSはスタイルシートとも呼ばれています。
例えばCSSを使うと文字の色を変えたり、文と文の行間の距離を決めることができます。
CSSを設定する方法は3種類あります。
〇 head要素の中でstyle要素を使ってCSSを設定する方法
〇 html文書の要素にstyle属性を使ってCSSを設定する方法。
「CSSについて知ろう2」の章で説明します。
〇 head要素の中でlink要素を使ってCSSを設定する方法。
「CSSについて知ろう3」の章で説明します。
では前から順に説明します。
最初はhead要素の中でstyle要素を使ってCSSを設定する方法について説明します。77
<style>と</style>の間に例えば文字の色を変えたいのであれば78という形式でhead要素の中に書きます。
type属性はそのファイルがどのようなファイルなのかを設定するための属性です。
ここではCSSを設定するので属性値には79と書きます。
詳しくは例の後に説明します。

では実際の例を見てみましょう。
htmlタグから上は省略しています。808182

結果は以下の通りです。

83
では中身の説明をします。

style要素の中に84 と言う記述がありますが、基本構造は以下のようになります。85
では例のCSSについて説明します。86それぞれの場所には専門用語でセレクタ、プロパティ、値と名前が付いていますので、覚えておいてください。
セレクタとはスタイルを適用する範囲のことを指しています。
HTMLやXHTMLのh1などの要素やこれから学習するIDセレクタやクラスセレクタなども指定できます。
プロパティとはCSSを設定する時に決められている書式のことを言います。
例えば、色を変えたいのであればcolorというプロパティを使用します。
他にも背景色を変えるプロパティなどプロパティはたくさんあるので、この章以降で説明していきます。
値はプロパティの設定値です。
例えば87の場合はgreenが値になりますが、色を緑にすると言う意味になります。
つまり、88の意味はhtml文書の中のh1要素を緑色にしてくださいと言う意味になります。
色の指定は英語で指定するred 、blue、yellow、greenの他にもRGBカラーモデルで指定することができます。
例えば以下のように記述します。89
RGBカラーモデルは色の表現法の一種で、赤 、緑 、青 の三つの色を混ぜてより細かな色を作り出すモデルです。
以下にRGBの一部を載せておきますので参考にしてみてください。
サイトでRGBカラーと検索すれば沢山の参考になるサイトがあります。90
この例ではh1の他にもpとaddressにCSSを設定していますので、CSSで設定した通りに色が変化しているのが分かります。91
92以下のようにセレクタを93で区切ればまとめて指定することが出来ます。9495
ですので、１ページにしか使わないデザインをstyle要素で設定するのがいいです。
次の章では「html文書の要素にstyle属性を使ってCSSを設定する方法」について説明します。

カテゴリー
HTML

HTMLでの注意点を知ろう

この章ではHTMLでの注意点について説明します。
71ブロックレベル要素とはHTML文書の構造の枠組を決定するものです。
ブロックレベルの要素の前後には改行が挿入されます。
学習したh要素やp要素はブロック要素です。
インライン要素は、主としてブロックレベル要素の中身に、特定の役割や機能を加える要素です。
上の例で言えば72がインライン要素に当たります。
インライン要素内にインライン要素を入れることはできますが、インライン要素内にブロック要素は入れることが出来ません。
73 このコメントの内容は画面には表示されません。
メモとして使ってください。
74 例えば以下のようにコメントを書きます。
75

カテゴリー
HTML

インデントについて知ろう

この章ではインデントについて説明します。
インデントとはタグの対応関係をわかりやすくするために一部のタグを右にずらす行為のことを言います。
70
headタグの中のtitleタグ、metaタグはheadタグに比べて書き出しの位置が右側にずれていますが、これは自分が見ても人が見ても読みやすくするためです。このように右側にずらすことをインデントと言います。このサイトでは文字サイズを大きくしている関係でインデントを入れている箇所と入れていない箇所があります。
自身が分かるのであればインデントはしなくても問題ありません。

カテゴリー
HTML

HTMLの基礎を知ろう

次の例はHTMLで書いたものです。
紙面の都合上、複数ページにわたって書かれていますが、１つのものです。
詳しい説明は後でしますが、このように「文字」とk300000060366gなどのタグでHTMLは構成されています。
1 23
この例を実行すると以下のように出力されます。
つまり、パソコン画面に表示されるページです。
4
では具体的な説明をしていきます。
5=>ここを説明するためにはXHTMLの知識が必要なので、初めにXHTMLについて説明します。
HTMLと一口に言いましても通常のHTMLとXHTMLは違います。
簡単に言いますとXHTMLはHTMLにXMLという言語仕様を結びつけたものですが、この講座ではXMLについての詳しい説明は必要ありませんので省略します。
つまり、HTMLだけではできないことがたくさんあるので、色々なデータの利用ができるようにHTMLを定義し直したものがXHTMLです。
では1行目の説明に戻ります。
この部分はXML宣言と言いますがXHTMLはXML文章なのでXHTMLで書く時にはこの宣言が必要になります。
しかし、XML宣言があるとinternet Explorer6を使用していた場合、過去互換モード（古い表示モード）に切り替わってしまいトラブルのもとになるので、現状ではXML宣言を記述しないこともあります。
また文字コードが6もしくは
7 の場合はXML宣言を省略することができます。
ちなみにHTMLはXML文章ではありませんので、XML宣言をする必要はありません。

では次の行の説明に入ります。
8=>この部分はDOCTYPE宣言と言いましてHTMLやXHTMLのバージョンをブラウザに伝えるために指定します(紙面の都合上複数行で書いています)。

9

10

11

12

Strictは非推奨のタグや要素や属性を使用する事が出来ません。
非推奨とはこの規格を決めている団体が非推奨にしているタグです。
TransitionalはStrictより緩やかで非推奨のタグや属性も使用出来ます。
Framesetは推奨しないタグや属性やフレームも使用する事が出来ます。
つまりTransitionalに加え、フレームを使用できるようにした指定です。
フレームとは1つの画面に複数の画面を分割して表示させるための機能です。
ヤフーでは
13 を使用しています。
HTMLの場合にはどれを使うか迷った時にはこの型を使用するといいでしょう。

次はタグの基本について説明します。
タグとはhtmlなどの文字が入っている14の部分です。
HTMLの基本はタグの中に「要素名」を記述します。
「要素名」とはhtmlやbodyなど英字のことを言います。

初めの15と終わりの
16はスラッシュが付いているか付いていないかの違いしかありませんが、付いていない15を「開始タグ」、

付いている16を「終了タグ」と言います。

そして、この開始タグと終了タグ、内容を含めた全体を「要素」と呼びます。

19はhtml要素、

20はbody要素、

21はhead要素と呼びます。

meta 要素のように開始タグのみで終了タグが存在しない要素もあります。
このような要素を「空要素」と言います。
22

次はhtmlの構造について説明します。
html要素の間にhead要素、body要素を書くのが基本形です。
23

次はhead要素について説明します。
head要素にはページの基本的な情報を記述します。
例えば、ホームページのタイトルや文書に関する情報を記述します。
タイトルを書くにはタイトルタグである24の間に以下のように書きます。
タイトルタグは必ず書かなくてはいけない要素です。
25
この「title」タグの内容はホームページの上のバーに以下のように表示されます。
この例でのブラウザはgoogleを使用しています。
26

タイトルはホームページをブックマークに登録した際や検索エンジンの検索結果の表示画面にも使われる単語なので、どのような内容のホームページなのかが解るようなタイトルを付けてください。
27

28

次はmeta要素について説明します。
meta要素には文書の基本情報を記述します。
29

31

属性はmeta要素だけではなく、後ほど説明するh1やpなど他の要素にも使うことが出来ます。
ではmeta要素の具体的な説明をしていきます。
32
=>ここではどの文字コードでどんな文書形式で書くのかを伝えています。
スペースの都合で2行で書いていますが、通常は1行で書きます。
http-equivはHTMLのファイル形式や文字コードをブラウザや検索エンジンに伝達する属性です。
http-equivには34を指定します。
この34はサーバーに伝えるHTTPヘッダの情報です（HTTPヘッダの意味は分からなくて結構です）。
contentには34が実際どんな形式であるかを指定します。
この例は通常の文書なので35と書きます。
charsetにはHTMLやXHTMLがどの文字コードで書かれているのかを指定します。
この例では36を指定しています。

37 =>name属性には38が指定してありますが、これは文書の説明を意味します。
contentには文書の具体的な説明を書きます。
name の属性に38を指定することで検索エンジンのメニューにサイトの具体的な内容を表示させることが可能になります。
例えば以下の赤枠の箇所に表示されます。
39 これはサイトの説明文なのでサイトの内容と関係ないことを書いてはいけません。
逆に検索エンジンに検索されたくない場合は、下の記述を付け加えてください。
40 では次に進みます。
41 => name属性の値に42と書き、contentの値に自分のホームページの重要なキーワードを入れます。
ここには検索エンジンにヒットさせるためのキーワードを書きます。
キーワードを複数記述する場合は43で区切ります。
例えば以下のように記述します。
44
注意点は必要以上にキーワードを入れすぎないようにしてください。
例えばグーグルはたくさんのキーワードを入れるとスパムと解釈してるようです。
6個くらいがいいとされています（グーグルが決めることなので詳細は公開されていません）。

この例にはありませんが、その他のmeta要素の使い方を紹介します。
45
=>このように書くことで一定の時間を経過した後に指定したサイトに飛ばすことが出来ます。

http-equiv属性の値には46を書き、content属性の値には何秒後に指定したサイトに飛ばすかを書き、url属性の値には飛ばしたいurlを書きます。この例では５秒後にグーグルのサイトに飛ばしています。

次はbody要素を説明します。
<body>～ </body>の間には、ブラウザに表示させる文章の内容を記述します。
body 要素の中の文は様々なタグを使って書いていきます。
初めにhタグについて説明します。
hタグは見出しを付けるために使用します。

hタグは1から6まであり、h1が一番大きい文字で、h6が一番小さい文字になります。
hタグで囲まれた部分は太字で表示され、前後に１行分の改行が入ります。
以下は上から順番に47までのサイズを示していますが、太字で表示されて、さらに前後に１行分のスペースがあることが確認できます。
h1が一番大きく、h6が一番小さい文字になります。
48
hタグで気を付けるべきことが何点かあります。
〇 h1タグが使えるのは、1ページに1回だけです。
h1以外は制限ありません。

〇 hタグは、h1からh6まで順番に使ってください。
例えばh2の次にh1を持ってきてはいけません。
また、1ページでh1からh6すべて使わなくてもいいです。

次は<p>タグについて説明します。
49

出力結果は次の通りです。
50 pタグは文章に段落を作るために使います。
51で囲まれた部分が１つの段落になります。
そして、52の前後には１行分のスペースが入ります。
pタグの中に<br/>と言う記述がありますが、これはこの位置で改行することを意味しています。
以下のように<br/>を書かないで、文書上だけ改行をしたとしても改行されません。
53
改行したいのならば以下のように54を入れてください。
55
次はstrongタグについて説明します。
56

strongタグは文字を強調したい場合に使用されます。
<strong>で囲まれた文字は太字になります。
<strong>で囲まれた内容は検索エンジンにヒットされやすくなるので、単に文字を強調するのとは意味合いが違います。
次はemタグについて説明します。
57 emタグも文字を強調したい場合に使用されます。
emタグで囲まれた文字は斜体になります。
強調タグはたくさん使いすぎるとスパムと疑われて、検索エンジンの検索結果にヒットされにくくなる可能性がありますので気を付けてください。
ブラウザでの表示結果を見てみましょう。
以下の赤丸で囲まれている箇所が強調してある箇所です。
58
次はaddressタグについて説明します。
59
出力結果は次の通りです。
60

69の使い方としては著作権の表示に使用されたり、例のように住所やホームページのアドレスを書いたりします。
61で囲んだ部分はイタリック体で表示されます。
この例では69の中でホームページのアドレスにリンクを張っているのですが、そのリンクを張るタグについて説明します。
62 リンクを作成するにはaタグを使います。
属性名はhrefであり、その値にはリンク先のURLを記述します。

スペースの都合で例では2行で書いていますが、1行で書いても結構です。
例では以下の部分です。
63
また、64を付け加えることで別窓でリンクを飛ばすことができます。
別窓とは元のサイトはそのままで、もうひとつ別の画面で開いてくれることを言います。
もう一つの<address>タグではメールアドレスにリンクを張っています。
65 例では以下のように記述しています。
66
クリックしたときに、ユーザーのメールソフトが起動し、送信先のメールアドレス入力欄に自動でメールアドレスが入力されます。
67
この例にはありませんが、もうひとつaddressタグの例を示します。
68 =><address>タグに著作権に関する情報を記述することができます。

カテゴリー
HTML

HTMLとは何かを知ろう

これからHTMLについて学習します。
HTMLとはHyper Text Markup Languageの略称であり、文書を記述するためのマークアップ言語を意味します。つまりウェブページなどを作成するために開発された言語です。マークアップとは文書の一部をタグと呼ばれるもので囲むことで、文字の大きさを変えたり、色を変えたり、表を表示したり、他のサイトへリンクを設定することなどを意味します。

HTMLはテキストエディタで書いていきますので「Notepad++」というテキストエディタをインストールしてください。
以下のURLからインストールできます。
http://notepad-plus-plus.org/