プログラミングのお勉強：006日目
勉強したこと
HTML&CSS初級コース復習終わり。以下メモ
------------------
HTMLとは
-----------------
■タグ
<*>開始タグ </*>終了タグ
タグの中に入れた*は「要素」
テキストをタグで囲んで「要素」の意味を付与
要素を要素で囲む入れ子構造が基本
例：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
前後で改行が入り、親要素の幅一杯に広がる要素 ブロック要素
<div> <h1> <p>
改行されない要素 インライン要素
<a> <span>
ボックスモデル
HTMLの全ての要素には、borderがあり、その外側の余白はmargin, 内側の余白はpadding
・<h1><h2>…<h6> 見出し headingの略
・<p> 段落 paragraphの略
・<!--ここにコメント --> コメント ブラウザに表示されない
・<a> リンク anchorの略 <a>ここがリンクになる</a>
・<img> 画像 <img src="***">で指定 終了タグ不要
・<li> リスト 箇条書き 囲む要素によって種類が変わる
・<ul> アンオーダーリスト リストを囲む要素 戦闘に黒丸がつく
・<ol> オーダーリスト 先頭に数字
・<div> 要素をグループ化 divisionの略
・<span> 囲んだ部分のみにCSSを適用
・・<p>裸人倶楽部は<span>裸人教団</span>として学園内に地位を確立</p>
・<input> 終了タグ不要 1行のテキスト入力を受け取る
・<textarea> 終了タグ必要 複数行のテキスト入力
・<!DOCTYPE html> DOCTYPE宣言 HTMLのバージョンを宣言 まだよく分からない
・<head> ページの設定：文字コード ページタイトル CSSの読み込み
・・<meta charset="utf-8"> 文字コード 多分キャラクターセットの略
・・<title></title>
・・<link rel="stylesheet" href="******.css"> CSSの読み込み
・<body> ブラウザに表示される部分
■属性
開始タグの中に記述 値の指定は""の中身
<* 属性="値の指定">
・href Hy0pertext REFerenceの略 リンク先を指定
・・<a href="https://hogehoge.com">リンク名<a>
・src Sourceの略 画像、スクリプトとかを指定
・・<img src="*******">
・class タグに名前を付けて別々のCSSを適用できるようにする
・・<li class="selected">***</li>
・・クラス名でCSS指定時には先頭にドット .selected{
・charset 文字コート指定 HTML5の推奨はUTF-8
・rel リンク先の位置付けを表す
・・<link rel="stylesheet"> ならリンク先はスタイルシート
・type 要素によって様々な種別を指定
・・<input type="submit"> 送信ボタン
・・<input type="search"> 検索欄
・value 入力コントロールの初期値を指定
・・<input type="submit" value="保存"> 送信ボタンの「送信」→「保存」に変更
-----------------
CSSとは
-----------------
HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語
書き方 何の（h1）｛ 何を（color）：どうする（red）；｝
h1{
color:red;
}
対象となる要素（↑だとh1）が「セレクタ」、変更項目が「プロパティ」
セレクタがクラス名の場合、先頭にドット
.logo01{
font-size:100px;
font-family:ariel
}
特定クラス内の要素を指定する場合
.header-list li{
h1,p{
CSS内でのコメントは /* */ を使う
■プロパティ
・color 文字の色変更 文字コード（#******）
・font-size 文字の大きさpxで指定 font-size:20px;
・font-family フォント名にスペースある時は""で囲む
・・font-famili:selif;
・・font-family:"New Type Roman";
・background-color
・width 横幅 height 高さ pxで指定
・list-style list-style:none; で先頭のマーク消す
・float ボックスの回り込み位置を指定 leftで左寄せ rightで右寄せ
・border 枠線の太さ、種類、色を指定
・・border:5px solid red;
・・単に border だと上下左右に線（囲まれる）
・・下線なら border-bottom 上に線なら border-top のように指定
・padding ボックス内部の余白
・・padding-top patting-right padding-bottom padding-left
・・padding:20px 10px 20px 10px; でtop,right,bottom,leftの順に設定
・・padding:20px 10px; で上下と左右
・margin ボックス外部の余白
