HTML

＜!DOCTYPE>

Published by:

HTMLは進化し続ける言語で現時点でも進化過程にあります。

大きく仕様変更されるたびにバージョンが変わりますが，現時点での最新版はHTML5（バージョン５）になります。

 

ブラウザの方ではHTMLのどのバージョンかが分からないと意図とは異なる動作になるので区別したいところです。

で，ブラウザではHTMLタグの前の<!DOCTYPE>というタグを見てHTMLのバージョンを判断しています。

 

以前のバージョン（例ではHTML4.01）だと，

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

みたいに長々と書いていましたが，これからはHTML5の時代です。

HTML5の仕様に合うようブラウザ側が機能を追加していっていますから，もうHTML5前提でいいかもしれません。

ただ，現時点ではHTML5の仕様を完全に反映したブラウザは無いと言ってもいいくらいなので，いくつかのブラウザで動作検証するのが無難です。

 

では，HTML5の場合の<!DOCTYPE>はどう書くのか。

<!DOCTYPE html>

こうです。そう，これだけ。大文字小文字は区別されないのでどちらでも大丈夫です。

これを先頭に書いていないと前述の通りHTMLやCSSの動作が異なる事になります。

これまでの例では特に書いていませんでしたが，決まり事として覚えておいてください。

 

今日のまとめ：

HTML5の文法で書くファイルの先頭には

<!DOCTYPE html>

とDOCTYPE宣言する事！

 

HTML

スタイルシートの適用について

Published by:

「class属性の適用」の回で課題とした件はどうだったでしょうか？

 

class属性が指定したスタイルシートにstyle属性で指定したスタイルシートが重複する場合です。

たとえば，

<p class=”red” style=”color:blue”>XXXX</p>

この場合，XXXXは青文字になります。class属性が示すスタイルシートは赤文字を指定していてもです。

 

つまりこういう事になります。

class属性で示すスタイルシートは複数のタグに対して指定される事があり得ます。

それに対してstyle属性での指定はその部分の固有のスタイルとなります。

この場合，個別の指定の方が優先される事になっているのです。

 

これは同じようにタグに指定したclassに関しても言える事で，たとえば

<body style=”color:red”>

<p style=”color:blue”>XXXX</p>

</body>

だと，pタグに指定の青色が適用される事になります。

 

これを理解しているとザックリ指定して望む部分だけ微調整を行なうという指定ができますね。

 

今日のまとめ：

 

スタイルシートの指定は適用範囲が狭いものが優先される。

 

 

HTML

外部スタイルシートの書き方

Published by:

スタイルシートの書き方を2種類挙げさせて頂きました。

一つは

<タグ style=”AAAA:BBB”>XXXX</タグ>

とする方法，

もう一つは

head部に

<style type=”text/css“>

p {

プロパティー:値;

プロパティー:値;

}

</style>

とする方法です。今日はさらに別の方法を。これが一番お勧めです。

head部に

<link href=”./style.css” rel=”stylesheet” type=”text/css”>

と記載します。そして，style.cssというファイルに以下のように記載します。

p {

background-color: red;

text-align:center;

}

と以前はhead要素内に直接記載していたのを外部ファイルstyle.cssに記載します。

これでp要素には上述のスタイルシートが適用されます。

 

この方法の利点の一つは同じスタイルシートを複数のhtmlファイルに流用できることろです。

何十ページもあるhtmlファイルのheadに同じような記述をしないで同じcssファイルを指定するだけで済みます。

 

今日のまとめ：

 

外部スタイルシートの指定はhead部に

<link href=”ファイル名” rel=”stylesheet” type=”text/css”>

と書く。

 

HTML

class属性の適用

Published by:

先回の課題の答え合わせをしておきましょう。

まずはtest.htmlの中身を再掲します。

<html>
<head>
<title>ｐのCSS設定</title>
<style type=”text/css”>
.red {
color:red;
text-align:center;
}
</style>
</head>
<body>
これは<p class=”red”>赤文字</p>です<br>
<p>これも赤文字です？</p>
</body>
</html>

 

さて，保存してブラウザで開くとどうなるでしょうか？

