HTMLやCSSをサクサク書こう! Emmet基礎講座
4.6 (6 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.
44 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTMLやCSSをサクサク書こう! Emmet基礎講座 to your Wishlist.

Add to Wishlist

HTMLやCSSをサクサク書こう! Emmet基礎講座

テキストエディタ用のプラグインである「Emmet」を使って、効率よく そして 手早くマークアップ(コーディング)をしよう!
4.6 (6 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.
44 students enrolled
Last updated 10/2016
Japanese
Learn Fest Sale
Current price: $10 Original price: $35 Discount: 71% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • さまざまなテキストエディタで使用することが出来るプラグインである「Emmet」を使用する環境を整えることができます。(ビデオレクチャー上のテキストエディタは「Brackets」を使用しています)
  • Emmet の記述手法を身につけることで、効率よく 手早い HTML・CSS のマークアップ(コーディング)が行なえるようになります。
  • 架空のカフェサイトを作って行く中で、Emmetを使用した HTML・CSS のマークアップ(コーディング)の流れを理解することができます。
View Curriculum
Requirements
  • 本講座は、あくまでも Web制作を効率よく行なうためのテキストエディタ用プラグインである「Emmet」の導入方法 および 基本的な記述方法を学ぶ講座となっています。HTML や CSS の細かな解説などは行なっておりませんので、もし HTML などのスキルをお持ちでない方は 別途 各種講座や書籍などで学習されることをオススメいたします。
  • 本講座では、テキストエディタとして「Brackets」を使用しています。Emmetは「Sublime Text」や「Atom」、「Coda」や「Dreamweaver」など、さまざまなテキストエディタにインストールすることができますが、当講座のビデオレクチャーと同様の操作を行ないたい場合は、「Brackets」を使用することをオススメいたします。
Description

Webページを作成する際には、さまざまなテキストエディタやオーサリングツールを使用します。

それらのソフトは それぞれにマークアップやコーディングのサポートをする機能を持っていますが、逆に言えば それぞれに使い勝手が異なってしまう面を持っています。

その使い勝手の違いを補ってくれるものが、プラグイン(拡張機能)です。

そして、近年 HTML や CSS を効率よく また 手早く記述するためのプラグインとして利用されているのが「Emmet」です。

Emmet は、「Dreamweaver」や「Sublime Text」、「Atom」や「Coda」など、さまざまなテキストエディタにインストールをして使用することができる無料のプラグインです。

Emmet独自の省略記法を使い それを展開することで、従来 1つ1つ記述をして行かないといけない HTML や CSS のコードを、少量の記述で書いて行くことができます。

この講座は、Emmetの導入方法から基本的な記述の仕方を4時間弱のビデオレクチャーを通じて 学んでいただけるものとなっています。

また、単なる使い方のビデオレクチャーではなく、架空のカフェサイトを作成して行く流れの中で、自然と Emmetの記述方法を学べる構成となっています。

ぜひ みなさんのWeb制作の際のスキルの1つに Emmet を加えていただき、魅力的なWebページを生み出して行っていただければと思います。

Who is the target audience?
  • 「Webデザイナー」や「Webコーダー」などのお仕事をなさっている方に、作業を効率化する方法の1つとして Emmet の記法スキルを加えていただければと思います。
  • 「Webデザインのスキルを覚えたての方」や「これから実務に従事する方・従事したての方」が、効率がよく 手早いマークアップを行なうことで、たくさんの制作経験を積んでいただければと思います。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 25 Lectures Collapse All 25 Lectures 03:42:53
+
Emmet基礎講座(HTML編)
12 Lectures 01:44:20
  • あいさつ
  • Emmetの概要説明
  • Bracketsによる [拡張機能マネージャー] での「Emmet」のインストール
Preview 06:48

  • 素材の紹介
  • 「!」での基本テンプレートの挿入 および 調整
  • header要素、footer要素の挿入
  • id名の付いたdiv要素の挿入
Preview 10:32

  • h1要素をテキスト込みで挿入
  • コメントを挿入
  • nav要素の挿入
  • ul#gNav>ul*5要素の挿入
  • 素材からのテキスト挿入
ページのヘッダー部分のマークアップ
09:35

  • [Enter Abbreviation] を使用してのa要素の挿入
  • ul#gNav>ul*5>a要素の挿入と解説
  • コメントを挿入
  • p要素でキャッチを挿入
ナビゲーションのマークアップ
08:18

  • h2要素で中見出しを挿入
  • #message>p*5要素を挿入
  • 素材からのテキスト挿入
  • コメントを挿入
Welcomeメッセージ部分のマークアップ
05:49

  • #recommend>h3+p要素を挿入
  • h3要素、p要素を複製して3セットにする
  • 素材からのテキスト挿入
  • h3要素の中身をa要素で囲む
  • #recommend>(h3+p)*3要素の挿入と解説
  • コメントを挿入
レコメンドコンテンツ部分のマークアップ
07:43

  • h2要素で中見出しを挿入
  • 特殊文字をタグに書き換え
  • #galleryData>p*4要素を挿入
  • 素材からのテキスト挿入
  • 「Schedule」をa要素で囲み、p要素にid名「sBtn」を追加
  • コメントを挿入
ギャラリースペース紹介部分のマークアップ
10:05

  • ul#sitemap>li#list$$*4>dl>dt+dd要素を挿入
  • コメントを挿入
  • dt要素に素材からテキスト挿入
サイトマップのマークアップ(1)
08:52

  • 最初のdd要素にul.subList>li*4>aを挿入
  • ul要素をコピーし、他のdd要素にペーストして数を調整
  • li要素に素材からテキスト挿入
サイトマップのマークアップ(2)
07:21

  • 小見出し(h4要素)を挿入
  • 店舗情報をp#add要素で挿入
  • 住所の後に改行を追加
  • コピーライトをp#copyright>smallで挿入
  • 特殊文字をタグに書き換え
  • コメントを挿入
店舗情報・コピーライト部分のマークアップ
09:19

  • h1要素の中身を画像に変更
  • キャッチを画像に変更し、p要素にid名「mainImg」を追加
  • レコメンドコンテンツの各h3要素の中身を画像に変更
  • 「レコメンドコンテンツ」と「ギャラリースペース」の間に p#cafeImg>img要素を挿入
  • #galleryData内の1番上に p#galleryImg>img要素を挿入
画像の挿入
11:28

  • meta要素で説明文とキーワードを挿入
  • link要素で3つのCSSを読み込み
  • HTMLファイルの完成
meta要素・link要素のマークアップ
08:30
+
Emmet基礎講座(CSS編)
13 Lectures 01:58:33
  • 作業準備
  • bodyセレクタに背景色(#eee)と文字色(#333)を追記
  • headerセレクタのプロパティを設定
CSSコーディングの準備と基本的なコーディング手法
09:11

  • HTMLファイルのheader要素の内側を #headerWrap要素で囲む
  • #headerWrapセレクタのプロパティを設定
  • h1セレクタのプロパティを設定
  • #gNavセレクタのプロパティを設定
  • HTMLファイルの#headerWrap要素にclass名「clearfix」を追記
ページのヘッダー部分のCSSコーディング
11:08

  • #gNav liセレクタのプロパティを設定
  • #gNav li aセレクタのプロパティを設定
ナビゲーションのCSSコーディング(1)
10:03

  • #gNav li aセレクタのback-groundプロパティの値を transparentに変更
  • #gNav li a:hoverセレクタのプロパティを設定
  • #gNav li aセレクタに transitionプロパティを追記
  • HTMLファイルのナビの1つ目のa要素(ホーム)に class名「current」を追記
  • #gNav li a.currentセレクタのプロパティを設定
ナビゲーションのCSSコーディング(2)
09:39

  • HTMLファイルのメインイメージを囲む p要素に id名「mainImg」を追記
  • #billboardセレクタのプロパティを設定
  • #mainImgセレクタのプロパティを設定
メインイメージ部分のCSSコーディング
04:40

  • #contentsセレクタのプロパティを設定
  • h2セレクタのプロパティを設定
  • #message pセレクタのプロパティを設定
Welcomeメッセージ部分のCSSコーディング
09:00

  • #recommendセレクタのプロパティを設定
  • HTMLファイルの3つのレコメンドコンテンツを それぞれ .recommendBox要素で囲む
  • .recommendBoxセレクタのプロパティを設定
  • HTMLファイルの#recommend要素にclass名「clearfix」を追記
  • HTMLファイルの1つ目と2つ目の .recommendBoxにclass名「mRight20」を追記
レコメンドコンテンツ部分のCSSコーディング
10:53

  • .recommendBox pセレクタのプロパティを設定
  • #cafeImgセレクタのプロパティを設定
  • #galleryDataセレクタのプロパティを設定
  • #galleryImgセレクタのプロパティを設定
  • HTMLファイルの#galleryData要素にclass名「clearfix」を追記
カフェイメージ・ギャラリースペース紹介部分のCSSコーディング
08:26

  • #galleryData pセレクタのプロパティを設定
  • #sBtnセレクタのプロパティを設定
  • #sBtn aセレクタのプロパティを設定
  • #sBtn a:hoverセレクタのプロパティを設定
  • transitionプロパティの追記
ギャラリースペース紹介文・スケジュールボタンのCSSコーディング
12:39

  • footerセレクタのプロパティを設定
  • #sitemapセレクタのプロパティを設定
  • #sitemap li dl dtセレクタのプロパティを設定
サイトマップのCSSコーディング(1)
06:34

  • #list01、#list02、#list03セレクタのプロパティを設定
  • #list04セレクタのプロパティを設定
  • floatプロパティの追記
  • HTMLファイルの#sitemap要素にclass名「clearfix」を追記
サイトマップのCSSコーディング(2)
08:51

  • .subListセレクタのプロパティを設定
  • .subList aセレクタのプロパティを設定
  • .subList a:hoverセレクタのプロパティを設定
サイトマップのCSSコーディング(3)
06:15

  • h4セレクタのプロパティを設定
  • footer pセレクタのプロパティを設定
  • #addセレクタのプロパティを設定
  • #copyrightセレクタのプロパティを設定
  • Cafe の Webサイトの完成
  • チートシートを紹介
  • おわりに
店舗情報・コピーライト部分のCSSコーディング
11:14
About the Instructor
CCF アカデミー
4.8 Average rating
28 Reviews
85 Students
5 Courses
ウェブデザイン / IT / ソフトウェア

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

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