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

内容

  • Webを支える技術でのインプット
    • 35分程度
    • 241ページから274ページ
    • 一部、本記事には記載していない
  • HTML/CSSの基本でのインプット
    • 80分程度
    • 88ページから103ページ

Webを支える技術のメモ

第15章:読み取り専用のWebサービス

15.1 リソース設計とは何か

  • リソース設計とは?
    • WebサービスやWebAPIの外部設計
    • どのようにリソースを分割し、URIで名前をつけ、相互にリンクを持たせるか
  • リソース設計で大事なこと
    • WebサービスとWebAPIを分けて考えない
    • Web上にあるリソースという点では変わらない技術なので
    • (以降では、"Webサービス"はWebAPIを内包する)

15.2 リソース指向アーキテクチャのアプローチ

  • リソース設計には一般的な設計手法が存在しない
  • 「RESTful Webサービス」により推奨される設計アプローチはある
    • (1)Webサービスで提供するデータを特定する
    • (2)データをリソースに分ける
    • (3)リソースにURIにより名前をつける
    • (4)クライアントに提供するリソースの表現(形式)を設計する
    • (5)リンクやフォームを利用してリソース同士を結びつける
    • (6)ユーザの標準的な利用方法を検討する
    • (7)エラーについて検討する

15.3~15.11

  • (本節は具体例なので割愛する)
  • (内容の理解はしたので、忘れた場合は本を再度読む)
  • (Qiitaの記事なども参考になるかもしれない)

第16章:書き込み可能なWebサービスの設計

16.1 書き込み可能なWebサービスの難しさ

  • 例:ブログ、SNS、など
  • 考えることが多い
    • 例:複数のユーザが同時に書き込みを行った時、同時に複数のリソースを更新する時、など

16.2~16.5

  • (本節は具体例なので割愛する)
  • (内容の理解はしたので、忘れた場合は本を再度読む)
  • (Qiitaの記事なども参考になるかもしれない)

HTML/CSSの基本のメモ

Chapter 3

3-1 CSSとは

3-2 CSSを適用させる方法

(1)CSSファイルを読み込んで適用させる

  • <head>内の<link>タグによりCSSファイルを指定
  • rel属性にstylesheet、href属性にCSSファイルをそれぞれ指定する
  • 特徴:複数のhtmlファイルで共有することができる(推奨)
  • 例:HTMLファイルCSSファイル

(2)HTMLファイルの<style>タグで指定する

  • HTMLファイル内の<head>タグ内に<style>タグで囲んで指定する
  • 特徴:特定のページのデザインを変えることができる
  • 例:HTMLファイル

(3)HTMLタグの中のstyle属性で指定する

  • HTMLタグの中にstyle属性を指定する
  • 特徴:一部分のデザインのみを変えることができる、メンテナンスが難しい
  • 例:HTMLファイル

3-3 CSSファイルを作ろう、3-4 CSSの基本の書き方を身につけよう

  • CSSセレクター、プロパティ、値という三つの部分に分かれる
  • セレクタ
    • どの部分を装飾するかを指定
    • 例:タグの名前、クラス、ID、など
  • プロパティ
    • セレクターで指定した部分の"何"を変えるのかを書く
    • 例:文字色、文字サイズ、背景色、など
    • プロパティをどのように変えるのかを指定する
    • 例:文字色であれば赤色や青色など
  • ルール
    • 半角英数字
    • 小文字で統一
    • 複数のセレクタに指定する場合は,区切り
    • 複数の装飾を指定する場合は;区切り
    • 単位を"必ず"指定する(絶対値のpxや相対値の%,rem
    • 要素の中の要素に指定することも可能
  • 例:HTMLファイルCSSファイル

3-5 文字や文章を装飾しよう

  • font-sizeプロパティ
    • 文字の大きさを指定するプロパティ
    • 値:数値(単位付き)orキーワード(small,large,など)
    • 例:HTMLファイルCSSファイル
    • 適切な文字サイズ
      • 文章主体のサイトであれば、14~18px程度
      • 文字サイズのバリエーションを増やしすぎない
  • font-familyプロパティ
    • フォントの種類を指定するプロパティ
    • 指定したフォントがない場合はブラウザのデフォルトのフォント
    • CSSの設定では複数のフォントをカンマで指定(先に指定されたものから適用)
    • 値:フォント名orキーワード(sans-serif,monospace,など)
    • 例:HTMLファイルCSSファイル
  • フォントの種類
    • 明朝体:筆で書いたような文字、長い文章に適切
    • ゴシック体:装飾がほとんどない文字、見出しなどの短い文に適切
    • 装飾系フォント:魅せるために作成された文字、使用するなら短い文
    • フォントは統一する、1~3種類まで
  • font-weightプロパティ
    • フォントの太さを指定するプロパティ
    • 太さのバリエーションが用意されていないフォントには適用されない
    • 値:キーワード(normal、bold、など、一般的)or 数値(1~1000)
    • 例:HTMLファイルCSSファイル
    • <h1>~<h6>bold
  • font-heightプロパティ
    • 行の高さを指定するプロパティ
    • 行の高さが文字サイズより小さい場合は行が重なるので注意が必要
    • 値:normal or 数値(単位なし、フォントサイズとの比率)or 数値(単位あり、文字サイズの指定の時と同様)
    • 行間をどれほど空けるかはfont-sizeに依存するので、単位なし数値で指定するべき
    • 例;HTMLファイルCSSファイル
  • text-alignプロパティ
    • テキストを揃える位置を指定する
    • 値:left,right,center,justify(両端揃え)
    • 例:HTMLファイルCSSファイル
    • 短文は中央揃えで長文は両端揃えにすることで見やすくなる