css3

そう，bodyの中身の1行目はclass属性が”red”なので赤文字でセンタリングされます。

一方，次のp要素はclass属性が指定されていませんので何のスタイルも適用されません。

 

同じタグすべてに同じスタイルを適用させる事もありますが，どちらかというとそれは稀です。

たとえば画像はすべて同じサイズで表示させるというような場合はタグ指定でもいいのかもしれません。

でも，例外が一つでも発生すると－たとえば説明のためにサイズの異なる画像を一つでも加えると－困った事になります。それで，最初からタグでは無くclassを宣言しておくようにするのです。

 

そうすれば例外が発生してもその画像だけ別のclassとすればいいだけですから。

 

では，class属性で宣言したのとstyle属性での宣言が重複したらどうなるでしょう？

 

たとえば”red”というclassは上述のままとして

<p class=”red” style=”color:blue”>XXXX</p>

や

<p  style=”color:blue”class=”red”>XXXX</p>

これだとエラーになるのでしょうか？あるいは上と下で結果が異なるのでしょうか？

是非，試してみて下さい。

 

今日のまとめ：

スタイルシート適用のためにタグにはclass指定をしておくのが無難

 

HTML

class属性について

Published by:

スタイルシートを使ってみてかゆいところに手が届かない事に気付いたでしょうか？

 

たとえば同じpタグ全部ではなく一つだけ色を変えたい場合にどうすればいいのでしょう。

そこだけpタグを使って他はbrタグで回避？それは面倒です。

そんな時に使いたいのがclass属性です。

というよりもそんな時のためのclass属性と言っても過言ではありません。

属性なのでタグに付随します。書き方はこんな感じ。

<p class=”red”>XXXXX</p>

このpタグのclass属性は”red”ですと定義するわけです。

そして，スタイルシートの方は

.red {

color:red;

text-align:center;

}

みたいにします。最初の「.」ピリオドを忘れないように。

このピリオドで始まるスタイルシートの指定がこの名前のclassに適用するスタイルという意味です。

では，以下はどうなるでしょう？

<html>
<head>
<title>ｐのCSS設定</title>
<style type=”text/css”>
.red {
color:red;
text-align:center;
}
</style>
</head>
<body>
これは<p class=”red”>赤文字</p>です<br>
<p>これも赤文字です？</p>
</body>
</html>

 

回答は次回にします。予想通りになるでしょうか？

 

今日のまとめ：

 

特定のclass属性（AAA）に適用するスタイルシートの書き方は

.AAA {

BBB:CCC;

DDD:EEE;

}

 

HTML

スタイルシートの書き方

Published by:

スタイルシートの書き方は大きく3通りあります。

一つは既に説明したstyle属性として記載する方法。

この方法はHTMLのソースのその部分を見ればどんなstyleなのか一目瞭然である一方でいくつものプロパティーを指定する場合に見づらいという欠点もあります。

 

別の書き方を紹介します。

それがstyle要素です。そう，属性では無くstyleタグを使います。

記入位置はhead要素内で書き方は以下の通り。

<style type=”text/css“>

p {

color:red;

text-align:center;

}

</style>

まず，styleタグの属性typeはこれをそのまま使うと覚えて下さい。type=”text/css”テキストのスタイルシートですという事を示します。

次に上記の例ではpはpタグのことです。

この書き方の場合，HTMLソースに出てくるすべてのpタグに適用されます。

そして，{から}までにstyle属性に記していたプロパティーと値を列挙します。

上記のようにプロパティー毎に改行しておくとどんなstyleを適用するのか分かり易いですね。

 

では，試しにHTMLファイルを作成してみましょう。名前はいつものようにtest.htmlです。

<html>
<head>
<title>ｐのCSS設定</title>
<style type=”text/css”>
p {
color:red;
text-align:center;
}
</style>
</head>
<body>
これは<p>赤文字</p>です<br>
<p>これも赤文字です</p>
</body>
</html>

 

さあ，ブラウザで開く前にどんな表示になるか想像してみましょう。

css2

p要素の部分だけがセンタリングされ赤文字になっているのが確認できましたか？

