開発初心者の開発日記~28日目~

内容

  • Webを支える技術でのインプット
    • なし
  • HTML/CSSの基本でのインプット
    • 50分程度
    • 130ページから143ページ
  • Progate(JavaScriptコース)でのインプット

HTML/CSSの基本でのメモ

Chapter 3

3-9 幅と高さを指定しよう

  • widthプロパティ、heightプロパティ
    • "ブロック要素に対して"幅と高さを指定するプロパティ
    • 値:(単位付きの)数値 or auto
    • 例:HTMLファイルCSSファイル
    • 幅をautoで指定した場合(デフォルトはauto):囲っている親要素の幅まで横いっぱいに広がる(100%と同じ)
    • 幅を%で指定した場合:囲っている親要素の幅に対する%のぶんだけ広がる
  • Web上の単位
    • 相対単位
      • ブラウザの大きさや他の要素に指定したサイズを基準とする
      • %:親要素を基準とした割合の単位(100%で親要素と同じになる)
      • em:親要素を基準にした割合の単位(1emで親要素と同じになる)、フォントサイズに指定することが多い
      • rem:ルート要素(<html>タグ)のサイズを基準にした割合の単位、root+em
      • vw:ビューポートの幅を基準とした割合の単位、「viewport width」の略
        • ビューポート:ブラウザでWebサイトを閲覧しているときの表示領域
        • さまざまなサイズのデバイスに対応させるときに活躍
      • vh:ビューポートの高さを基準とした割合の単位、「viewport height」の略
    • 絶対単位
      • px:最も一般的な絶対単位、様々なデバイスへ対応させる際には不便

3-10 余白を調整しよう

  • 余白の概念
    • marginとpadding
    • margin:ある入れ物から他の入れ物までの距離
    • padding:入れ物の縁から中身までの距離
    • border:marginとpaddingの間の枠線
    • widthとheight:中身の横幅と高さ
  • marginプロパティ
    • 要素の外側に余白をつける場合
    • 値:数値 or auto
    • プロパティ:margin-top、margin-bottom、margin-left、margin-right(4方向でそれぞれ指定できる)
    • marginプロパティのみで指定する場合
      • margin: 四辺全て;
      • margin: 上下 左右;
      • margin: 上 左右 下;
      • margin: 上 右 下 左;
    • 例:HTMLファイルCSSファイル
  • paddingプロパティ
    • 要素の内側に余白をつける場合
    • 値:数値 or auto
    • プロパティ:padding-top、padding-bottom、padding-left、padding-right
    • paddingプロパティのみで指定する場合
      • marginプロパティと同様
    • 例:HTMLファイルCSSファイル
  • 余白を使ったグループ化
    • 余白を上手く使うことで、関連性のある情報をグループ化することができる
  • 枠と文字の間の余白
    • 枠との間の余白を取ることでスッキリと読みやすくすることができる
    • 余白をたっぷり使うと上品なサイトになる

3-11 線を引こう

  • border-widthプロパティ
    • 線の太さを指定するプロパティ
    • 値:キーワード(thin、medium、thick) or 数値
    • 指定の仕方
      • 1つのサイズを指定した場合→全ての辺に同じ太さが適用される
      • (空白を空けて)4つサイズを指定した場合→上、右、下、左、の順になる
    • border-styleプロパティも同時に指定する必要がある
      • border-styleプロパティのデフォルトがnoneのため
    • 例:HTMLファイルCSSファイル
  • border-styleプロパティ
    • 線の装飾方法を指定するプロパティ
    • 値:キーワード(none、solid、double、dashed、dotted、など)
    • 指定の仕方はborder-widthプロパティと同じ
    • 例:HTMLファイルCSSファイル
  • border-colorプロパティ
    • 線の色を指定するプロパティ
    • 値:カラーコード、RGB値、色の名前
    • border-styleプロパティも同時に指定する必要がある
    • 指定の仕方はborder-widthプロパティと同じ
    • 例:HTMLファイルCSSファイル
  • borderプロパティ
    • 要素の周りに線を引くプロパティ
    • border-width、border-style、border-color、はまとめて書くことができる
    • borderのみ→全ての辺に同様に適用
    • border-top、border-bottom、border-left、border-right→指定された辺に適用
    • 実際に制作するときは、このように一括指定することが多い
    • 例:HTMLファイルCSSファイル

Progate(JavaScriptコース)でのメモ

JavaScript

  • while文
    • while(条件式){処理}C++と同じ
  • for文
    • for(初期化;条件式;ループでの更新){処理}C++と同じ
    • インクリメントやデクリメントも使用可能
  • 配列
    • [A,B,C,…]と行った形での宣言が可能
    • インデックスによるアクセスや更新についても一般的
    • Pythonと同じ
  • 配列の長さ
    • 配列名.lengthで取得可能
  • オブジェクト
    • JSONで出てきた概念か!!
    • GoやC++のMap、PythonのDictと同じ
    • {プロパティ1:値1,プロパティ2:値2,…}として初期化可能(Goと同じ)
    • プロパティは「オブジェクトに関連づけられた変数」と捉えることができる
    • 値の取り出し方(更新も可能):オブジェクト.プロパティ名
    • もちろん配列の要素とすることも可能
  • 存在しないインデックスやプロパティの要素の値を出力しようとした場合
    • その値はundefinedという特別な値になる(出力もundefined)
    • エラー処理では値 === undefinedとできる