HTMLについて学習したものをまとめる。
今後、新たに学習したものも追記すること。
■タグ
以下のように開始タグと終了タグを囲うことで見出しやリンクを作成可能。タグを付ける際、tabを押すと自動補完される。
また、タグで囲い込んだ単位を要素という。
指定がなければ格要素は縦に並んで表示される。
例)
<h1>見出し</h1>
○タグの種類
・見出し
<h1></h1>で囲む。headingの略。
数字が大きほど見出しの文字は小さくなる。
・段落
<p></p>で囲む。paragraphの略。
見出し以外の小さい文などはこのタグを使う場合が多い。
・コメントアウト
<!--><-->で表記。
・リンク
<a></a>で囲む。囲まれた文字がリンクとして表示される。
<a href="https//~~~">文字列</a>でリンク先URLにとべるようになる。
タグ内にあるhrefのようなものを属性という。
・画像
<img src="https//~~~">でリンク先の画像を表示できる。
テキストを表示させるわけではないので終了タグは無し。
・リスト
以下のようにリストにしたい文字をliで囲み、liタグをulタグで囲む。
また、ulのように要素を囲む要素を親要素、囲まれる方を子要素という。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
・文字指定
文中の特定文字のみ指定して個別に設定したい場合、以下のようにspanで囲む。
<h1>
ここの<span>特定文字</span>だけ指定
</h1>
・改行
特定部分を改行したい場合、以下のようにbrで囲む。
<h1>
ここの<br>特定文字</br>だけ改行
</h1>
・グループ分け
それぞれの要素をグループで分けたい場合、以下のように囲む。
class属性をつけて設定する場合が多い。
下の場合、header全体にCSSなどを設定したい場合、headerクラスをCSSで指定する。
header-logoのみの場合、header-logoクラスをCSSで指定する。
<div class="header">
<div class="header-logo"></div>
</div>
<div class="main">
</div>
<div class="footer">
</div>
・テキスト入力を受け取る
以下のように１行のみはinput、複数行はtextareaで指定する。
type属性を追加すると送信ボタン、そこからvalue属性を追加すると
ボタンに表示される文字を変更できる。
<input type="submit" value="保存">
<textarea>
■要素
○インライン要素とブロック要素
インライン要素とは行の一部として要素内にある要素。他の要素と同じ行に配置され、
幅や高さの設定をしても変更されない。
行の中で連続したまとまりとしてカウントされるため改行もされない。
例)<a>,<span>など
ブロック要素とは行全体としてある要素。１つの塊として全体の構造を作る。
インライン/ブロックを問わず、要素の中に要素を含むことができる。
例)<div>,<p>など
■属性
<a href="https//~~~"></a>のようにタグ内に属性を入れることで
指定した要素のみを個別にカスタマイズして設定できるものを属性という。
以下を忘れないようにする。
①必ずタグの後ろに半角スペースを入れること
②属性の後ろは=""で囲むこと
③属性と=""の間はスペースを開けないこと
○属性の種類
・class
特定の要素のみにCSSで設定を入れたい場合はclassでタグに名前をつけ、指定する。
・href
リンク先を指定。詳細は前述参照。
・btn
ボタン。"btn ✖️✖️"のように✖️✖️の部分にボタン内で表示される文字を指定する。
・fa
フォントオーサム。アイコンを追加できる機能。
"fa ✖️✖️"のように✖️✖️の部分に追加するアイコンを指定する。
・type属性
■全体構造
全体のHTMLは以下のように記述する。これで1つのWebページになる。
詳細は後述。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
○!DOCTYPE html
HTMLのバージョン宣誓
○head
Webページに関する設定を記述。Webページに表示されない。
指定するものは以下３つ。
・文字コード
以下のように指定。HTMLではUTF-8推奨。
<meta charset="utf-8">
・ページタイトル
以下のように指定。ブラウザのタブに表示される。
<title>タイトル</title>
・読み込みファイルの指定
CSSの場合、以下のように指定。
<link rel="stylesheet" href="CSSのファイル名">
○body
Webページに表示されるものを記述する。
コンテンツのコアの部分。詳細はレイアウトで記載する。
■レイアウト
bodyでWebページに表示されるコンテンツはヘッダー、メイン、フッターの
３つで構成される。
それぞれの構成をdiv要素でグループ分けする。