Emmet-HTML編:SublimeText3

公開日: : HTML+CSS ,

HTMLファイルであるか確認

拡張子「.html」で保存したファイルを編集しているか確認。
もしくはCtrl+Shift+Pキーで表示された画面に「html」と入力し「Set Syntax: HTML」を選択。

HTML

Emmetの記述をHTMLに展開

Tabキー or Ctrl+Eキー

HTMLの基本構造を作る

HTML5 は「!」か「html:5」

!

Tabキー or Ctrl+Eキーで展開

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
  • HTML4.01 Strict は「html:4s」
  • HTML4.01 Transitional は「html:4t」
  • XHTML1.0 Strict は「html:xs」
  • XHTML1.0 Transitional は「html:xt」
  • XHTML1.1 は「html:xxs」

要素名を記述して展開する

img

Tabキー or Ctrl+Eキーで展開

<img alt="" />

 

入れ子構造を作る

「>」が入れ子を表す記号

ul>li

Tabキー or Ctrl+Eキーで展開

<ul>
  <li></li>
</ul>

同じ要素を複数作る

「*」が同じ要素を複数作る記号

ul>li*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

グループ化する

「( )」がグループ化の記号

ul>(li>a)*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

グループ化しないと・・・

ul>li>a*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
  </li>
</ul>

要素内に文字を入れる

「{ }」が要素内文字の記号

ul>(li>a{項目})*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li><a href="">項目</a></li>
  <li><a href="">項目</a></li>
  <li><a href="">項目</a></li>
</ul>

連番を作る

「$」が連番の記号

ul>(li>a{項目$})*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li><a href="">項目1</a></li>
  <li><a href="">項目2</a></li>
  <li><a href="">項目3</a></li>
</ul>

「$$」で2桁の連番

ul>(li>a{項目$$})*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li><a href="">項目01</a></li>
  <li><a href="">項目02</a></li>
  <li><a href="">項目03</a></li>
</ul>

属性を指定する

[属性名=属性値]が属性指定の記号

ul>(li>a[href=menu$.html]{項目$$})*3

Tabキー or Ctrl+Eキーで展開

<ul>
  <li><a href="menu1.html">項目01</a></li>
  <li><a href="menu2.html">項目02</a></li>
  <li><a href="menu3.html">項目03</a></li>
</ul>

id属性を指定する

「#」がid属性指定の記号

ul#nav>(li>a[href=menu$.html]{項目$$})*3

Tabキー or Ctrl+Eキーで展開

<ul id="nav">
  <li><a href="menu1.html">項目01</a></li>
  <li><a href="menu2.html">項目02</a></li>
  <li><a href="menu3.html">項目03</a></li>
</ul>

class属性を指定する

「.」がclass属性指定の記号

ul#nav>(li.menu$$>a[href=menu$.html]{項目$$})*3

Tabキー or Ctrl+Eキーで展開

<ul id="nav">
  <li class="menu01"><a href="menu1.html">項目01</a></li>
  <li class="menu02"><a href="menu2.html">項目02</a></li>
  <li class="menu03"><a href="menu3.html">項目03</a></li>
</ul>

セットタグをまとめて作る

「+」がtableやdl等のセットタグまとめて作成の記号
※最小構成なので後からコピペすることになる

table+

Tabキー or Ctrl+Eキーで展開

<table>
  <tr>
    <td></td>
  </tr>
</table>

関連記事

Emmet

TabキーでEmmetを展開:Dreamweaver CS6

Dreamweaver CS6でEmmet(次世代ZenCoding)をインストールした場合、Emmetの展開ショートカットであるCtrl+Eキーが初期ショートカットとバッティングしています。使いやす...

記事を読む

icon_resetcss

用途に応じたresetCSSを選ぶ

用途に応じたresetCSSを選んで使えるようにメモ。 normalize.css HTML5やスマホも含めていい感じにresetする場合。細かく指定してあるのでinputタグの新規属性なんか...

記事を読む

Emmet

Dreamweaver CS6にEmmetをインストール

Dreamweaver CS6でEmmet(次世代ZenCoding)をインストールして使えるようにします。下記サイトからDreamweaver用Emmetインストールファイル「Emmet.zxp」を...

記事を読む

Emmet

Emmetのlangをjpに変更:Dreamweaver CS6

初期状態のEmmetで「html:xt」を展開すると下記のようなソースコードになります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

記事を読む

icon_caniuse

