header とfooter編集まで
学んだこと
・HTML
コメントの仕方
<!--ここにコメントするのよ -->
・最初にすべき事柄
<!ここにタイプの指定 html>
<html>
<head>
</head>
<body>
ここに書きたい内容を書いていくこと
</body>
</html>
・headに関すること
<head>
<!--文字コードのお話-->
<meta charset="utf-8">
<title>タイトルを入れる</title>
<!--CSSの読み込み-->
<link rel="stylesheet" href=" stylesheet.css">
</head>
・URL添付
<a href="">意味</a>
・画像イメージ添付
<img src="">
・リストをつける
<ul>
<li></li>
<ul>
・名前の付け方
<li class="selected"></li>
・レイアウト
/*ヘッダーのレイアウト*/
<div class="header">
</div>
/*メインのレイアウト*/
<div class="main">
</div>
/*フッターのレイアウト*/
<div class="footer">
</div>
・実際のレイアウトの仕方、はじめ方
<div class="header">
<div class="header-logo">題名</div>
<div class="header-list">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="footer">
<div class=""footer-logo>題名</div>
<div class="footer-list">
<ul>
<ui></ui>
</ul>
</div>
</div>
・CSS
・stylesheetに書くこと（ｈｔｍｌとは別物）
h1{
/*ここにメモが書けます*/
/*色を変えられます*/
color :#ff0000;
/*文字の形、大きさを変えられます*/
font-family: serif;
font-size: 10px;
/*背景を変えられます*/
backgroundcolor: #ddd;
/*横縦の変更*/
width: 10px;
height: 10px;
}
・リストに装飾をつけるときは事前にHTMLのほうで名前を付ける
classに言及するときは”.”最初のが肝心
.指定したクラス名{
color: red;
}
リストの黒点なくす
/*最初にクラスを指定するとその中だけで行ってくれる*/
. header-list li{
list-style : none;
/*横並びにする*/
float :left;
}
・余白の管理
html
<div class="logo1">
Progate
</div>
.logo1{
padding: 20px;
}
