デイトラWeb制作初級編『HTML/CSS基礎編Day1~4』学習記録

WEB制作
うにょママ
うにょママ

デイトラでプログラミングを学習中です。復習を兼ねて学習記録を書き留めておきたいと思います。プラスαで調べた情報も備忘録として記載。

スポンサーリンク

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やドットインストールでの勉強もおススメです。

理解が深まると思います^^

コメント

タイトルとURLをコピーしました