HTMLとCSSの勉強

HTMLとCSSとJavaScript

HTMLはマークアップ言語であり、機能、役割、意味をあらわします。HTMLは役割や機能をあらわします。CSSはスタイルシートであり、装色、レイアウト、証言を表します。JavaScriptはプログラミング言語であり、その他の機能はHTMLやCSSのすべてに関わることが出来ます

HTMLの文法

HTMLは一つひとつのパーツは要素をつかって表されます。見出しであればh1要素やh2要素、段落であればp要素のというように、HTMLには100種類以上の要素が定められています

HTMLの要素は開始タブ、内容、終了タブで構成されています。また、要素は開始タグに属性を持つことができます。属性はその要素ごとの特別な設定であり、ひとつの要素には属性を複数設定出来ます。この時、各順序に意味はありません。

用語

要素名: 要素自体の名前
属性名: 属性のなまえ
内容名: 開始タグから終了タグの間すべて

CSSの文法

HTMLで記述したパーツはCSSによって装飾、レイアウトします。CSSのプロパティーはHTMLよりさらに多く、文色を変えるにはcolorプロパティー、サイズを変えるにはfont-sizeプロパティーといったようにひとつの要素に対して複数のプロパティーを設定します

CSSの指定（ルールセット）はセレクター、宣言で構成され、宣言は更に複数のプロパティーと値の組合せで構成れます。宣言は先に書いたものが先に適用されますが、後に同じものに対するスタイルが指定された場合、後に指定、上書きされた状態で表示されます。

用語

内容: 開始タグから終了タグの全て
開始タグ: 要素名と0以上の属性の組合せたタグ
終了タグ: 開始タグに対応した要素の終了を表すタグ
セレクター: ルールセットの中に描かれた宣言を決める選択子
宣言: プロパティー名と値の組み合わせ
プロパティー名: プロパティーの名前
値: プロパティーの値

主な HTML要素

HTML要素は100種類以上ありますが、ほとんどはひとつ以上のカテゴリーに分類されます。

ブロック型要素

h1,h2,h3,h4,h5,h6要素: heading 見出しを表す
p要素: paragraph段落を表す
table要素: 表を表す
tr要素: table row 表の行を表す
th要素: table header （cell）表のヘッダーセルをを表す
td要素: table date （cell）表のデータセルを表す
blockquote要素: 引用ブロックを表す
ul要素: unorderd list順番のない箇条書きを表す
ol: ordered list順番付きの箇条書きを表す
li: list item 箇条書きの項目を表す
dl: description list項目名付きの箇条書きを表す
dt: description team項目名付きの箇条書きの項目名を表す
dd: description description項目名付きの箇条書きの項目を表す
header: セクションの前提となる情報（タイトル、作者名、概要分、作成日時）を表す
footer: セクションの補足となる情報（著作権者、連絡先など）を表す

フレーズ型要素

em: 語気の強調
strong: 重要なフレーズ
small: 注釈、補足のフレーズをあらわす
code: コードのフレーズを表す
abbr: 略語を表す。title属性の値で略する前の言葉を表す
img: 画像を挿入する
a: ハイパーリンクを作成

セクションング型要素

section: 文章の節を区切る
article: 記事を投稿する文に囲む
nav: ナビゲーションを使用する
aside: ページと関係のないコンテンツに囲む

主なCSSプロパティー

CSSは最初は100前後のプロパティーがまとめて仕様で決められている巨大な仕様でしたが、現在は機能ごとに分割されたモジュールとして決められています。

レイアウトに関するプロパティー

displayプロパティー

要素の表示の仕方を決める

flex値
block値
inline値
none値

marginプロパティー

外側の余白。margin-leftプロパティーやmargin-rightプロパティーのショートハンド

paddingプロパティー

内側の余白。pading-rightプロパティーやpadding-leftプロパティーのショートハンド

borderプロパティー

枠。border-styleやborder-bottom-widthのショートハンド

widthプロパティー

要素の横幅。display:inline;には設定できない

heightプロパティー

要素の高さ。display:inline;には設定できない

floatプロパティー

後続の要素のコンテンツを回り込ませるために要素をどこによさせるか。

left値
right値
none値

positionプロパティー

ボックスの配置方法を指定

static値
relative値
absolute値
fixed値

inheritプロパティー

親の要素の色や特徴を引き継ぐ

flexboxに関するプロパティー

flex-wrapプロパティー: flexboxの幅がいっぱいになったときどのように折り返すかを決める。普通はwrap値を指定する

背景に関するプロパティー

colorプロパティー

背景に色をつけることが出来る。画像が損失した場合色で補うことが出来る

sizeプロパティー

背景画像のサイズを指定する

auto値
contain値
cover値

centerプロパティー

背景の基準点が中心になる

テキストに関するプロパティー

justifyプロパティー: 最後の行の感覚を基準に前の行をぴっちり埋める
shadowプロパティー: テキストに影をつける。値はx座標、y座標、ぼかしの範囲の順で書く

`display`プロパティーのレイアウトの種類

block要素: インラインとして囲むブロックとして表示

flex値: 柔軟なレイアウト
table値: 表型のレイアウト
grid値: 格子型のレイアウト
none値: 表示させない

inline要素: 行の中に含まれるテキストとして表示

inline-flex値: 柔軟なレイアウト
inline-table値: 表型のレイアウト
inline-grid値: 格子型のレイアウト