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

内容

  • Webを支える技術でのインプット
    • なし
  • HTML/CSSの基本でのインプット
    • 50分程度
    • 144ページから151ページ
  • Progate(JavaScriptコース)でのインプット
  • ハッカソン(8/4,8/5)の準備
    • 120分程度
    • チームメンバーとの予定の策定など

HTML/CSSの基本でのメモ

Chapter 3

3-12 リストを装飾しよう

  • list-style-typeプロパティ
    • リストマーカー(リストの項目の先頭に表示されるマーク)の種類を変更するプロパティ
    • 箇条書きの場合はdisc、番号付きの場合はdecimal、がそれぞれデフォルト
    • 例:HTMLファイルCSSファイル
  • list-style-positionプロパティ
  • list-style-imageプロパティ
    • リストマーカーとして使う画像を指定するプロパティ
    • 画像の大きさを指定できないので、このプロパティの使用は避けた方が良い
    • backgroundプロパティで指定するのが良い
      • 具体的には、list-stylenoneにした元で、background: url(画像) no-repeat left center/1em;と指定するのが良い
      • また、このままでは背景画像がリストに重なってしまうので、padding-left: 1.5em;と指定する
    • 例:HTMLファイルCSSファイル
  • list-styleプロパティ
    • list-style-typeプロパティ、list-style-positionプロパティ、list-style-imageプロパティは同時に指定することができる
    • 値の順番は好きな順
    • ただし、list-style-typeプロパティとlist-style-imageプロパティを同時に指定した場合は後者が優先される

3-13 クラスとIDを使った指定方法

  • 前提
    • 同じタグを複数使いたいが、一部の装飾を変えたい場合に用いる
  • クラスとIDとは?
    • タグに記入できる属性のこと
    • CSSと紐づけることでその部分のみ装飾を変えることができる
  • クラスを使う場合
  • IDを使う場合
  • タグをクラスやIDと組み合わせる場合
    • タグ.クラス名タグ#クラス名とすることで組み合わせることができる
    • また、.#の前後は空白を空けない
    • 例:HTMLファイルCSSファイル
  • クラス名とID名のルール
    • 空白を入れない、英数字とハイフンとアンダースコアのみ、一文字目は英字
  • 1つのタグに複数のIDやクラスをつける
    • 複数のIDやクラス同士を空白区切りで書く
    • IDとクラスのいずれも指定するのも良い
    • 例:class="blue red yellow"
  • クラスとIDの違い
    • 同じHTMLファイル内で使用できる回数
      • IDは同じHTMLファイル内で一回しか使用できない
      • クラスは何度も使用できる
      • IDの英語の意味を考えれば明らか
    • CSSの優先順位
      • クラスよりもIDの優先順位が高い
      • 同じプロパティを指定した場合はIDの方が適用される
  • IDを使ったページ内リンク

Progate(JavaScriptコース)でのメモ

JavaScript

  • 無名関数の場合
    • const 定数名 = function(引数){処理}
    • 定数名を関数として扱う
    • 呼び出しについては一般的
  • アロー関数の場合
    • const 定数名 = (引数)=>{処理}`
  • 戻り値
    • return 戻り値
    • returnで処理を終了するのも同じ
  • スコープ
    • 関数だけでなくif文やfor文もスコープを作る