「DIVE INTO CODE」学習記録 1日目
こんにちは。
1日目。DIVE INTO CODEカリキュラムの学習開始。HTMLからスタート。
学習内容
【HTML・CSS入門編】
- 「HTML・CSS」とは
- HTMLタグの構造
- HTMLタグの種類
- 「ブロックレベル要素」と「インライン要素」
- CSS基本構文
- CSSセレクタ
- リセットCSS
- 「margin」と「padding」
- 「position」プロパティ
- 「z-index」プロパティ
- 「float」と「clearfix」
- 「display: block」
- 「margin」の相殺
- 「overflow」での要素の表示設定
- 「line-height」プロパティ
- 「text-align」プロパティ
- 「vertical-align」プロパティ
- 「display: table」の使い方
以下、備忘録です。
「HTML・CSS」とは
・HTMLは「HyperText Markup Language」の略。webページの構造と内容を設計する言語。
・CSSは「Cascading Style Sheets」の略。webページの見た目を設定する言語。
・HTML・CSSを使うことで、ブラウザ上で見るwebページの構造とデザインを作成できるようになる。
HTMLタグの構造と構文
・開始タグから終了タグのことをまとめて「要素」という。
・基本フレームは <html> <head> </head> <body> </body> </html>。
HTMLタグの種類
・リストタグ→<ol>(Ordered List 順序付きリスト)、<ul>(Unordered List 日順序リスト)。
・フォームタグ→<form action=””>、<input type=””>。
・テーブルタグ→<table><tr><th></th><td></td></tr></table>
「ブロックレベル要素」と「インライン要素」
・ブロックレベル要素（<h1>タグ、<p>タグなど）は縦に積まれる。インライン要素（<span>タグ）は横に並ぶ。
・ブロックじゃないとできない事とインラインじゃないとできない事どちらもある。
CSS基本構文
pタグを例とする。
p {
margin-bottom: 0px;
background-color: #fff;
}
・この場合「p」をセレクタという。
・{ }内のことを宣言ブロックという。
・セレクタとマッチした要素に、宣言ブロックが適用される。
・CSSはHTMLとは別のファイルで作成し定義するのが一般的。
CSSセレクタ
・タイプセレクタ（タグ名をセレクタにとる。）
・全称セレクタ（＊アスタリスクをセレクタにとり、すべての要素にマッチする。）
・idセレクタ（特定のid属性値をセレクタにとる。「#header{ }」のように、頭にシャープをつけて使用。）
・classセレクタ（特定のclassをセレクタにとる。「.banner{ }」のように、頭にドットをつけて使用。）
・子孫セレクタ（セレクタは半角スペースで区切る事で併記ができる。子要素だけでなく、孫要素にもマッチする。）
リセットCSS
・作成したCSSが、ブラウザが独自で持っているデフォルトのCSSの影響を受け、表示差異が生じページデザインが崩れてしまうのを防ぐため、ブラウザ独自のCSSを打ち消すために用いるCSSのこと。
「margin」と「padding」
・「border」を基準にして、外側が「margin」、内側が「padding」。
「position」プロパティ
| 値 | 用途 |
|---|---|
| static | 初期値。配置方法の指定をしない。上下左右に動かせない。 |
| relative | 現在（プロパティ使用前）の位置を基準に相対的な位置を決める。 |
| absolute | 親要素を基準に絶対的な位置を決める。 |
| fixed | 画面の決まった位置に決める。スクロールしても動かない。 |
「z-index」プロパティ
・要素同士の重なり順を決めるプロパティ。値が大きい方が上に重なる。基本は後に記載されたコードが上に重なるが、「z-index: 0;」の様に値を設けることで入れ替えが可能。
「float」と「clearfix」
・ブロックレベル要素はコードの記載順に縦に積まれる性質があるため、そのままだと横に並列ができない。「float」はブロックレベル要素を「浮かせ」、下に来ていたブロックレベル要素を横並びにさせることができる。
・「clearfix」は「float」の解除で使用する。擬似要素に対してclearを当てることでfloatを解除する。
「display: block」
・インライン要素をブロックレベル要素に変化させることができる。これにより幅や高さを持たないインライン要素に、幅と高さを持たせることができるようになる。
「margin」の相殺
・margin同士が隣り合った場合は、片方のmarginがなくなる。
・基本小さい方が消滅する.
・隣同士だけでなく、親子関係の要素同士でも相殺される。
「overflow」での子要素の表示設定
・親要素からはみ出てしまう子要素の表示ついて設定できるプロパティ。以下の様な種類がある。
| 値 | 効果 |
|---|---|
| visible | 初期値。入りきらない内容がボックスをはみ出して表示される。 |
| scroll | 入りきらない内容はスクロールして見れるように表示される。 |
| hidden | 入りきらない内容は表示されない。 |
| auto | ブラウザ依存。 |
「line-height」プロパティ
・行間の設定に必要なプロパティ。文字サイズを含めたものが「line-height」になることに注意。
「text-align」プロパティ
| 値 | 効果 |
|---|---|
| left | 左寄せ |
| right | 右寄せ |
| center | 中央寄せ |
| justify | 均等割り付け |
「vertical-align」プロパティ
| 値 | 効果 |
|---|---|
| baseline | 初期値。親要素のベースラインに合わせる。 |
| top | 上端揃え |
| middle | 中央揃え |
| bottom | 下端揃え |
・インライン要素もしくはテーブルセルでのみ機能する。ブロックレベル要素では使用できない。
「display: table」の使い方
・親要素に「display: table」、子要素に「display: table-cell」を用いることで<table>と<td>の様に扱える。
・上記「vertical-align」プロパティの様な、テーブルセルでのみ機能するプロパティを、ブロックレベル要素で使いたいときに使用する。
・横並びの配置が可能になるプロパティのため、メニューやバナーを使い方次第で横並びにできる。
感想
初回はHTMLとCSSからスタートです。
勉強の進め方は、オンラインテキストをパソコンごしに眺め、
テキストエディタでコードを実際に打っていく流れです。
オンラインでメンターさんに質問を投稿することもできます。
今回の【HTML・CSS入門編】は、実際にHTMLとCSSのコードを入力しながら、会社のホームページ（ヘッダーのメニュー作成、２カラムでアサイド作成、バナー貼り付け、フッターの設置方法など）を作成する流れです。
次回は【HTML・CSS入門シリーズ】の残りと【JavaScript入門シリーズ】の予定です。
以上、ありがとうございました。