Webページの文字に表情をつけよう! Webフォント基礎講座
4.5 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
15 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webページの文字に表情をつけよう! Webフォント基礎講座 to your Wishlist.

Add to Wishlist

Webページの文字に表情をつけよう! Webフォント基礎講座

CSS3より新たに追加された「Webフォント」を使って、これまでよりも多彩にWebページの文字表現を行なおう!
4.5 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
15 students enrolled
Last updated 2/2017
Japanese
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Webフォントの基本(概要・記述方法)を理解することで、これまでのようなユーザーマシンにインストールされたフォントの設定だけではなく、多彩なフォントによるWebページの文字表現を行なうことができるようになります。
  • アイコンフォントの設定により、情報をより視覚的に受け取ってもらうことができるようになります。
View Curriculum
Requirements
  • 本講座は、あくまでも Webフォントの基本を学ぶ講座となっています。HTML やCSSの基本については細かな解説などは行なっておりませんので、もし HTMLなどのスキルをお持ちでない方は 別途 各種講座や書籍などで学習されることをオススメいたします。
  • 本講座では、テキストエディタとして「Brackets」を使用しています。受講に際しては「Sublime Text」や「Atom」、「Coda」や「Dreamweaver」などのさまざまなテキストエディタにて受講いただけますが、ビデオレクチャーと同様の操作を行ないたい場合は「Brackets」を使用することをオススメいたします。
  • 講座内で使用をする教材( web_font_basics.zip )は、最初の講義「講座概要と受講準備」でダウンロードしていただけます。
  • Webフォントにつきましては、Webブラウザーの種類やバージョンによって対応状況が異なっています。Webフォント対応外のWebブラウザーやバージョンについては、ビデオレクチャー通りの表示にならない場合がありますことをご理解ください。各Webブラウザー対応状況:『 Can I Use ? | @font-face Web fonts 』( http://caniuse.com/#feat=fontface )
Description

Webページの文字へフォント(書体)の設定を行なう際には、CSSの font-familyプロパティを使用します。

font-familyプロパティで指定をしたフォントの表示には、 Webページを閲覧しているユーザーのマシンにそのフォントがインストールをされている必要があったため、これまでは Windows や Mac などにあらかじめインストールされているフォントファミリーを指定することが求められました。

また「どうしても このフォントで表示をしたい!」というような場合には、文字を画像化することで表現をして来ました。

そんな Webの文字表現に CSS3 から新たに実装されたものが『Webフォント』という機能です。

Webフォントは 表示に必要なフォントデータをサーバー上に保持することで、ユーザー側のマシンにフォントがインストールされているか否かを問わず、指定をしたフォントで文字の表示を行なうことができます。

この講座は、最初に Webページへフォントファミリーを指定する方法をおさらいし、その上で Webフォントの考え方や基本的な記述方法を学び、さらにアイコンフォントを使用する方法までを約2時間半のビデオレクチャーを通じて 学んでいただけるものとなっています。

ぜひ みなさんのスキルの1つに Webフォントを加えていただき、これまでよりも多彩なWebページの文字表現を行なっていただければと思います。

Who is the target audience?
  • 「WebデザイナーやWebコーダーなどのお仕事をなさっている方」 または 「Webデザインを勉強中の方」や「これから実務に従事する方・従事したての方」に、Webページの文字に対して さまざまなフォントを設定する手法として Webフォントのスキルを加えていただければと思います。
  • 趣味でWebページ作りを行なっている方へ、掲載したい情報のイメージに合ったフォント設定を行なうために、Webフォントのスキルを身につけていただければと思います。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 13 Lectures Collapse All 13 Lectures 02:27:28
+
フォント指定の基本 パート
4 Lectures 46:11
  • あいさつ
  • 講座の概要説明
  • 受講生が知っておくべきことや準備すべきこと
Preview 06:18

  • 素材の確認
  • font-familyプロパティの使用方法
Preview 13:26

  • ゴシック系フォントのfont-family指定(1)
  • ゴシック系フォントのfont-family指定(2)
Webページへの基本的なフォントファミリー指定(2)
11:55

  • 明朝系フォントのfont-family指定(1)
  • 明朝系フォントのfont-family指定(2)
Webページへの基本的なフォントファミリー指定(3)
14:32
+
Webフォント基礎 パート
7 Lectures 01:17:40
  • 素材の確認
  • Google Fonts の使用方法
  • 欧文フォント「Cinzel Decorative」の使用
欧文のWebフォントについて(1)
14:22

  • 欧文フォント「EB Garamond」の使用
  • 欧文フォント「Open Sans」の使用
欧文のWebフォントについて(2)
12:13

  • 欧文フォント「Limelight」の使用
  • 欧文フォント「Rock Salt」の使用
欧文のWebフォントについて(3)
08:12

  • Google Fonts + 日本語 早期アクセス の使用方法
  • 和文フォント「Noto Sans Japanese」の使用
和文のWebフォントについて(1)
08:25

  • 和文フォント「M+ 1p」の使用
  • 和文フォント「Rounded M+ 1c」の使用
  • 和文フォント「はんなり明朝」の使用
  • 和文フォント「こころ明朝」の使用
和文のWebフォントについて(2)
11:41

  • 和文フォント「さわらび明朝」の使用
  • 和文フォント「さわらびゴシック」の使用
  • 和文フォント「ニクキュウ」の使用
  • 和文フォント「ニコモジ」の使用
和文のWebフォントについて(3)
12:29

  • Webフォントデータを用意する方法の解説
  • Webフォントを読み込む方法の解説
自身でWebフォントをアップロードする方法
10:18
+
アイコンフォント パート
2 Lectures 23:37
  • Font Awesome の使用方法
アイコンフォントについて(1)
10:43

  • アイコンフォント「fa-book」の使用
  • アイコンフォント「fa-map-marker」の使用
  • アイコンフォント「fa-shopping-bag」の使用
  • アイコンフォント「fa-pencil-square-o」の使用
  • おわりに
アイコンフォントについて(2)
12:54
About the Instructor
CCF アカデミー
4.8 Average rating
28 Reviews
85 Students
5 Courses
ウェブデザイン / IT / ソフトウェア

『 Design of CreativeWork 』
 ー クリエイティブワーク( 仕事・人・スキル・ワークフロー )の最適化 ー

クリエイティブセンター福岡(CCF)は、福岡全体で SOHO/フリーランサーや制作会社が 仕事や教育を通じて大きな有機的に繋がっている状態を構築し、クリエイティブワークの最適化を図ります。
そして、CCFアカデミーでは オンライン/オフラインの教育コンテンツにより、クリエイターやマーケター、プランナーの支援をすることで、個人の教育サポート、ひいては クリエイティブ業界全体のサポートを行います。