講座内容

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

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

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

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

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

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

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

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

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

受講生が購入したその他のコース

コースの内容

Emmet基礎講座（HTML編）

講座概要と受講準備
HTMLのひな形などのマークアップ
ページのヘッダー部分のマークアップ
ナビゲーションのマークアップ
Welcomeメッセージ部分のマークアップ
レコメンドコンテンツ部分のマークアップ
ギャラリースペース紹介部分のマークアップ
サイトマップのマークアップ（１）
サイトマップのマークアップ（２）
店舗情報・コピーライト部分のマークアップ
画像の挿入
meta要素・link要素のマークアップ

Emmet基礎講座（CSS編）

CSSコーディングの準備と基本的なコーディング手法
ページのヘッダー部分のCSSコーディング
ナビゲーションのCSSコーディング（１）
ナビゲーションのCSSコーディング（２）
メインイメージ部分のCSSコーディング
Welcomeメッセージ部分のCSSコーディング
レコメンドコンテンツ部分のCSSコーディング
カフェイメージ・ギャラリースペース紹介部分のCSSコーディング
ギャラリースペース紹介文・スケジュールボタンのCSSコーディング
サイトマップのCSSコーディング（１）
サイトマップのCSSコーディング（２）
サイトマップのCSSコーディング（３）
店舗情報・コピーライト部分のCSSコーディング

講師のプロフィール

4.19 Calificación
1034 Estudiantes
5 Cursos

ＣＣＦアカデミー

ウェブデザイン / IT / ソフトウェア

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

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

受講生からのフィードバック

コース評価

レビュー

あっこ M

28-04-2021

わかりやすいです。ただしvscodeエディタでは動かないエメットもありました。調べています。

Masaki Tanioka

22-04-2021

とてもわかりやすくてemmet入力が一気に学習できましたみなさんにもおすすめします。

M T

04-03-2021

顔が見れて、説明もとても聞きやすく、丁寧でわかりやすいので、楽しく終えられました。4ヶ月前からhtml・css・ruby・rails・sql等の基礎を勉強し、アプリ作成し終えた後、htmlの知識が弱すぎることに気づき、もう一度復習の為見させていただきましたが、今までemmet機能を知らず１から書いていたので、サクサク書けるようになり、もっと楽しくなりました。

こちらへお入りください

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

テキストエディタ用のプラグインである「Emmet」を使って、効率よくそして手早くマークアップ（コーディング）をしよう！