ProgateのHTML初級編のまとめ

2021年12月16日 23:43

【HTML】

🌟見出し　<h1></h1>
→数字が大きくなるほど文字の大きさは小さくなる、h6まで
🌟段落　<p></p>
→囲むたびに改行される。見出し以外の文で使う
※コメントを残す時はとするとブラウザに表示されない
🌟リンク作成　<a href="URL">文字</a>
→文字をクリックするとリンク先に飛ぶ
🌟画像表示　<img src="画像のURL">
🌟リスト作成　
→<ul></ul>(親要素)で<li></li>(子要素)を囲むと黒点がついた箇条書き、<ol></ol>で囲むと数字が連番でつく
→CSSでlist-style:none;にするとリストのマークを無くせる
※親子関係はインデントすると見やすい

📖基本の型
<!DOCTYPE html>→HTMLのバージョン指定
<html>
<head>
ページに関する情報(表示されない)
</head>
<body>
実際に表示したい内容
</body>
</html>

📖<head>の中身
①文字コードの指定(文字化け防止)
②<title>タイトル名</title>→ページのタイトルでブラウザのタブに表示
③CSSの読み込み
①と③は覚えなくて良さそう

🌟<div class="クラス名">要素</div>
→要素をグループ化、大まかにはheader、main、footer

📖main要素はcopy-container、contents、contact-formクラスで構成
📖ブロック要素→前後で改行が入り、親要素の幅一杯に広がる要素
インライン要素→改行されない

🌟<input>
→1行のテキスト入力、type="属性"と属性を指定できて、submitにすると送信ボタンになる。value属性ではボタンに表示されるテキストを変更できる。
🌟<textarea></textarea>
→複数行のテキスト入力

【CSS】

📖要素名(セレクタ)｛
指定したいプロパティを記述
｝
で囲む
※コメントを残す時は/コメント/とする

🌟文字の色
→ color:色の英語かカラーコード;
🌟文字の大きさ
→font-size:○px;
🌟文字の種類
→font-family:フォント名;
(フォント名にスペースあるときは""で囲む)
🌟背景色
→background-color :色の英語かカラーコード;
🌟横幅、高さ
→width :○px;
height :○px;

🌟同要素で複数タグある時に特定の要素だけ変えたい時は、HTMLタグ内にclass="クラス名"を加える。複数の要素に同じclassをつけたら、その全てに同じCSSが適用される。
CSSでは
.クラス名｛
｝と最初にドットをつける。
※id="id名"はページに１つしか使えない。CSSは#id名｛｝と表記。基本的にはclassの方を使う

⚠️タグには最初に何もつけず、クラスにはドットをつける

🌟float:left(right);
→要素が左(右)から順に並ぶ
🌟要素に余白
→padding:値;
padding-top(right、bottom、left)
①全部書く
②省略して値だけ上から順に時計回り表記
③省略して値だけ上下、左右表記
値を区切る時は半スペ入れる、ボーダーの内側
→margin:値;
表記はpaddingと同じで、ボーダーの外側

📖入れ子のセレクタ
→.クラス名　要素｛｝にすることで、クラス名の子要素である要素にだけ適用できる

🌟<span>文中の一部の文字</span>
→その部分だけCSS適用
🌟border:太さ種類色;
→特定の場所にしたい時はborder-方向にする

📖複数のセレクタに同じCSS適用させる時はコンマ(,)で区切る

この記事が気に入ったらサポートをしてみませんか？