🗓 今日の学習ログ（2025/4/22）
📌 現在、プログラミングスクールにてWeb開発を学習中です。
🎯 未経験からIT業界へのキャリアチェンジを目指しています。
学習がスタートして2週間。学習の記録としてqiitaを始めます
まずは、この2週間分の振り返りながら、少しずつ始めてみたいと思います。
よろしくお願いします。
📚 学習内容
- 使用教材／学習環境：スクールカリキュラム
- 学んだこと：HTMLとCSS
🧠 キーワード・要点・気づき
Webページの見た目を作るための前提知識
-
HTML（HyperText Markup Language）
- Webサイトに表示する情報を記載する言語
- HTMLファイルは〇〇.htmlという拡張子をつける
-
CSS（Cascading Style Sheets）
- CSSはHTMLを装飾するための言語
- CSSファイルは〇〇.cssという拡張子をつける
- 拡張子
HTMLはブラウザ上に情報を表示するためのもの。したがってHTMLだけでも情報を表示することができる。
しかしHTMLだけでは、質素なウェブサイトに仕上がる。
CSSを用いることで、ユーザーが見やすい形にウェブサイトを装飾することができる。
必要なフォルダとファイルの作成方法
テックキャンプをWindowsで受講している場合は、Ubuntu（Lesson2で導入したシステム）で決めたユーザー名の専用フォルダのことを指す
エクスプローラーを開き、検索欄に \wsl$ と入力するとUbuntuのファイルシステムを表示できる
Ubuntu → home → ユーザー名のフォルダ
HTMLの構成
- HTMLは要素の積み重ねで構成されている
- HTMLは、head要素とbody要素に大きく2分される
- head要素にはWebページのタイトルなど、Webページの情報を記述する
- head要素の記述は、ブラウザ上には表示されない
- body要素には、ブラウザ上に表示される情報を記述する
- コメントアウトを用いることで、コードの中にメモを残すことができる
| headヘッド要素 | ウェブサイトの情報や、装飾用のCSSファイルの情報を記載する部分。ここに記述した情報は画面上に表示されない。 |
| bodyボディ要素 | 画面上に表示したい情報を記載する部分。ブラウザ上に表示されている情報は、body要素の中に記述されたもの。 |
| DOCTYPEドックタイプ | 「ドキュメントタイプ」の略で、この文章がHTML文章であることを宣言する要素。終了タグはなし。 |
実際に記述する場合は、**<!DOCTYPE HTML>**のように。 |
|
| この要素を記述しないと、レイアウトが崩れ、正しく表示がされない場合がある。 | |
| htmlエイチティーエムエル要素 | HTML文章の始まりと終わりを示す要素。 |
| head要素 | |
|---|---|
| metaメタ要素 | |
| 属性 | |
| 属性値 | |
| charsetキャラセット属性 | |
| titleタイトル要素 |
| body要素 | |
|---|---|
| h1〜h6エイチワン〜エイチシックス要素（見出し要素） | |
| pピー要素 | |
| brビーアール要素 | |
| bビー要素 | |
| aエー要素 | |
| hrefエイチレフ属性 |
コードの差分✅
コードの差分を比較するには、VSCodeの標準機能を使う✨
（ | 左がコピーしたコード | | 右が開いている自分のコード | ）
- 見本のコードをコピーする
- 自分のコードがあるファイルを開く
- **
command + shift + P**でコマンドパレットを開く - **
>に続けてcompareと入力し、Compare Active File With Clipboard**を選択 - 赤字でハイライトされている見本と異なる部分を確認する
- 編集したいファイルを選択して、誤字や抜けているコードを修正する
🌀 つまずいたこと・調べたこと
💭 所感・次にやること
- まずはこのペース（時間割学習）に慣れることを優先に取り組んだ
- 「ホスト」という役回りをチーム内で一番手として担うことになり緊張したがなんとか務められてホッとした
- 本日は役割を全うすることと取りこぼしがないようにすることで必死だったが、明日からはカリキュラムの進度をもう少し早めたい
- 細かな時間割や役割もわかったので、家族とのスケジュール調整やカレンダー登録など個人的な環境設定も大方進められた
📝 補足やリンク（参考にした記事や動画など）