source tree パスワード変更 (GitBashも
以下の記事を参考にした。
設定ファイルをバンバン消して、やったけど、
時間もかからず簡単だった。
再設定が大変だから、GitBashとSourceTreeはパスワードをきかれたら
適当にいれるのはやめたほうが良い。
Google Web Designer
Google Web Designer
https://www.google.co.jp/webdesigner/
入稿データが規定内に収まっているかチェックしてくれる。
こういうのが作れそう。
>>すぐに使えるHTML5バナーテンプレート
https://www.bannersnack.com/ja/html5-banner-maker.html
photoshop 画像アセット
内容* | 記述方法* |
---|---|
画質を落とす | test.jpg80% |
サイズを小さく | 80% test.jpg |
サイズを指定 | 300 x 300 test.jpg |
ディレクトリを設定 | test/test.jpg |
複数を設定 | test.jpg,test1.jpg,test3.jpg |
画面いっぱいに背景画像を出す
background-size:cover;
で十分だな
background-size:cover; 縦横比を保持して、表示領域全体を覆うように背景画像を表示する background-size:contain; 縦横比を保持して、表示領域に収まるように背景画像を表示する background-size:値指定 auto; 横幅は指定した値、縦幅は元の比率を保持して自動で表示する background-size:auto 値指定; 縦幅は指定した値、横幅は元の比率を保持して自動で表示する IEは11以上の対応ですが、最近はレスポンシブの普及によりIEは11のみでOKという案件も増えてきてるので、積極的に使っていきたいところです。
⇓図入りで分かりやすくまとめてある
-----------------------------------------------------------------------------------------------------
CSS
メディアクエリでCSS差し替え
メディアクエリは画面の解像度 といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。
/* ▼すべての場合に適用 */ div#sidebar { width: 100%; } /* ▼閲覧領域の横幅が640px以上の場合に適用 */ @media screen and (min-width: 640px) { div#sidebar { width: 160px; } } /* ▼閲覧領域の横幅が960px以上の場合に適用 */ @media screen and (min-width: 960px) { div#sidebar { width: 25%; } } /* ▼閲覧領域の横幅が1200px以上の場合に適用 */ @media screen and (min-width: 1200px) { div#sidebar { width: 300px; } }