学習ログ〜HTMLの&レイアウト〜

2020年8月14日 21:00

本日の勉強

1.HTMLの全体構造
2.HTMLバージョンを指定する
3.<head>要素とは
4.<head>要素の中身
5.文字コード指定
6.ページのタイトルをつける
7.CSSの読み方
8.レイアウト
9.裏技

1.HTMLの全体構造
・HTMLファイル
　決められた型を書く必要がある
<html>内には
　<head>要素　　　・・・ページに関する情報
　<body>要素　　　・・・実際に表示したい内容

※今までの勉強してきたことは<body>要素の中に書く

2.HTMLバージョンを指定する
<!DOCTYPE html>
HTMLのバージョン宣言するためのもの必ず記述する！

3.<head>要素とは
・webページの設定に関する情報を書く
・<head>内に記載された内容はwebページには表示されない
・必ず入れる３つの要素・・・<meta>・<title>・<link rel>

4.<head>要素の中身
<head>
<meta charset="utf-8"> ①文字コードの指定

<title> Progate</title>　　②ページのタイトル設定

<link rel="stylesheet" href="stylesheet.css">　　③CSSの読み込み

</head>

5.文字コード指定
<meta charset="utf-8">　
・ページの文字化けを防ぐ
・そのページの文字コードをUFT-8に指定

6.ページのタイトルをつける
<title> Progate</title>
・ページのタイトル指定
・指定されたタイトルは、ブラウザーの上に現れる

7.CSSの読み方
　　　　　　　　　　　　　　　↓読み込むCSSのファイル名
<link rel="stylesheet" href="stylesheet.css">
　　　↑CSSファイルを読み込む宣言

8.レイアウト

<div>要素
　・レイアウトは<div>要素によって構成されている
　・要素をグループ化するために使用
　・divisionの略

↓ヘッダー<div>要素
<div class="header">
</div>

↓メインの<div>要素
<div class="main">
</div>

↓フッターの<div>要素
<div class="footer">
</div>

9.裏技
エディタの補完機能

タグ名入力→Tabキー
終了タグまで出してくるれる

昨日までやってきたタグや要素が出てきて、しっかりと前回分も
理解しなければならない。
ノートを読み返しながら入力をして、また覚えて、また入力をする。
反復練習が大事。

今の私の勉強方法は・・・

①サイトを見ながらノートに大事な所を記録
②サイト内の実践をする
③noteにその日学習したことをまとめる

今日は、はじめあまり理解できていなかった部分が③をすることで理解ができた。

なんだか容量に悪い勉強方法だけど自分には合ってるみたい。

今日はスタートが昨日より１時間早かったにでプラスの学習をしたいと思います！

この記事が気に入ったらサポートをしてみませんか？