【HTMLについて】
【タグ】
➡「見出し」「リンク」の意味を持つ
⇒で囲む。<ｈ１></ｈ１>が一番大きな見出し。
【段落】
⇒＜p＞＜/p＞で囲む。
【コメント】
➡ブラウザには表示さえず、メモとして使う
⇒<!-- -->で囲む。
【リンク】
⇒＜a＞＜/a＞で囲む。
⇒＜a href="URL"＞＜/a＞で囲むとURL部分にリンク先のURLを指定し、そのページへのリンクができる。
【画像の表示】
➡終了タグは必要ない。
⇒＜img src="URL"＞のURLの部分に画像のリンクを指定する。
【リスト】
⇒＜li＞＜/li＞で囲むとリストができる
囲む要素で以下のように種類が変わる！
⇒＜ul＞＜/ul＞で囲むと黒店が先頭につく
⇒＜ol＞＜/ol＞で囲むと数字が連番でつく
例）入れ子状態ではインシデント（字下げする）
行の最初にtabキーでできる。
＜ul＞
＜li＞HTML＜/li＞
＜li＞PHP＜/li＞
＜li＞Ruby＜/li＞
＜/ul＞
【CSSについて】
➡色、大きさ、配置を指定。デザインする
➡HTMLと別のファイルに記述する。
【色の指定】
例）色は１６進数のカラーコード（#ff0000のように）で色指定する
h1{ //どこの
color:red; //何を（色）：どうする（redにする）；
font-size: 10px; //文字を：10pxのサイズにする
font-family: "Avenir Next"; //フォントを："フォント名"にする；
background-color: #ffd800； //背景フォントを：色にする；
width:500px; //横幅：500pxにする；
height:80px; //縦幅：80pxにする；
}
【CSSのコメント】
⇒/＊ ＊/で囲む。
【クラスをつける】
HTML側
＜ul＞
＜li class="selected"＞HTML＜/li＞ //class="クラス名"
＜li＞PHP＜/li＞
＜/ul＞
CSS側
.selected ｛ //class名には.をつける
color:red;
border:5px solid red; //線：太さ 種類 色；で線で囲まれる。（border-bottomで文字の
下のみに線がつく）
padding:20px; //上下左右に２０pxの余白を追加する(padding-top(上部のみ、他-bottom、
-left、-right):20px;)
（borderの下に書くことで、枠の中に余白追加）
margin:20px; //borderの下に書くことで、枠の外側に余白がつく
｝
li{
list-style:none; //リストのマークをなくす
float:left; //要素が左に横並びになる
}
【HTMLのバージョン宣言】
<!DOCTYPE html>
＜html＞
＜head＞ //ページに関する情報。WEBページには表示されない
＜meta charset="utf-8"＞ //文字コード＝”文字コード”
＜title＞Progate＜/title＞ //ページタイトル。ブラウザのタブ上に現れる
＜link rel="stylesheet"href="stylesheet.css"＞ //CSSの読み込み”CSSのファイル名”
＜/head＞
＜body＞ //実際に表示したい内容
＜div class="header"＞ //ヘッダーの＜div＞要素
＜div class="header-logo"＞Progate //ロゴの＜div＞要素
＜div class="header-list"＞ //ヘッダーのリストの＜div＞要素
＜ul＞
＜ul＞
＜/div＞
＜/div＞
＜div class="main"＞ //メインの＜div＞要素
＜/div＞
＜div class="footer"＞ //フッターの＜div＞要素
＜div class="footer-logo"＞Progate //ロゴの＜div＞要素
＜div class="footer-list"＞ //フッターのリストの＜div＞要素
＜ul＞
＜li＞＜/li＞
＜ul＞
＜/div＞
＜/div＞
＜/body＞
＜/html＞