実践Webデザインスキル - 第9章 Lesson8

第7回:カテゴリー一覧を作成する方法-3

   

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

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

Webメディアのトップページのカテゴリー一覧を作成します。
ここでは、カテゴリー一覧のテキストを、テキストツールを使って作成し、行間の調整を行います。



この動画で学べること

・カテゴリ一覧の作成方法
・広告が入る部分を作成する方法



カテゴリ一覧の作成しよう

今回は、カテゴリ一覧を作成しましょう。
テキストツールに切り替えて、カテゴリ名を入力してください。
入力ができたら文字の確定をし、スタイルを変更します。




カテゴリ一覧を、見出しの下の点線から10pxの余白をとって配置させたいので、移動ツールに切り替えて位置の調整をします。
また、カテゴリ一覧の下にも10pxの余白を取りたいので、ものさしツールで測ってガイドを引いておいてください。




今引いたガイドに合わせて背景の大きさの調整を行なっていきましょう。
背景の四角形のレイヤーを選択した状態で、メニューバーの編集から自由変形に進み、バウンディングボックスを表示させます。
ガイドの線まで四角形を縮小させ、変形の確定をすれば、カテゴリ一覧の完成です。



広告が入る部分を作成しよう


最後に、カテゴリ一覧の下にある広告を挿入する部分を作成します。
長方形ツールに切り替えて、サイドバーと同じ横幅の四角形を作ってください。
今回は、高さはあまり気にしなくて大丈夫です。
四角形が作成できたら、カテゴリ一覧から30pxの余白をとって配置しましょう。




これで、サイドバーがすべて完成となります。
次からは新着記事一覧の作成に入って行きましょう。