実践Webデザインスキル - 第2章 Lesson7

ガイドを使ったWebデザインのベースを作成する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブサイトの横幅が決定したら、横幅に合わせてガイドを引きます。その方法について説明します。



この動画で学べること

・横幅に合わせてガイドを引く方法



ガイドを表示・非表示にする方法

ガイドの表示の方法は、メニューバーの表示から表示・非表示に進み、ガイドを選択でもできるのですが、
この機能はよく使うので、これからはショートカットキー
[Mac] command ⌘+:(コロン)
[Windows] Ctrl +:(コロン)
を使うようにしましょう。



ガイドを引いていこう

ヘッダー部分のを作るため、長方形選択ツールで幅1440px、高さ90pxの長方形を作成します。
この長方形に合わせて、ガイドを引いていきたいと思います。
やり方は、定規の部分からガイドを引きたい部分にドラッグ&ドロップです。



定規が表示されていない方は、ショートカットキー
[Mac] command ⌘+R
[Windows] Ctrl +R
で表示させてください。



今回のサイトでは、余白を30pxに統一しているのでえ、ヘッダーから30pxのところでもう一度ガイドを引いてください。
サイトによってそれぞれ違いますが余白には法則があります。
コーディングの時にも、この余白はとても重要になってくるので、必ず決めたサイズでデザインしましょう。



ガイドに合わせて要素を配置する、これを何度も繰り返して、必要な所にガイドを作成していきましょう。