こんにちは。まめ子です。
昨日の続きです。『HTML&CSS初級編』の学習メモ②です。
HTMLの全体構造
<! DoTIYE html＞ ←htmlバーションを指定する（というルール）
＜html>
<head>
</head>
<body>
<h1＞子育て主婦の出直し家計塾とは<h1>
</body>
</html>
※ブラウザに表示されるのは、<body></body>の内容のみ
<head＞の要素
headの３要素：①文字コード指定、②ベージタイトルの設定、③CSSの読み込み
①文字コードの指定
文字コードを指定することで、ページの文字化けを防ぐ
<meta charset ="utf-8"> ※utf-8は、HTML5で推奨されているコード
②ページタイトル
<title></title>で囲む
③CSSの読み込み
<link rel ="styleshiit">を使う。
例）<link rel ="stylesheet" href = "stylesheet.css">
<div>
<div></div>で囲った部分をブロックレベル要素としてグループ化できる。
例）
<div class="header"> ←ヘッダー要素の<div>
</div>
<div class="main"> ←メイン要素の<div>
</div>
<div class="footer"> ←フッター要素の<div>
</div>
ヘッダーの中身を横並びにする
HTMLで書いた要素は基本的に縦に並ぶ。横並びにするには、CSSに、「float:left」を追記。
ヘッダー余白の調整
余白を作る時は、「padding：数字px；」。ある方向にのみ余白を作りたい時は、
上「padding-top:数字px;」
下「padding-bottom:数字px;」
左「padding-left:数字px;」
右「padding-right:数字px;」
例）
logo1{
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
padding-left:20px;
}
↓上記を省略して記載することも可能。
省略１）
logo1{
padding:20px,10px,20px,10px;
}
※ 時計回り（top,right,bottom,left）の順に指定
省略2）
logo1{
padding:20px,10px;
}
※ 左から上下（top,bottom）左右（right,left）の順に指定
mainの構造（要素）
mainは、①copy-container（上部）、②contents、③contact-form（下部）で構成されている。
ブロック要素とインライン要素
○ブロック要素：改行される要素 例）<div><h1><p>
○インライン要素：改行されない要素 例）<span><a>
ボーダー（枠線）のつけ方
border:数字px solid red;
※数字pxで太さ、solidは線の種類、redは色（カラーコード）。
特定の方向にのみ線を線をつける場合は、「border-bottom:数字px solid red;」のように、borderの後を追記。
paddingとmarginの違い
○padding：border（ボーダー）の内側に余白
○margin：border（ボーダー）の外側に余白
問い合わせフォーム（入力欄）の作り方
<input>１行のテキスト入力を受けるための要素。終了タグは不要。
<textarea>複数行のテキスト入力を受けるための要素。
例）
<form>
<p>input要素</p>
<input>
<p>textarea要素</p>
<textarea></textarea>
</form>
送信ボタンの作り方
<input>はtype属性を指定でき、type属性にsubmitを指定すると『送信』ボタンとなる。
例）<input type="submit" value="保存"＞
※valueの属性には任意の値を指定可能。例えば、"保存”とすることで、『保存』ボタンとなる。
以上、なんとか、Progate『HTML&CSS初級編』終わりました〜！ど素人な上、覚えが早いわけではないので、５〜６時間ぐらいかかったかな。（Progateでの演習時間です。ブログの記事作成時間は除きます。）
焦っても仕方ないので、「マイペース！」を合言葉に自分のペースで進めていきたいと思います。
明日からは、『HTML&CSS中級編』にチャレンジします。
