うにょママ 
デイトラでプログラミングを学習中です。復習を兼ねて学習記録を書き留めておきたいと思います。プラスαで調べた情報も備忘録として記載。
Day1～4で学んだこと 「HTML/CSSの基礎とコーディング環境作り」
【Day1】はじめに
①Slack(チャットツール)に参加
・メンターへの質問(他の受講生の質問も見れる)
・運営からのお知らせチェック
slackの初期設定でEnterを押すとメッセージが送信されるようになっており、初めて質問する際に誤送信連発(汗)
投稿は削除できますが、めっちゃ焦りました。
②上手な質問方法
・丸投げせず、起きている問題を正しく伝えることが大切。
- 答えが短時間で返ってくる
- 情報処理力・問題解決力が上がる
- 整理してる間に自己解決することも多数
- 周りから一目置かれる
※メンターに質問する際は質問テンプレートを利用できます。
③Google Chromインストール
・コーディングにはChromeの検証機能が必要不可欠。
・利便性向上のために規定ブラウザもChromに設定。
④VS Codeインストール
・Atom、Sublimeなどエディタにもいろいろ種類がある。
・その中でも圧倒的にMicrosoft社が開発したVisual Studio Code（VS Code）が便利。
【Day2】HTMLの書き方
①HTMLのタグについて
- h(見出し)：h1～h6まである。よく使うのはh1～h4
- P(段落)
- a(リンク)
- img(画像)
- div(グループ分け)
②コメントの入力
・コメントとは、ブラウザに表示させない注釈のこと
・<!– と –>で囲む
・注釈をつけるだけではなく、後で使うかもしれないコードを一時的に書いておける
③タグ属性について
・属性とは追加的な情報のことで、タグに名前を付けたりタグ内の要素の言語を指定したり、たくさんの種類がある。
【Day3】CSSの書き方
①CSSファイル・画像ファイルの準備、フォルダ階層
・VS Code上にフォルダ作成：デスクトップにフォルダを作成しVS Code上にドラッグ＆ドロップ
・ファイル表示：作成したVS Code上のフォルダ上にファイルを開く
・画像の表示：作成したimgフォルダ上に任意の画像をドラッグ＆ドロップ
②CSSファイルの読み込み設定
・ファイルの場所の指定方法は絶対パスと相対パスの2種類
・ファイルの場所は相対パス(編集しているファイルから見たファイルの場所)で指定する。
(例)./css/style.css⇢同じ階層にあるcssフォルダ内のstyle.cssファイル
”./”は、「このファイルが置いてあるのと同じ階層の～」という意味。
”../”は、「一つ上の階層の～」
③CSSはセレクタ・プロパティ・バリューという三つの要素からなる
(例) h2 { color: red; }
h2…どこの（セレクタ）
color…何を（プロパティ）
red…どうする（バリュー）
この例の場合、h2の色を赤にするということ
④特定の箇所にだけスタイルを適用するにはclass指定
⑤子孫要素の指定
⑥Webサイトはたくさんのボックスが敷き詰められて構成されている。(ボックスレイアウト)
・ボックスは、コンテンツエリア・padding・border・marginでできている
- padding → 余白をborderの内側に作る
- margin → 余白をborderの外側に作る
【Day4】環境構築
①VS Codeにプラグインをインストール
・プラグインとは機能を追加するソフトウェアのこと
②Live Server(変更がリアルタイムに反映される)の起動
- Mac
Command + L ➞ Command + O で起動
Command + L ➞Command + C で終了 - Windows
Alt + L ➞ Alt + O で起動
Alt + L ➞ Alt + C で終了
③Emmetでコーディングする
・HTMLやCSSをショートカットで書ける
・コーディングスピードが劇的にアップ
HTML/CSS基礎編まとめ
事前にprogateとドットインストールで基本的なことは学んでいたので、サクサク進みました。
Emmet入力は初めてだったので、とても感動しました！
めちゃくちゃ楽！ちょっと数学の公式みたいで面白いと思いました。
デイトラで勉強を始めた方はprogateやドットインストールでの勉強もおススメです。
理解が深まると思います＾＾