LoginSignup
0
0

More than 3 years have passed since last update.

TECH DAY -11 事前学習

Last updated at Posted at 2019-07-02

勉強した項目:事前学習 HTML/CSS概要 最低限の文法
時間: 4:00
内容:

【事前学習】

   •カリキュラムの進め方および概要、勉強方法など。
   •事前のPCの設定とソフトのインストール
   •学習のポイント
   •効率の良い復讐方法(自分なりにルールを決めたい)

【HTML/CSS】

   ・webページはHTML/CSSという言語にて作成されている
   ・HTMLは、箱やテキストの存在を定義する言語
   ・CSSは、箱やテキストを装飾するための言語

【HTML】

   HTMLの構造について
    →開始タグ、終了タグ、要素のタイプから成り立つ
    ファイルの新規作成 → commandキー + n
    ファイルの保存(上書き含む) → commandキー + s

   属性について
    →HTMLは大きく分けるとhead要素とbody要素という部分で構成される
     head要素は、メタ情報と呼ばれるサイト自体に関する情報を定義(見た目反映なし)
     body要素は、箱の構成やテキストなど、実際に見た目に大きく反映

  <!DOCTYPE HTML>はHTMLを構成する上での定義、一番上に置く

    <meta charset="UTF-8">
     meta要素は、文章に関する情報を指定する
     主流はUTF-8

     コメントアウトとは、htmlに記述しても反映されない文字
     範囲を指定して
          command + /  でコメントアウトになる

   ブラウザにHTMLを表示させるまで
    →.html拡張子をブラウザにドラッグ&ドロップにて表示

   HTMLの箱について
    →ブロック要素は、ウィンドウの左右いっぱいに表示され、
     上下に改行が入る。 長方形の長い箱のイメージ
    →インライン要素は、テキストを装飾 
     インライン要素は連続して横に並ぶ

   段落の作り方
    →段落は<p>要素
   

【CSS】

   CSSのポイント
    →あくまでHTMLの装飾

   CSSをHTMLに読み込ませるまで
    →htmlのheadタグ内に

<link rel="stylesheet" href="style.css">

     を入れ込む
    
   セレクタについて
    →基本の形は 
        セレクタ { プロパティ: 値; }
     意味はセレクタ(場所)に値(色、数値)をプロパティ(適用)させる

   idセレクタclassセレクタについて
    →全体の中で1つしかない要素であることを明示する場合はidを使う

    →複数の要素に一括でCSSを当てたいときはclassセレクタを使う

   文字色を変えてみる
    →CSSにてセレクタの基本の形にて色を変える
     例としてp要素を赤にする
      p{color:red;}
  これでp要素の部分が赤文字に変化する
    
まとめ:初めての事前学習と聞きなれない言葉があるが、まずは慣れる必要がある。
   復習の時間は終了後の次のカリキュラムの前に必ず振り返ること。
   一つづつ100%での理解を求めると、思うように進まないで時間だけが過ぎてしまう。
   よって、1回目は6割で流すくらいで、いいだろう。何回も繰り返し回すことが重要だ。
   

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0