これを応用してbodyタグのstyleを設定すれば一度にHTML全体のstyle設定が可能ですね。

 

今日のまとめ：

 

CSSの記載方法その２はhead要素内に

<style type=”text/css“>

p {

プロパティー:値;

プロパティー:値;

}

</style>

 

HTML

様々なスタイルシート

Published by:

文字色を赤にするスタイルシートは先回示した通りです。

他にも色々な指定が可能です。書式は以下の通り。

<タグ style=”aaaa:bbbb;cccc:dddd;eeee:ffff;・・・・”>XXXX</タグ>

:コロンと;セミコロンの区別を間違えないようご注意ください。

上記の場合，aaaaをbbbbにする，ccccをddddにする，eeeeをffffにするという感じです。

先回の文字色を赤だとcolor:redでしたね。

そのような指定を上記の書式で複数記述可能です。そう，いくつでも可能なのです。

 

代表的なスタイルシートのいくつかを以下に挙げてみます。

:の左側をスタイルシートのプロパティー，右側を値と表現します。

 

text-align:center;  ==>文字配置を左右の中央に

background-color:blue;  ==>背景色を青に

border:solid 1px blue;  ==>青の幅1pxの罫線を付与

font-size:15px;  ==>フォントサイズを12pxに

left:200px;  ==>左位置を200pxに

width:150px  ==>幅を150pxに

 

まだまだあります。そうここでは書ききれない程に。

CSSとかスタイルシートなどで検索すると色々出てくると思います。

特定のプロパティーは特定のタグにしか使えないという点です。

たとえば，

<title style=”width:150px”>見出し</title>

としても意味をなしません。一方，

<img src=”aaa.png” style=”width:150px” />

とすると，画像aaa.pngを150pxの幅で表示してくれます。

 

さあ，ここまで分かると随分Webデザインの幅が広がるんじゃないでしょうか？

 

今日のまとめ：

 

スタイルシートの書式は

style=”aaa:bbb;ccc:ddd;・・・”

といくつでも続けてかける。

 

HTML

スタイルシートについて

Published by:

これまでHTMLのタグについていくつか見て来ました。

でも，今のところデザインやレイアウトに関係しそうなのはimgタグやbrタグくらいです。

 

たとえば，文字の色を赤と指定したり，センタリング（中央に表示）などは出て来ていません。

HTMLも時代とともに変化して来ましたが，最近の基本的な方針として次のようなものがあります。

◆　HTMLのタグでは何を表示するかだけ指定

◆　デザインはCSSで指定する

という流れです。何もかも一緒にするよりはっきり分かれている方が便利なのです。

たとえば，あるサイトの文字の色を全部青にしたい時，全部のタグの属性で文字の色が青というのを指定していくのは大変なのは想像がつくと思います。でも，サイトではとりあえず文字の色は青です，と指定できれば他の色にしたい時にも変更が楽ですよね。

 

突然CSSとか聞いた事がない略号が出て来て戸惑ったかもしれません。

CSS(Cascading Style Sheets)です。

このcascadingは階段状に流れる滝みたいな意味があるらしいStyle Sheet(スタイルシート)は

スタイルは姿，格好でシートは一枚の紙やシーツのような布の事です。

どうイメージするかが難しいですが，表示の仕方（見栄え）を指定する書式という感じです。

 

とりあえず今日は一つだけ基本的な書き方の一つを紹介します。

<body>

これは<p style=”color:red”>赤文字</p>です

</body>

colorのあとは:（コロン）です。=ではありませんのでご注意ください。

前後を省略しましたがこれを組み込んだHTMLファイルをブラウザで開くと，

stylered

「赤文字」が段落を意味するpタグで囲まれているため前後で改行します。

が，pタグに属性名styleが追加されていますね。

これがこのタグに付与するスタイルシートの記載になります。

内容がcolor:redで色を赤にという意味になるので上記のような表示になるんですね。

 

次回は別のスタイルについても勉強しましょう。

 

今日のまとめ：

 

CSS（スタイルシート）の指定はstyle属性を用いて

style=”color:red”

のようにする。

 

