Illustratorを使ったWebデザインのテクニック

段落スタイルと文字スタイルを使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、テキストに同じスタイルを繰り返し適用する際にとても便利な、段落スタイルと文字スタイルの作成と活用方法について、ご説明していきます。
講師:
09:55

字幕

このレッスンでは テキストに同じスタイルを 繰り返し適用する際にとても便利な 段落スタイルと文字スタイルの作成と 活用方法についてご説明していきます 今 ご覧いただいている画面には 数行のテキストが流し込まれた テキストボックスが 2つ用意されています どちらも 全く同じテキストを 複製したものです これから左側のテキストに 段落スタイルと文字スタイルを指定して それを使って右側のテキストに 同じスタイルを指定するやり方を ご紹介しましょう 段落スタイルを使うには 「メニューバー」の「ウィンドウ」から 「書式」 「書式」の中の「段落スタイル」を選択します 「段落スタイル」のパネルが出てきましたので 近くに移動しておきましょう それでは 左側のテキストボックスの1行目に 見出しのスタイルを 作っていきたいと思います まず この見出しにしたい部分を 文字ツールで選択して 文字サイズを大きくします 「文字パネル」を開いて サイズを21 ポイントにしておきます そして フォントを ヒラギノ角ゴシック Pro 太さをW6 にします 次に「段落パネル」を開いて 「段落の後ろの空き」を指定します 10 ポイント と指定しておきましょう これで段落の後ろに 10 ポイントの空きが 自動で付くようになりました 最後に色を指定しておきたいと思います 濃い目のオレンジを指定してみました では 今 この見出しに指定したスタイルを 新しい段落スタイルとして 登録してみましょう 「段落スタイル」のパネルで 一番下の「新規スタイルを作成」を クリックします そして この「段落スタイル1」 と言う名前のところを ダブルクリックします 名前を「見出し」とつけておきましょう この操作で 今 見出し部分に 指定したスタイルが 保存されました この「見出し」と名前を付けた 右側のところをダブルクリックすると 「段落スタイルオプション」が開きますので 指定内容を確認してみたいと思います 「基本の文字形式」の中に フォントがヒラギノ角ゴシック Pro スタイルは W6 サイズが21 ポイント 段落の後ろの空きが10 ポイント そして文字の色がこのオレンジに 指定されていることが分かります キャンセルをしておきます では 次に本文に対しても スタイルを指定していきましょう 本文の部分を選択して 書体をヒラギノ角ゴシック Pro の W3 にしておきます 文字サイズを14 ポイントにして 行送りの数値を 21 にしてみたいと思います そしてこの指定を もう一度段落スタイルに 保存したいと思います 右下から「新規スタイルを作成」を クリックして 今出て来た「段落スタイル2」 ここをダブルクリックします 名前を変更して 「本文」として リターンキー もしくは エンターキーを押して確定します 文字サイズを大きくしたことによって テキストボックスの下に テキストがあふれてしまいました 右下にこの「+」のマークが ついているときは 「溢れているテキストがありますよ」 という印です この様にボックスを伸ばして 下まで見えるようにしておきたいと思います そして 先ほど登録したー この 本文のスタイル指定内容を ダブルクリックして確認してみますと フォントがヒラギノ角ゴシック Pro スタイルW3 サイズが14 ポイント 行送り21 ポイント という指定になっていることが分かります 次に 今作った指定を この右側のテキストボックスにも 適用してみましょう 「文字ツール」を選んで 見出しにしたい部分を選択します そして「段落スタイル」パネルの「見出し」 登録した「見出し」という項目を クリックすると すぐに同じスタイルが適用されます では 今度 本文の部分です 本文の部分に一度クリックをして 「本文」というスタイルを選択しますと この段落全てに対して 同じスタイルが適用されます 文字を大きくしたことによって また文字が溢れましたので 選択ツールを使ってボックスを伸ばし 隠れていた部分を出しておきます ここまで見てきたように 段落スタイルは 同じ文字に対するスタイルを 段落まるごとに適用する という仕組みになっていました では この1つの単語だけに 違うスタイルを当てたい時 この場合はどうすれば良いでしょうか? その時は文字スタイルの方を 使いたいと思います 文字スタイルは文章の中の一部分だけに スタイルを指定する時の機能です 例えば本文の中にあるテキストリンク そのテキストリンクの指定をしてみましょう 文字ツールでテキストリンクの 指定を付けるところに 文字を反転させて選択しておきます そして 色をオレンジ 太さを ヒラギノ角ゴシック Pro の W6 にします そして 下線 下の線を付けます 選択ツールに持ち替えます この様なスタイルを テキストリンクのスタイルとして 登録しておこうと思います もう一度 文字ツールに持ち替えて 先ほどスタイルを変更した部分を選択します そして 「文字スタイル」パネルの下にある 「新規スタイルを作成」 ここをクリックして 新しく出て来た「文字スタイル1」 ここをダブルクリックした後に 「リンク」としておきます 登録が終わりましたので 右側をダブルクリックして 文字スタイルの内容を確認しましょう ヒラギノ角ゴシック Pro W6 下線が付いている状態 文字の色がこのオレンジに 指定されていることが分かります この様に 段落スタイルと 文字スタイルを設定しておくと あとからまとめて 設定を変更することが出来ます 例えば見出しをオレンジではなくて 青にしようとした場合 「段落スタイル」から「見出し」を ダブルクリックして 「文字カラー」の項目を ブルーに変えたいと思います そして「 OK 」を押すと 一気に見出しの色が変更されました この様に 後からスタイル 後からデザインを変更する場合に いちいち手作業で変えなくても 一度に変えることが出来る機能なので 非常に効率的に作業を進められます では 最後にもう一つだけ 便利なティップス(Tips)を ご紹介しておきたいと思います このファイルは保存して閉じておきます キーボードの Command+S もしくは Ctrl+S で ファイルを保存した後 閉じます そして 新しいドキュメントを作ります 何かテキストを入れておきましょう 文章を数行入れておきます では このテキストに 先ほどのドキュメントから 段落スタイルを持ってきたい時 その時は「段落スタイル」パネルの右上 こちらの「メニュー」から 「段落スタイルの読み込み」を選びます そして 先ほどの スタイルが指定されている ドキュメントを選んで 「開く」を押します この様にすると 段落スタイルのパネルの中に 「見出し」と「本文」という 先ほど作ったスタイルが 読み込まれてきました あとは適用したい個所を 文字ツールで選択して 段落スタイルをクリックするだけで 先ほどと同じスタイルを 適用させることが出来ます ここまで テキストに同じスタイルを 繰り返して適応する際にとても便利な 段落スタイルと文字スタイルの作成 そして活用方法について ご紹介してきました よく使う段落スタイルを作成しておいて 新規ドキュメントで読み込んで 活用してみてください

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。