【DAY1】ウェブカツ！HTML&CSS部入門

こんにちは。こゆびです。

今日からウェブカツでの学習を開始しました。

HTML＆CSS部入門です！

HTMLとCSSについては、これまでProgateで何度か道場もやっていたので、

タグの書き方だったり、属性についてはなんとなくわかっていたつもりでした。

でもこれは、Progateの最大の弱点だと思うのですが、書き方がわかったところで、

実際にどうやってHP作るの？ってなるんですよね。。（超初心者）

そこをウェブカツは、コードエディターから教えてくれ、

ブラウザ上ではない環境で開発（といえるのかはまだよく分からない）が

できるので、色々納得感がありました。

HTML＆CSS部入門は、全部で１９レッスンあるのですが、

実はまだ仮部員状態なのでできるのはレッスン１５まで。

動画を見ながら手を動かして、かかった時間は３時間半くらいでした。

▼新しく学んだ内容をメモしていくよ

（あくまでも備忘録ですが、いや違う！！！ってところがあればご教示ください）

<img>タグ<a>タグなどで画像やURLなどを挿入するときは、

スラッシュをつけることで場所指定できる

みたいなかんじ。

表を作るときは<table>タグを使う

枠線の太さはborder属性を指定するよ

行はtrタグ、列はtdタグを使うよ

<tr> <td>中身①</td><td>中身②</td> </tr>　←１行目

<tr> <td>中身③</td><td>中身④</td> </tr>　←２行め

行／列の結合には　colspan属性／rowspan属性を使うよ

●行を横に繋げたいとき

<td colspan=“2”>中身</td>　※属性の値は結合する行数

●列を縦に繋げたいとき

<tr rowspan=“2”>中身</tr>　※属性の値は結合する列数

リストを作成するには<ul>タグと<li>タグ！

<ul>

</ul>

・ホームページのメニューを作るときによく使う！

・<p>タグを使っても見た目は変わらないが、PCでの処理が違ってくる

改行は<br>タグ！

<br>

・終タグなし

・インライン要素

フォームは<input>タグとtype属性でいろんなのが作れる

<form></form>フォームタグの中に表示させたいフォームを作る

<input>タグを使いtype属性を指定することで

・テキストフォーム

・✔︎ボックス

・ラジオボタン

などを作ることができる　

　※<input>は終タグ必要なし

●テキストフォームを作りたいとき

type属性に”text”を入れることでテキストフォームを作れる

●送信ボタンを作りたいとき

type属性に”submit”を入れることで、送信ボタンを作れる

●チェックボックスを作りたいとき

type属性に”checkbox”を入れることで、✔︎ボックスを作ることができる

●ラジオボタンを作りたいとき

type属性に”radio”を入れることで、ラジオボタン（複数選択不可のフォーム）を作ることができる

【注意事項】

・name属性をつけることで、それぞれのフォームに名前をつけることができ、

　フォームがひとつのグループであることを指定できる。

　ラジオボタンで同じnameを指定しなかった場合、別グループになってしまい、

　グループごとに選択可能となってしまう

・value属性をつけることでフォームに値を持たせることができる

●セレクトボックスを作りたいとき

<select>タグと<option>タグを使う　

●コメント欄を作りたいとき

<textarea>タグを使う　

-------------------------------------------------------------------------------

・<textarea cols=“50”>cols属性を指定することでコメント欄の横幅

　<textarea rows=“3”>rows属性を指定することでコメント欄の縦幅　

をそれぞれ指定可能

・<textarea></textarea>の中に文字を入れていると、

コメント欄最初からその文字が表示された状態になる

-------------------------------------------------------------------------------

CSSでは、【セレクタ＝どの部分に】【スタイル＝どういった】【値＝どのような】スタイルを指定するかを記述する

p {color :blue;}の場合

p=セレクタ　ーどの部分にスタイルを適用するのか

color= プロパティ名　どういったスタイルを指定するのか

:blue;=値　ーどのようなスタイル

id属性とclass属性

●id属性とは

どのタグにもつけることができる

タグに名前を指定できる