HTML

Webサーバへのアップロード

Published by:

さて，HTMLの書式に慣れてきたものの「いつになったら公開できるの？」と気がはやっているかもしれません。

 

公開するからには責任を伴うのでいい加減なサイトではどうかとも思いますが，いつまでもデスクトップのファイルをブラウザ表示するだけでは物足りないでしょう。

多くのプロバイダーがメールとともに無料のホームページスペースを提供しているのでそれを利用する手もあります。

それがよく分からないという人やパソコンを使えるのは学校や職場にいる時だけという人には無料のWebサーバでお試しをお勧めします。

色々あるのでどれでもいいのですが，たとえば左のリンクで紹介されている中からFC2で登録したとしましょう。

公式サイトはこちら

登録時に色々迷うところがあるでしょうが，とにかく料金が発生しないように注意して登録してください。

（費用を惜しまない方なら別にいいんですけど，費用がかかったのでとクレーム来ても困るので；）

登録すると以下の画面になります。

fc2

赤で囲んだのがWebサイトのアドレスで，青で囲んだのがhtmlファイルアップロード（公開）するための画面へのリンクです。

その青で囲んだ部分をクリックするとアップロード用の以下のようなページに切り替わります。

fc2up

説明にある通り，作成したhtmlファイルを上の領域（index.htmlがあるあたり）にドラッグしてドロップすると（ファイルを左クリックでつかんだまま移動させて左クリックを離すと）以下のようになります。

fc2up2

どうですか？test.htmlを追加できましたか？

これでtest.htmlはあなたのパソコンの中から公開できるWebサーバの中へ移動しました。

（厳密には移動と言うよりコピーです）

では，本当に公開されているのでしょうか？

先ほどのWebサイトのアドレスがありましたね。そう，赤で囲まれていたところのhttp://kisoweb.web.fc2.com。

あれは私が作成したテスト用のアドレスなので，あなたが作成したアドレスを参照してください。

ブラウザの一番上のアドレスのところに，

作成したWebサイトのアドレス/test.html

と入力してEnterを押してみてください。（例ではhttp://kisoweb.web.fc2.com/test.html）

 

いかがですか？test.htmlが表示されましたか？

404Error – Page not foundみたいになる人はアドレスの入力が誤っています。

test

少し前のtest.htmlですが，こんな感じで表示されれば正しく公開されています。

入力した覚えのない「Powered by FC2ホームページ」の文字はFC2が表示させている宣伝です。

無料なので宣伝くらいさせてあげてください。

 

これで，世界中の誰もが閲覧できるWebサイトを構築できたのです。

感動しません？

 

今日のまとめ：

htmlファイルをWebサイトにアップロードすると世界中から閲覧可能になる

アップロードしたファイルの閲覧方法

与えられたWebサイトのアドレス/XXXX.html

 

 

HTML

画像のリンク

Published by:

先回に続けてa要素の応用編（というほどでもないか）です。

 

文字の代わりに画像をクリックしたら別のサイトを開くという課題はできましたか？

画像はライセンス上問題のないものを探しましょう。

フリート書いてあっても，著作表示してくださいなど細かな指定があったりするので要注意です。

今回は以下のサイトで探したアイコンを使います。

http://designsozai.com/

以下の画像を保存（ブラウザによりますが画像で右クリックで保存メニューが出るかも）しました。

32px_gift_001_e-trans

そのままダウンロードするとファイル名が32px_gift_001_e-trans.pngですね（32pxの場合）。

画像ファイルはデスクトップなどhtmlと同じ場所に配置して下さい。

課題の回答は以下の通りです。

<html>
<head><title>リンクのテスト</title></head>
<body>
リンクのテストを行ないます<br>
test.htmlを開くには<a href=”test.html”><img src=”32px_gift_001_e-trans.png” /></a>をクリック<br>
うまく表示できましたか？<br>
</body>
</html>

 

ブラウザでtest2.htmlを開くと以下のようになります。

link2

アイコンをクリックしてtest.htmlに切り替わる事を確認してみてください。

 

今日のまとめ：

 

画像でのリンクもできる。