実践Webデザインスキル - 第11章 Lesson5

第3回:記事ページの本文の作成方法-3

   

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

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

記事本文の中の見出しを、シェイプツールやテキストツールを利用して作成していきます。



この動画で学べること

・見出しの作成方法
・背景の大きさを調整する方法



長方形ツールもテキストツールで記事の見出しを作っていこう

今回は、記事の見出し部分を作成していきましょう。
テキストから見出しまでは40pxの余白がありますので、ガイドを引いておきましょう。



見出しのアイコンを作成していきます。
長方形ツールに切り替えて、幅10px、高さ50pxの長方形をつくり、オプションバーから塗りをオレンジ、線をなしに設定します。
長方形ができたら、移動ツールに切り替えてガイドに合わせて配置します。
次に、見出しの文章を作成しましょう。
テキストツールに切り替えて、文字を入力します。
一度文字の確定をし、スタイルの変更を行なっていきましょう。
文字が完成したら移動ツールに切り替え、アイコンから18pxの余白をとって配置します。
最後にアイコンとテキストを中央揃えにすれば、見出しの完成です。




テキストを作り、背景の調整をしよう

次に、見出しの下のテキスト部分を作成しましょう。
見出しから28pxの余白をとって、ガイドを引きます。
テキストツールでテキストボックスを作成し、文字を入力してスタイルの変更をしていきましょう。



最後に背景の高さが足りないので、調整する必要があります。
テキストから20pxの余白をとってガイドを引き、背景の長方形レイヤーを選択してバウンディングボックスを表示させてください。
先ほど引いたガイドまで引き伸ばせば、記事部分の完成です。