HTMLとCSS概要
HTML 内→外
１．文書構造（マークアップ）
※h1～h4、p、リスト（3種類）、表、画像
２．HTML5.2新要素でセクショニング設定
※header,footer,main,section,article,aside,time他
３．div要素でレイアウトブロックを設定（class名）
４．文法チェック（HTML Validator）
CSS 外→内
１．リセットCSS（ブロックレベル要素の値を初期化する）
２．クラス名を利用してレイアウトブロックの外側から設定する
３．文字の装飾
ネット上から文章をお借りしてコーディングしていくと勉強
タグについて
h1はテーマの最優先見出し
pはテーマの要約
<divclass="container"><h1>テーマの最優先見出し</h1><p>テーマの要約</p></div>ボックスモデル
Braketsで色出し
カーソルをcolorやbaclgroundの値に合わせてCtrl+Eキーで色が出せる
paddingとは
paddingを入れる＝読みやすくする、ということです。
h1とpの関係
bodyの初期値
bodyの初期値はfont-sizeが16pxから
marginの相殺
h1{
margin-bottom:10px ;
}
p{
margin-top: 20px;
}
読みやすい幅
16px × 40word ＝ 640px が最大
640px と 300pxの2つのコンテンツを並べるイメージ
.container{width:640px;}heightは下に乗っかるだけ
paddingのせいで高さが変わる
box-sizing
box-sizingは、値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。
小セレクタ
Photoshop
初期設定
写真の選び方
写真は全体の印象の色で選ぶ
似たような色、全部赤っぽい色だと使いづらいので、
最初は赤、次は青みたいに選びましょう。
スマートオブジェクトに変換
※インスタンス（分身）を作成
オブジェクト 分身
（元データ） ＞ （仮データ）
ラスタライズ スマートオブジェクト
1つの画像や文字をオブジェクト（元データ）と言います。
スマートオブジェクトは、代わりのものを用意しているので、
拡大しても影響がないのはこのためです。
加工前提にするときは、スマートオブジェクトにせず、画像を拡大するときだけスマートオブジェクトを使いましょう！
Photoshopは拡大縮小の再計算ができないので、その際はスマートオブジェクトを使わないといけません。
CC以降
１．アセット生成（レイヤー名で書き出し）
全てのバージョン
２．JavaScriptで書き出し
アスペクト比
縦と横のアスペクト比を保ったまま拡大・縮小
バージョンによって、自由変形でShiftキーが必要かは変わります。
画像と新規作成のドキュメントの関係
１．コピー
２．クリップボードに格納（メモリを消費）
３．新規作成（クリップボード内の大きさ）
４．ペースト
解像度
配置だと、中心に仮置きされます。
配置だと解像度が無視されます。
コピー＆ペーストは解像度は変わらないです。
メモリーを無駄にしない方法
ダウンロードした画像を開いて、ファイルを開く、でメモリを無駄遣いしないです。
その後、移動ツールに持ち替えて、下記画像のように行えば良いです。
Ctrl+Shift+I(Invert) 選択範囲を反転
レベル補正
Web画像作成のロードマップ
1か月目 ツールの使い方に慣れる
2か月目 小さい作品、バナー広告作成
3か月目 ワイヤーフレーム、カンプ作成
4か月目 カンプから画像を書き出して、ページ作成
5か月目 LP（1枚もの）作成
6か月目 ポートフォリオ（PDF）を作成
バナー広告（100個以上作成）
1週間に5個、1か月に20個、5か月で100個
バナーを短時間でできるのが就職には早いです。
