今日は、以前作成した京都レストランのスマホ用LPを出発点として、
ページを分割した新しいバージョンの制作を開始しました。
以前はオートレイアウト（オートフレーム）を使わずに作っていましたが、
今回はオートフレームに慣れることを目的に、最初からオートフレームを使って進めることにしました。
まずは構造が比較的シンプルな Header と Footer から着手しました。
Header について
Header には Hamburger メニューを作成し、
クリックされた際にメニューをオーバーレイ表示する想定で作っています。
Footer について
Footer はオートフレームで作成しましたが、
途中で何度かやり直すことになりました。
最初は、
- フレームを作成
- そのフレームをオートフレームにする。
という手順で進めたところ、
パディングの影響なのかフレームの横幅が意図せず広がってしまい、うまくいきませんでした。
そこで方法を変え、
- すべての要素を先にフレーム内に配置
- ブロック単位で Shift + A を使ってオートフレーム化
という手順に変更しました。
この方法では、パディングの影響でフレーム幅が広がることもなく、
意図したレイアウトで作成することができました。
今後の予定
しばらくは、他のパーツについてもオートフレームを使って実装し、
オートフレームの使い方に慣れることを優先して進めていく予定です。
ページを分割した状態でのリンク設定については、
各パーツの作成が一通り終わってから取り組もうと考えています。
将来的には、
Tailwind CSS などに落とし込み、Next.js で実装することも視野に入れています。