制作のポイント
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。
メモ
【先生より、コーディング系おすすめサイト】
・coliss
・MDN Web Docs
・PhotoshopVIP
【作業について】
・先生は、ワイヤーフレームを印刷したら手書きでpxなど書き込み、横に置いて見ながら作業するのがおすすめとのこと
・本は、このサイトを作ってみましょうのような本より、CSSサンプル集のような「このCSSでこんなことができます」というようなサンプルが羅列された本がよい
※そこまで頻繁には内容は変わらないけど、数年前とかの本だと情報が古く今のHTML・CSSのバージョンに追い付いていない場合があるので、なるべく現行のバージョンに対応した本を選ぶ
Photoshopでのワイヤーフレーム制作
【パターン1】
①新規作成→横960px×縦3000pxくらい（増えてOK）、解像度72、RGB、カンバスカラー白、アートボードの☑外す⇒OK
②イメージタブ→カンバスサイズ→幅1280px、カンバスカラー：薄いグレーなどわかりやすい色→OK
③高さが足りなくなったら、カンバスサイズ→基準点を↑に調整して、高さを増やす
④普通に長方形ツールなどで白い部分を増やして作業
【パターン2】こっちのがやりやすいかも
①新規作成→横1280px×縦3000pxくらい、解像度72、RGB、カンバスカラー：薄いグレーなど、アートボードの☑外す⇒OK
②薄いグレー+真ん中白でふたつ長方形ツールで背景作る
③長さが足りなくなったら、カンバスサイズの変更後に②の2つをそれぞれプロパティで高さ変えるだけでOK
Photoshopでのガイド引き方
定規から引っ張ってくるとぴったり希望の位置に置くのが難しい
↓
表示→ガイド→ガイドを新規作成→横線：水平方向、縦線：垂直方向でぴったり作れる
・ガイドが不要になったら、移動ツールでガイドを定規まで入れ込めば消える
・【ctrl+：】でガイドの表示・非表示切り替えができる
・【ctrl+0】で全体表示、【ctrl+1】で100％表示できる