ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/03/16
NEW
週刊ドットインストール(2023/03/16号)を更新しました!
PREMIUM
【旧版】Emmet入門
HTML/CSSを効率的にコーディングできるEmmet記法について学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
Emmet入門
HTML/CSSを効率的にコーディングするためのEmmet記法について見ていきます。
0%
動画レッスン一覧
(15)
未完了
#01 Emmet記法を使ってみよう
(02:50)
無料公開中
公式サイトの確認
Emmetの概要
パッケージのインストール
未完了
#02 基本的な操作を見ていこう
(02:36)
無料公開中
Emmet記法の書き方
展開の注意点
未完了
#03 属性やテキストを追加しよう
(02:08)
無料公開中
id、class、属性の追加方法
タグの中身を指定する方法
未完了
#04 同じ要素を複数作ってみよう
(02:28)
無料公開中
要素を複数作成する方法
属性に連番をつける方法
未完了
#05 階層を作ってみよう
(02:32)
子要素の表現
同階層の表現
上の階層に戻る表現
()を使ったグループ化
未完了
#06 暗黙的な補完機能を活用しよう
(01:20)
divタグの補完
ulタグの補完
tableタグの補完
未完了
#07 よく使うHTMLタグの記法を見ていこう
(01:38)
aタグ
scriptタグ
メタタグ
ul+
table+
未完了
#08 フォームに関する記法を見ていこう
(01:43)
フォーム関連タグ
未完了
#09 フィルターを使ってみよう
(02:32)
|e
|s
|c
|haml
未完了
#10 CSSに関する記法を見ていこう
(02:45)
styles.cssの作成
marginの記法について
paddingの記法について
未完了
#11 色に関する記法を使ってみよう
(01:33)
色を指定する記法
透明度を指定する記法
未完了
#12 よく使うCSSの記法を見ていこう
(02:20)
CSS関連の記法
チートシート
未完了
#13 記法で囲うアクションを使ってみよう
(02:27)
記法で囲うアクション
未完了
#14 アクションを計算に使ってみよう
(02:46)
画像サイズの更新
数式の評価
未完了
#15 Emmetをカスタマイズしてみよう
(02:59)
snippets.jsonの作成
動作確認
ギャラリー
このレッスンについて
最終更新日
2017年12月14日
バージョン情報
Atom 1.22.1 / Emmet 2.4.3
関連キーワード
(6)
基礎講座
(363)
初心者向け
(362)
HTML
(113)
CSS
(114)
Emmet
(3)
開発ツール
(62)
このレッスンを共有する