HTMLとCSSはコンビです。
・HTML HyperText Markup Language
ウェブサイトに表示される情報を記載するもの。
ファイル名は 〇〇.html になります。
・CSS Cascading Style Sheets
HTMLに記載された情報を装飾するもの。
ファイル名は 〇〇.css になります。
・タグ HTMLにおける要素のかたまりを示す。
開始タグと終了タグ で括る。
上下でも左右でも括れるが、上下の場合は高さを揃える。
どのタグで括られるかでタグの中身の役割が変わる。
基本的な記述を解説します。
ファイル名 sample.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLとCSSはコンビです</title>
<link rel="stylesheet" href="〇〇.css">
</head>
<body>
<h1>
ここは見出しです。
</h1>
<p>
一段目です
</p>
<p>
二段目です
</p>
<p>
三段目です。<b>この部分は太字になります。</b>
</p>
</body>
</html>・<!DOCTYPE HTML>
HTML文章であることを宣言する要素です。閉じタグはありません。
必ず記載する程度の認識で。
・<html></html>
HTML文章の始まりと終わりを示します。
・<head></head>
ウェブサイトの情報や、参照CSSファイルを記載する部分になります。
ここに記述した情報は画面上には表示されません。
・<meta>
文章に関する情報を指定する時に使用します。閉じタグはありません。charset="UTF-8"は文字コードを指定するもので、文字化けを防ぎます。
・<title></title>
タイトルを記述する場所。ウェブサイトの画面上には表示されません。Googleでの検索結果や、ブラウザのタブに表示されます。
・<link rel="stylesheet" href="〇〇.css">
対応するCSSファイルを指定します。
hrefには実際のファイル名を記載します。
relは「relation（関係）」の略。
・<body></body>
HTML文章の始まりと終わりを示します
・<h1></h1> 見出しと判断されて文字が太く大きく表示されます。
h6まであり数字をあげるごとに見出しが小さくなる。
・<p></p> 文章の段落を表します。
・<b></b> 囲まれている部分だけ太字になります。
・ブロックレベル要素
ウェブデザインにおける箱となる要素の事をいいます。
<h1></h1>や<p></p>はブロックレベル要素です
・インライン要素
箱にはならず、主に文字の修飾などに使われる。
<b>...</b>はインライン要素です。
よく扱うタグ一覧
ブロックレベル要素
header ページのヘッダー部分を指します
footer ページのフッター部分を指します
section Webページのセクションを指します
div Webサイトのレイアウトを作成する際に使用します
table 表を作成する際に使用します
p 段落を表す時に使用します
li リストの項目を作成する際に使用します
h1~h6 見出しを作成する際に使用します
インライン要素
a リンクを作成する際に使用します
b 文字を太文字にする際に使用します
img 画像を埋め込む際に使用します
small フッターで著作権表記などの注釈を表示するために使用します
span 文字の装飾で多く使用、div要素と同じで特定の意味を持たない
・class属性
要素をグループ分けして個別に名前を付けることができる機能です。
1つのHTMLファイルに複数存在して良い。
<h1 class="red">redと名前をつけました。</h1>・id属性
要素に固有の名前を付ける。1つのHTMLファイルに1つ。
特に注目してもらいたい要素にid属性を使うようなイメージ。
<h1 id="first-message">first-messageという名の見出しです</h1>