HTML5,CSS3のブラウザ対応状況を調べる

HTML5のタグやCSS3のプロパティのブラウザ対応状況を調べたい場合は「Can I use...」で調べる。 Can I use... ...

記事を読む

icon_hr

どのブラウザでもhrをいい感じに表示する

hrタグをブラウザ標準のデザインで表示すると微妙に見た目が違う。同じように見せるにはborderで指定。 hr { border: 0; border-top: solid 1px #0...

記事を読む

icon_extractedcss

HTMLからCSSセレクタを自動生成

CSSセレクタをいちいち書くのは面倒なので、HTMLから自動生成するサービス。 extractCSS 以下のコードで試すと、こんなセレクタが生成される。設定でidのみやclassのみ、子要...

記事を読む

icon_fontawesome

アイコンをWebフォントで表示する

サイトで使うアイコンにWebフォントを利用する方法。Webフォントアイコンを利用すると色や大きさを変更するのが容易。しかも大きさを変えても劣化しないので使い勝手が良い。 Font Awesome ...

記事を読む

icon_boxsizing

幅の計算が楽になるbox-sizing

box-sizing -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box...

記事を読む

Emmet

Emmetの<!doctype html>を<!DOCTYPE html>に変更:Dreamweaver CS6

Emmetで「html:5」を展開すると下記のようなソースコードになります。 <!doctype html> <html lang="ja"> &...

記事を読む

wp
WordPressフロントページ設定とテンプレート

固定ページに最新投稿一覧を表示させた時の使用テンプレートが何なのか調べる機会があったので保存。 管理画面「設定」→「表示設定」の「フロントページの表示」 「最新の投稿」選択時 フロントページ...

js
GoogleMap左上の白い枠を消す

左上の白い枠を消してほしいという要望が多いので。よく使うマップコードをスクラップ。 <!doctype html> <html> <head>...

wp
WordPressでよく使う関数

string get_site_url( ] ] ) 管理者ページの「設定」-「一般」の「WordPressのアドレス(URL)」 現在のブログのサイトURL取得 [php]<?php ...

wp
WordPressにFacebookのいいねボタン

WordPressにFacebookのいいねボタンを表示する。 コピペで対応したい時用 <body>の直後に記述するコード <div id="fb-root&qu...

js
スムーススクロールを作る – 応用

指定位置にするするとスクロールするプログラムを作ります。 必要な値は? ページ内スクロールをした際のゴール地点「y座標」の値 画面に必要なパーツは? 高さのあるコン...

→もっと見る

    • icon_sublime1
      41,217 views

      ファイルの操作 ファイル名を検索して開く Windows:Ctrl+P Mac:Cmd+P 表示された入力欄にファイル名の一部を入力すると検索結果が表示されるので選択して開きます。 使用言語の指定 Windows:Ctrl+Shift+P Mac:Cmd+Shift+P 表示された入力欄に使用する言語名の一部を入力すると検索結果に「Set Syntax」が表示されるので選択しま...

    • 曜日番号
      17,999 views

      現在の曜日番号を表示 [php]<?php //現在の曜日番号(日:0 月:1 火:2 水:3 木:4 金:5 土:6)を取得 $weekno = date('w'); //現在の曜日番号出力 echo $weekno; ?>[/php] 現在の曜日を表示 [php]<?php //日本語の曜日配列 $weekjp = array( '日', //0 ...

    • wp
      8,630 views

      WordPressの固定ページに投稿ページの最新記事を表示する。 [php]<?php //最新5件を表示 $paged = get_query_var('paged'); //現在のページ番号 $num = 5; //表示件数 query_posts('posts_per_page='.$num.'&paged='.$paged); if ( have_posts() ) :...

    • groupby
      6,344 views

      まずここをチェック!を先に 「フィールド名=NULL」はダメ 「フィールド名 IS NULL」を使う やりたいこと 会員を全員の名前を表示したい 最新の予約日付を表示したい 使用するテーブル 会員テーブル [ps]mysql> SELECT * FROM member; +----+--------+ | id | name | +----+----...

    • icon_kaiten
      5,788 views

      jQueryのanimateメソッドを使って要素を回転させてみるプログラム。 サンプルデータ [js] $('#box1').animate( {'z-index': 1},//z-indexを0から1に変更する { duration: 1000, //アニメーションの時間 //ステップ中の処理 //引数num:処理途中の変化している値 step: f...

PAGE TOP ↑
←幅を狭くする