「DIVE INTO CODE」学習記録 2日目
こんにちは。
2日目。HTMLとCSSで２カラムの企業ホームベージを作成。
学習内容
【HTML・CSS入門演習】
- リンク先のページのコーディング
- 「table」タグと「border-collapse」プロパティ
- 擬似要素「:last-child」
【HTML・CSSシリーズ課題】
- 「お問い合わせページ」の作成
- 「自己紹介ポートフォリオ」の作成
【JavaScript入門】
- JavaScriptとは
- ブラウザ上でのJavaScriptの実行
- 変数の定義「let」
- 定数の定義「const」
- 「undefined」について
以下、備忘録です。
リンク先のページのコーディング
・トップページのhtmlファイルを複製し、名前変更。
・このときリンクするcssを別で書く場合は、headの書き換えを忘れずにする。
「table」タグと「border-collapse」プロパティ
・<tr>で列作成、<th>は見出し、<td>で内容記入。
・テーブルを使うときはクラスをあらかじめつけておく。
・「border-collapse」
| 値 | 効果 |
|---|---|
| separate | 初期値。各セルの周囲に分離した枠を表示させる。 |
| collapse | セルを結合して、表の端から端まで連続した枠で表示させる。 |
・テーブルタグの初期値が「separate」のため、枠間を作りたくない場合はスタイルに「table-collapse: collapse;」とコーディングする必要がある。
擬似要素「:last-child」
・連続する子要素（<li>や<p>、<tr>など）の最後だけスタイルを変えたいときに用いる擬似要素。
・親要素セレクタ 子要素セレクタ :last-child { }の形で使う。
JavaScriptとは
・ブラウザ上でも動作するプログラミング言語。
・状況に応じて表示する内容をリアルタイムで変更できるなど、webページに動きを出すことができる。
・「Gmail」や「Facebook」のフィード投稿、ダッシュボードなど多くの場面で使用されている。
・「Google Chrome」で右クリック→検証で検証ツールを開き、コンソールを表示できる。
変数の定義「let」
・「let number = 2;」で変数「number」に数値「2」を代入するの意味になる。
・変数から値を取り出す場合は、「number;」と入力。
・「let」で代入した値は「変数」であるため、上書きが可能。
・上書きする場合は「let」を入力せず、「number = 10;」とすれば、数値「10」が上書きされる。
定数の定義「const」
・「const string = "hello";」で定数「string」に文字列「hello」を定義するの意味になる。
・定数から値や文字列を取り出す場合は、「const;」と入力。
・「const」で代入した値は「定数」であるため、上書き不可能。
「undefined」について
・「let」や「const」を使用して、変数や定数に値を代入したとき、返り値として「undefined」と出てくる。
・しかし、数値を入れず「non_number」と入力した場合も「undefined」と帰ってくるが、この場合の未定義の意味になる。
感想
今回は、前回の【HTML・CSS入門演習】の続きと、【HTML・CSSシリーズ課題】2つ。さらに【JavaScript入門】のさわりまでやりました。
シリーズ課題とは、各テーマが終わるごとに設けられている課題であり、そのテーマで勉強したことをアウトプットするためにあります。もちろんしっかりと理解していないとクリアできない課題です。
今回は1日のほとんどの時間を課題に使いました。
今までテキストを読んで理解して進んでいましたが、1から自分で作成するとなると理解がまだ足りておらず、思うようにスタイルを操作することができません。
特にfloatのclearであったり、heightやwidthをautoにしたとき何を基準にオートで長さが決まるのかがわかっておらず、すべてpx表記にしてレイアウトしてしまいます。
パワポやエクセルだったらこんな配置あっという間にできるのにー
と思いながら、ひたすらコードを眺めて原因を探る作業になります。
色々試行錯誤して持って行きたい場所に要素を配置していくのですが、めちゃめちゃcss内が汚くなり、まだまだ時間を使っていじる経験を積む必要があると思いました。
ただ、cssいじるのかなり楽しいです。
もともと美術の授業とか絵かくのが好きだったため、デザイン考えるのは面白いです。あっという間に1日終わりました。
次回はJavaScriptの内容がっつり記録していくと思います。
以上、ありがとうございました。