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

CSSボックスモデルをシミュレーションする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、CSSボックスモデルと呼ばれるWebページをレンダリングする際の仕組みを、AdobeIllustratorの中で擬似的に再現する方法について、ご紹介していきます。
講師:
07:27

字幕

このレッスンでは CSSボックスモデルと呼ばれる Web ページを レンダリングする際の仕組みを Adobe Illustrator の中で 疑似的に再現する方法について ご紹介していきます あなたが html とCSS の コーディングが得意でも そうではないにしても Web サイトのデザインを 担当するのであれば CSS ボックスモデルの理解は 欠かせないと思います まず最初は CSS ボックスモデルの考え方について サラッと触れておきましょう 今 ご覧いただいているのは ブラウザ内でブロックとして レンダリングされている要素の概念図です この中には3色に分かれた領域があります 一番内側の黄色い領域 ここはコンテンツ領域と言います ここにテキストですとか画像ですとか 中身が入る部分と思ってください その外側にあるオレンジ色の部分 ここをパディングと呼びます このブロックの縁と コンテンツの丁度 間に収まるー クッションの様な部分だと 考えてください 一番外側の赤い領域は マージンと呼ばれています マージンはこのブロックと他の要素の 丁度 余白になるような部分になります そしてこのブロックの パディングとマージン間に 今 黒い線が付いています これをボーダーと呼んでいます ブロックに対して CSS でボーダーを指定すると パディングの外側の部分 マージンの内側の部分 ここにボーダー すなわち線が表示されます ブラウザ内でブロックが レンダリングされているときは 一定の幅と高さが ある状態になっています 幅と高さはCSS によって 明確な数値で 指定されている場合もありますし パーセンテージですとか このコンテンツの分量によって 自動で調整されている場合もあります そして パディングとマージン こちらの数値もCSS によって 指定することが出来ます 仮にパディングを0(ゼロ)にした場合は この黄色いコンテンツと黒いボーダーが くっ付いてしまう状態になります ということで ここまで CSS ボックスモデルの考え方について ご紹介をしてきましたけれども ここからはこれを Illustrator で疑似的に 分かりやすく表現するための 手法についてお話ししていきます もう1つ別のファイルに移りましょう これはテキストエリアの中に 見出しと本文が流し込まれている サンプルです これに対して背景色を指定し パディングとボーダーを 疑似的に指定していきたいと思います まず最初に選択ツールを使って このテキストエリアを選択します 次にメニューバーの「書式」から 「エリア内文字オプション」を 開いてください 「プレビュー」にチェックを付けます そして この「オフセット」 というセクションの 「外枠からの間隔」 この数値を増やしていくと このテキストエリアの縁から 文字までの距離が どんどん増えていくのが分かります ここが外枠からの距離 今 20 ピクセルに指定しましたので ここが20 ピクセルになりました つまり この「エリア内文字オプション」の 「オフセット」 「外枠からの間隔」の数値は このブロックの中のパディングを 疑似的に表現しているとお考えください ここで「OK」を押します 今 外枠からの間隔を指定しましたので 文字がエリアの外にあふれてしまいました この右下に赤い「+」のマークが ついているときは テキストがあふれているよ という印です ですので このテキストエリアを 縦に伸ばして 全て見えるようにしておきます では 次に ここに背景色を 出していきたいと思います このテキストエリアに背景色を出すには 「アピアランス」を使ってみたいと思います 「アピアランス」パネルを引き出してきて 見やすくします ここから少しトリッキーなことを していきます 「アピアランス」のパネルには一番下に 新規塗りを足すアイコンがあります この「新規塗りを追加」アイコンを クリックして 色を背景色に変更します ここでは仮に黄色にしてみます 今 文字に黄色が 付いてしまいましたけれども 心配しないで このまま作業を進めてください 塗りを黄色に指定しましたら この後はこの一番下の 「 fx 」と言うアイコンをクリックします こちらは新規効果を 追加するためのアイコンです ここで「形状に変換」「長方形」を 選択します 「形状オプション」が出てきましたら 「幅に追加」と「高さに追加」 こちらの数値を 必ず0(ゼロ)にしてください そして「OK」を押します こうしますと 先ほど 文字のところに指定された塗りの色が 四角形 長方形に 変換された状態になります 次に この上から 「線」「塗り」「文字」と 重なっているアピアランスの 「塗り」を「文字」よりも下に ドラッグ&ドロップします そうすると「塗り」と「文字」の 重なり順が入れ替わって 文字が上の方に出てきました ここまでの作業と同様に テキストエリアを疑似的に表現した場合 例えば文字の量が増えたり テキストエリアを 大きさを変更したりしても 常に この余白が20 ピクセルである ということは変わりません もし これを長方形ツールの長方形で 背景色を付けてしまうと この様な状態にはなりませんので 常に長方形と文字を別々に 調節する必要が出てきてしまいます 文字量の増減ですとか 横幅の変更にも強いデータ作り ということで こちらの方法を是非 お試しいただければと思います ここまでCSS ボックスモデルと呼ばれる Web ページを レンダリングする際の仕組みを Adobe Illustrator の中で 疑似的に再現する方法について ご説明してきました ここでご紹介したように データを作成しておくと このドキュメントを マークアップエンジニアに渡した時に パディングが何ピクセルかと言うことを 正確にデータから 読み取ってもらうことが可能になります

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

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

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

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

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

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