Webの練習

フレックスボックスのメモ

• フレックスボックス
  ・主軸（左→右）と交差軸（上→下）
• コンテナ用のプロパティ
  ・flex-direction
  ・justify-content
  ・align-items
  など
• アイテム用のプロパティ
  ・order
  ・flex-grow
  など
• flex-directionでcolumnにすると、主軸（上→下）と交差軸（左→右）
• justify-contentは主軸に沿った配置を指定する
  align-itemsは交差軸に沿った配置を指定する
• flexの値
  0 1 auto（初期値）は、親のwidthプロパティによって幅が決められるが、コンテナに入りきらない場合は最小サイズまで縮小。逆にコンテナに空き領域がある時は、幅は広がらない
  1 1 autoは、親のwidthプロパティによって幅が決められるが、コンテナに入りきらない場合は最小サイズまで縮小。逆にコンテナに空き領域がある時は、幅を広げて埋めようとする
  0 0 autoは、親のwidthプロパティの幅が完全に固定される。

フレックスボック1

フレックスボック2

フレックスボック3

フレックスボック4

フレックスボック5

フレックスボック6

グリッド

background-image

リストの画像の表示

フレックスボック（画像の大きさは32x32）

※画像を実寸（16x16）で作る時は、height: 16px;、width: 16px;は必要なし

• 左側にAの画像を表示

背景画像として表示

• 左側にAの画像を表示

同じレイアウトで異なる高さの場合の対策

CSSの書き方

• ボタンを作るなら、まずベースのボタンを作る。そして、色が違うボタンならその指定、角丸のボタンならその指定
• htmlに部品のクラス名を指定し、cssはその部品のクラス名にスタイルを適用する。これにより、詳細度は高くならない
• cssを上書きするような特定の場所に指定する方法は良くない、どこでも使えるクラスを作って、それを組み合わせるのがいい
• idセレクタ場所使わない、子孫セレクタも推奨しない
• ただ、上記4つの書き方（OOCSS）は汎用的なクラスが増えて、管理が難しくなるケースあり
• cssの名前は
  色、幅、固有の場所などではなく、
  機能などで指定。
  例
  色、.red 機能、.warning
• cssの名前は一貫性があるようにする

VSCode

ファイルを開く

1. 開きたいファイルを選択
2. スペースキーを押す

フォルダを開閉

1. 開きたいフォルダを選択
2. 十字キーの右で開く、左で閉じる

ファイルを削除

1. 削除したいファイルを選択
2. ショートカット command と ×

左にあるフォルダ内容の開閉

1. command と b で開く、閉じる

画面に全てのテキストが見えるようにする

1. ページを開いたら、option と z

複数行を一度に変更

1. 変更したい箇所にカーソルを入れる
2. ctrol と optionキーを押す
3. 上記の状態で、マウスを使ってカーソルを伸ばす（引っ張る）

コメントアウト

1. コメントアウトしたい箇所を選択
2. command と /

カラーピッカーを表示

1. 何かの色を設定
2. カラーチップにマウスを合わせるとカラーピッカーが表示されるので、マウスを持っていき、任意の色を選ぶ

2つのファイルの差を確認

1. 1つ目のファイルを選択して右クリック「比較対象の選択」
2. 2つ目のファイルを選択して右クリック「選択項目と比較」

ブラウザでのリアルタイム確認（拡張機能Live Preview）

1. 画面右上にある「プレビューの表示」をクリック
2. 2画面になるので、プレビュー画面の右上にあるハンバーガーメニューをクリック
3. 「ブラウザで開く」をクリック

イラレ、同じ場所にコピペ

1. command + c で、オブジェクトをコピー
2. command + f で、ペースト

html、デバイスによって違う画像を読み込む

ドリームウィーバー

_notesを作らない

https://webnetamemo.com/coding/201612093986

The Long Goodbye