ひとつのhtmlファイルの中にひとつだけ存在する

CSSでは[＃]をつけて指定する

●class属性とは

どのタグにもつけることができる

タグに名前を指定できる

CSSでは[.]をつけて指定する

→id属性、class属性ともに名前を指定することで

CSSのシートのスタイルを適用させることができる

セレクタの主な指定方法

どれにスタイルを指定するのか？を指定する方法は主にこんなかんじ

*{color:red;} 全要素に適用
p{color:red;} 指定X要素に適用
#title{color:red;} 指定id属性名のついた要素に適用
.burtton{color:red;} 指定class属性名のついた要素に適用
p a{color:red;} 要素Xの中にあるY要素に適用
p > a{color:red;} 要素Xの直下にあるY要素に適用
p.button{color:red;} 指定のクラス名がついた要素Xに適用
p#titel{color:red;} 指定id属性名がついた要素Xに適用
a:hover{color:red;} 要素Xの上にマウスが載ったときに適用

スタイルの適用優先順位

上から優先順位が高い順に並べたよ

① CSSファイルで!importantをつける

p {color:red !important;}

②HTMLファイルでstyle属性で直接指定する

③CSSファイルでid属性を指定

p #title {color:red;}

④CSSファイルclass属性を指定

p.class {color:red;}

⑤書いた順番（一番最後に書いたスタイルが適用される）

p {color:red;}

P{color:blue;}

ブロックレベル要素とインライン要素

①ブロックレベル要素

・一行全て（横幅いっぱい）のボックスになるので、

　その後の要素は横並びにはできない

・ブロックレベル要素の中にブロックレベル要素を入れることができる

　<p><h1>~<h6><ul><table><form><div>など

②インライン要素

・基本、文字の装飾などで使われる要素

・文字幅分のボックスになるので、横並びにすることができる

・インライン要素の中にブロックレベル要素は入れることができない

　<a><input><br><span>など

marginとpadding

・要素（＝ボックス）の周囲の余白を指定できるもの

・ボックスには境界がある

padding：文字と境界の間の余白を指定

margin：境界の外側の余白を指定

・要素を並べるときや境界線（border）を表示するとき、

　背景色を表示するときにmarginかpaddingかで違いが出てくる

・インライン要素の場合上下のmarginが指定できない

　→上下の余白を指定したい場合は、CSSでインライン要素を

　　ブロックレベル要素に変える必要がある

CSSファイルの単位の指定

①大きさを指定

・px { font-size: 18px; width: 1028px;}　→画面の解像度によって表示サイズが変わる

・％ { width: 100%}　→画面のサイズによって表示サイズが変わる

②色の指定

・色名　p{ color: red;}　→凝った色に使うことは難しい

・#rrggbb p{ color: #333333;}

・#rgb p{ color: #333;}

・rgba p{ color: rgba(0,0,0,0.5)}　→aは透明度（0~1）

positionとfloat

ボックスの配置方法を指定できるもの

●position

①position:static;

→デフォルト

②position:absolute;

　top:100px;（上から100pxのところに重なって表示される）

・指定されていないブロックの上に指定されたブロックのシートが

　重なるイメージ（その場合指定されていないブロック要素は詰めて表示される）

③position:relative;

　top:100px;（上から100pxのところに重なって表示される）

・指定されていないブロックの上に指定されたブロックのシートが

　重なるイメージ（その場合指定されていないブロック要素は

　そのままの場所で表示される）

④position: fixed;

top:100px;

・スクロールしてもずっと画面から消えない

・absoluteと同じく指定されていないブロックの上に指定された

　ブロックのシートが重なるイメージ

（その場合指定されていないブロック要素は詰めて表示される）

●float

p{float:left;} leftまたはrightを指定することができる

・ブロックレベル要素(本来は縦に並ぶもの)であっても、

　ボックスの横幅が収まれば横に並べて表示することができる

今日のところはこんなかんじでした。

まだまだ次のレッスンが楽しみです。

こゆび

こゆびのブログ

未経験からプログラミングに挑戦するこゆびのブログです

【DAY1】ウェブカツ！HTML&CSS部入門