HTML/CSS - 大田区から発信するゆるゆる日記

爆速学習のHTML/CSS編です。

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

内容
今後に向けて

内容

Webページの構成

Webページの構成は「箱とテキスト」から成り立っているイメージです。

HTMLとは？

Webページの骨組みを構成するマークアップ言語です。

箱とテキストの存在を示すことができます。

htmlファイルをブラウザ上にドラッグ&ドロップすれば、ブラウザにHTMLが反映されます。

特徴

・左上に重力のある、箱の積み重なり

・入れ子構造になっている(親要素と子要素)

・ブロック要素(箱)とインライン要素(テキストに役割を持たせる)がある

構造

html要素の中に、head要素とbody要素が存在しています。

HTMLの語彙と構文は、標準化団体「W3C（World Wide Web Consortium）」が策定する仕様で定義されています。

重要なのが、HTMLタグの定義です。HTMLタグ内を定義することで、今からどんなことを書いていくのかを示すことができます。

html要素：

HTML文章の始まりと終わりを示している。<!DOCTYPE HTML>を冒頭に記述することで、この文章がHTML文章であることを宣言する。

head要素：

メタ情報(サイト自体に関する情報)を定義する部分。

ここに記載したコードは、ブラウザ内には表示されません。

cssファイルのありか・javascriptファイルのありか・文字に関する情報などを記載する。

body要素：

ここに記載したコードがブラウザ内に表示されます。

HTMLタグ：

要素名が必ず必要です。要素名によって、今から何を書くのかを示すことができます。

場合によって、属性名・属性値の定義も行います。

CSSとは？

Webページの骨組みを装飾するマークアップ言語です。

HTMLで存在を示した箱やテキストの大きさ・色・並び方を指定することができます。

構造

セレクタ・プロパティ・値から成っています。

セレクタは、要素に「id」「class」などの属性値を付与し、その値で要素を特定することもできる。

セレクタは基本的にclassを利用する。

セレクタ：適用する場所

プロパティ：適用すること

値：どのくらい

HTMLがブラウザに表示されるまで

・ブラウザがW3Cの仕様に基づき、HTMLファイルを読み込む

・head要素を解釈して、ブラウザがサーバーにリクエストしてデータを取ってくる

・body要素を解釈して、head要素のデータに基づき目に見える様にブラウザに表示する

用語

UI(ユーザーインターフェース)：

ブラウザ画面のうち、要求したページが表示されるメインウィンドウを除くすべての部分。

ブラウザのユーザーインターフェースは正式な仕様では規定されていません。

どこのブラウザも似た様な仕様になっているのは、決められた仕様があるためではなく、。

◆共通するユーザーインターフェース要素

・URI を入力するためのアドレスバー
・[戻る] ボタンと [進む] ボタン
・ブックマーク機能
・現在のドキュメントを更新するための [更新] ボタン、読み込みを中止するための [中止] ボタン
・ホームページに移動するための [ホーム] ボタン

レンダリングエンジン：

情報(データ)を読み込んで、特定のルールに従い適切な表現に変換する。

HTMLのhead要素に定義されており、これによりHTMLが目に見える形となってブラウザに表示される。

今後に向けて

次はRubyをまとめます！