今日は改めて最初からHTMLとCSSの記述の基礎を学びました。
いままで曖昧になっていたところも多かったので、今日を踏まえて理解度がさらに増したように感じます。
目次
1.HTML
■HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
</head>
<body>
</body>
</html>さらにheadタグにメタ要素、タイトルタグ、（CSSのリンクタグ）を加える
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>※meta要素：ページに関する情報（メタデータ）をブラウザや検索エンジンに渡す目的で記述するHTMLタグ
親子構造は以下の通り
親：HTMLタグ
子供：headタグ、bodyタグ
孫：メタタグ、tittleタグ、linkタブ
■CSSとリンクするlinkタブの属性
href属性：HTMLにおいてリンク先のURLを指定するために使用される属性（住所）
→ファイル名のみ：HTMLと同じ階層にある
階層を下げる場合は、「フォルダー名/style.css」
→hypertext reference
rel属性：ファイルの種類を指定
■リンクしているか確認する
ファイル名を右クリックして”Open in new tab”で開けたらリンクしている
以下のような表示がでたらリンクしていない
■クラス属性をする付与する
<要素 class="クラス名">
<div class="oya">2.CSS
■セレクタとプロパティ
.oya{
background:#ccc;
height:600px;
width:600px;
}※クラスを指定する場合は、記述前に”.”が必要
※単位を忘れない（例）px,#
使用したプロパティ
background：背景色
height:高さ
width:幅
(参考)タグを指定する場合
ul{
background:#eee;
}■border-box
paddingを入れるとその分大きくなる※今回は20px
.oya{
background:#ccc;
height:600px;
width:600px;
padding:10px;
box-sizing: border-box;
}
box-sizing: を入れるとpaddingの影響を受けることなくサイズが維持される
※基本リセットCSSの中に入っているため個別で指定可能
■マージン
margin: 50px 0 50px 0;・上記の記載は上から右回りに数値を入れる
・マージンは重なると相殺される
・繰り返しマージンを使う場合は上か下かどちらかにしよう
■ブロック要素とインライン要素
タグは大きく二つに分けられる。
ブロック要素：何も指定しないと親に対して横幅いっぱいに置かれる
インライン要素：横幅の大きさが決まっているため親の幅に影響されない