|今週の授業 |

10/910/1610/16-210/23

HTML+CSS について

HTML+CSS 鉄則5ヶ条

1. HTMLは「情報のかたち」をコンピュータに示すための言語。
2. CSSは表現方法を指定するための言語。
3. 内容はすべて半角の小文字で書く。
4. ファイル名は半角英数。記号は「_」のみOK。
5. 拡張子はそれぞれ「.html」と「.css」。

HTMLの書式

印=タグ

HTMLでは「情報のかたち」をコンピュータに示すために印をつけますが、その印のことを「タグ」と呼び、印を付けるその内容を「コンテンツ」と呼びます。
タグには様々な種類がありますが、まずその記法をおさえましょう。

印=タグ

タグは「<」と「>」の間にその種類(情報のかたちを示す語句=要素名)を書きます。
印をつけたい部分がコンテンツで、コンテンツを開始タグと終了タグで囲みます。終了タグは「<」の後に「/」を書きます(空要素の場合を除く)。
開始タグと終了タグ、コンテンツを全て含めて「要素」といいます。

開始タグ/終了タグ/コンテンツ/要素の図示

この例では「今日のばんごはん」というコンテンツを大きな見出しとして印を付けたいので、<h1>という開始タグと</h1>という終了タグで囲いました。 この「<h1>今日のばんごはん</h1>」すべてを「h1要素」のようにいいます。

html要素と文書型宣言

HTMLファイルの全ての要素は「html要素」の中に配置します。
ただし、html要素の前に準拠するHTMLのバージョンに従って文書型宣言を記述しておく必要があります。この授業では「XHTML1.0 Tranditional」に準拠します。

head要素とbody要素

html要素は大きくわけて「head要素」と「body要素」の2つのパートに分かれます。本に例えるなら、head要素は本の表紙や帯、body要素は本のなかみそのものです。

1.head要素
そのHTML文書のタイトルやサマリーなどの文書に関するメタ情報で、ウィンドウには表示されない。

2. body要素
そのHTML文書の本文で、全てウィンドウに表示される。

要素の親子関係

ある一定のルールに基づいて、要素の開始タグと終了タグの間に別の要素を含み、入れ子関係にすることができます。

要素の親子関係をあらわす図

この例ではp要素は「親要素」、p要素に含まれたem要素はp要素の「子要素」といいます。先に説明したhead要素やbody要素もhtml要素に含むわけですからhtml要素の子要素です。

HTMLの基本要素

head要素

body要素

空要素

br要素やimg要素などは「ここから」も「ここまで」もなくコンテンツを持たないため空要素といいます。
コンテンツがないので開始タグと終了タグの関係も例外的に「開始終了タグ」として省略して「<br />」(brと/の間の半角スペースに注意!)のように表記します。

属性

各要素にさらに詳しく情報のかたちを示すときには「属性」と呼ばれる付加情報を指定することができます。
属性は、要素の開始タグに「属性名="値"」の形式で記述します。複数の属性を指定する場合には半角スペースで区切って記述します。

属性の指定法の図

CSSの本分

着せ替えをするように

CSS(=Cascading Style Sheet)は、情報のかたちを示したHTML文書の表現方法を指定するための言語です。
普段わたしたちはコンピュータの画面にブラウザが表示するウェブページの内容を視覚で捉えますが、その場合はスクリーンブラウザ用のスタイルシートの指示に従って表示されたものを見ていることになります。
スタイルシートには3種類あり、ひとつは(今見ているページのように)ウェブページを制作した人の用意したスタイルシート、もうひとつはページを閲覧するユーザが用意したスタイルシート、最後にブラウザがデフォルトで持っているスタイルシートです。
第3回授業で展覧会のDMの情報をマークアップしたものをブラウザで表示させた時、特にスタイルシートを用意していなかったのに見出しは見出しとして、リストは項目ごとに「・」が表示されていました。これはブラウザのデフォルトスタイルシートの表示方法の指示に従った結果です。

ウェブページはコンピュータの画面にブラウザで表示させる以外にも、多くの閲覧方法があります。
例えばコンピュータの画面ではなくウェブページを印刷して紙で見る方法、目の不自由な方が利用する音声読み上げブラウザ(ボイスブラウザ)で読み上げる方法、PDA や携帯電話などのモバイル端末に表示させて見る方法など、その方法や環境は多岐にわたります。

想定されるユーザーの閲覧方法や環境に応じてhtmlの表現方法を着せ替えをするかのように区別して指定することができるのがCSSです。

CSSの書式

おまじないをかける(着替の服を着せる)=HTMLとCSSをつなぐ

HTMLファイルのlink要素に作成したスタイルシートファイルの在り処を示すと、その内容が指定されたスタイルシートファイルの指示に従ってページを表示します。

この部分はこれを、こう。

CSSは基本的に次のような書式で記述します。

CSSの書式の図

この例ではh1要素としてマークアップされているコンテンツの文字の大きさを14pxという大きさで表示せよ、と指示しています。
「セレクタ」はスタイルを適用する対象を示します。基本的には要素名を指定します。「プロパティ」はスタイルの種類、「値」はその内容を示します。
「プロパティ:値;プロパティ:値;」のように複数のスタイル指定をすることもできます。またセレクタを「,」で区切って複数のセレクタに対して同じスタイルを指定することもできます。

色の表し方

ウェブにおける色の指定は、光の3原色であるRBGを0からfまでの16段階の数値(16進数)で表します。
光が点いていない状態を0、最も輝度の高い状態をfで表します。

ボックス

各要素はボックスと呼ばれる四角い領域を持ちます。この領域の幅と高さはwidthプロパティとheightプロパティで指定することができます。
ボックスは「コンテンツ」「マージン」「パディング」「ボーダー」の4つの部分からなります。

ボックス

ウェブで扱える画像の種類

img 要素として扱うことが出来るファイルフォーマットは以下の3種類です。

inserted by FC2 system