質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Emmet

Emmetは、HTMLやCSSの記述を簡略化し、コーディングを高速化するテキストエディタの拡張ライブラリです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2114閲覧

独自のEmmetHTMLフォーマットを作ったのですが、改善点などあれば教えてください、お願いします。

makoto-n

総合スコア436

Emmet

Emmetは、HTMLやCSSの記述を簡略化し、コーディングを高速化するテキストエディタの拡張ライブラリです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/08/03 12:42

編集2016/08/04 08:55

EMMETに組み込むソースも記述します。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="canonical" href=""> 5 <meta charset="UTF-8"> 6 <meta name="author" content=""> 7 <meta name="copyright" content="copyright&copy;" /> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <meta name="format-detection" content="telephone=no, email=no, address=no"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <meta http-equiv="Imagetoolbar" content="no"> 13 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 14 <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 15 <link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon.png"> 16 <link rel="manifest" href="manifest.json"> 17 <meta name="theme-color" content="#ffffff"> 18 <meta name="msapplication-TileColor" content="#ffcc22"> 19 <meta name="msapplication-TileImage" content="mstile-144x144.png"> 20 <meta name="msapplication-config" content="browserconfig.xml" /> 21 <link rel="stylesheet" href="css/style.css"> 22 <title>site-title</title> 23 <meta name="apple-mobile-web-app-title" content="site-title"> 24 <meta name="application-name" content="site-title"> 25</head> 26<body> 27 <header><div id="header"> 28 29 </div></header> 30 <nav><div id="nav"> 31 32 </div></nav> 33 <main><div id="main"> 34 35 </div></main> 36 <footer><div id="footer"> 37 38 </div></footer> 39<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 40<!--[if lte IE 8]> 41 <script src="js/html5shiv.min.js"></script> 42 <script src="js/selectivizr-min.js"></script> 43<![endif]--> 44</body> 45</html>

↑フォーマット
html5の要素は

css

1margin: 0; 2padding: 0;

をしてレガシーブラウザを考慮したスタイルでいこうと思っています。

↓EMMET

"html": { "profile": "html", "snippets": { "!!": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n\t<link rel=\"canonical\" href=\"\">\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"author\" content=\"\">\n\t<meta name=\"copyright\" content=\"copyright&copy;\" />\n\t<meta name=\"description\" content=\"\">\n\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n\t<meta name=\"format-detection\" content=\"telephone=no, email=no, address=no\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<meta http-equiv=\"Imagetoolbar\" content=\"no\">\n\t<link rel=\"icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"apple-touch-icon\" sizes=\"192x192\" href=\"/apple-touch-icon.png\">\n\t<link rel=\"manifest\" href=\"manifest.json\">\n\t<meta name=\"theme-color\" content=\"#ffffff\">\n\t<meta name=\"msapplication-TileColor\" content=\"#ffcc22\">\n\t<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">\n\t<meta name=\"msapplication-config\" content=\"browserconfig.xml\" />\n\t<link rel=\"stylesheet\" href=\"css/style.css\">\n\t<title>site-title</title>\n\t<meta name=\"apple-mobile-web-app-title\" content=\"site-title\">\n\t<meta name=\"application-name\" content=\"site-title\">\n</head>\n<body>\n\t<header><div id=\"header\">\n\t\t\n\t</div></header>\n\t<nav><div id=\"nav\">\n\t\t\n\t</div></nav>\n\t<main><div id=\"main\">\n\t\t\n\t</div></main>\n\t<footer><div id=\"footer\">\n\t\t\n\t</div></footer>\n<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\n<!--[if lte IE 8]>\n\t<script src=\"js/html5shiv.min.js\"></script>\n\t<script src=\"js/selectivizr-min.js\"></script>\n<![endif]-->\n</body>\n</html>" }

すみません、一読をお願いします。
OGPにつきましては今回書き加えていません。
<meta http-equiv="Imagetoolbar" content="no">はIe6用に書いています。

追記2016/8/4

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="canonical" href=""> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <meta name="author" content=""> 7 <meta name="copyright" content="copyright&copy;" /> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <meta name="format-detection" content="telephone=no, email=no, address=no"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 13 <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 14 <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon.png"> 15 <link rel="manifest" href="manifest.json"> 16 <meta name="theme-color" content="#ffffff"> 17 <meta name="msapplication-TileColor" content="#ffcc22"> 18 <meta name="msapplication-TileImage" content="mstile-144x144.png"> 19 <meta name="msapplication-config" content="browserconfig.xml" /> 20 <meta http-equiv="content-style-type" content="text/css"> 21 <meta http-equiv="content-script-type" content="text/javascript"> 22 <link rel="stylesheet" href="css/style.css"> 23 <title>site-title</title> 24 <meta name="apple-mobile-web-app-title" content="site-title"> 25 <meta name="application-name" content="site-title"> 26</head> 27<body> 28 <header><div id="header"> 29 30 </div></header> 31 <nav><div id="nav"> 32 33 </div></nav> 34 <main><div id="main"> 35 36 </div></main> 37 <footer><div id="footer"> 38 39 </div></footer> 40<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 41<!--[if lte IE 8]> 42 <script type="text/javascript" src="js/html5shiv.min.js"></script> 43 <script type="text/javascript" src="js/selectivizr-min.js"></script> 44<![endif]--> 45</body> 46</html>

こうなりました。
どうでしょうか?
<meta http-equiv="content-style-type" content="text/css"><meta http-equiv="content-script-type" content="text/javascript">を記述することで順位がさがるとかありえる話ですか?
seo的に。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mr_Roboto

2016/08/03 12:56

独自のHTMLのフォーマットってどういう意味ですか? 改善とは、現状何が問題だと思っているのですか?
makoto-n

2016/08/03 13:00

HTMLのベースに使用と思っているコードです。 改善にたいしてはうまく答えられないのですが、ここはこうした方がいいとか教えてくださったらと思って質問しました。 ちなみにOGPは書き加えていないです。
Mr_Roboto

2016/08/03 13:06

Emmetで!から出力されるテンプレートってことですか? OGPってのは、私は知りませんので質問に追記されると良いかも知れませんね。
makoto-n

2016/08/03 13:08

そうですそうです。 OGPのことわかりました、付け加えておきます。 ありがとうございます。
Mr_Roboto

2016/08/03 13:18

タイトルかタグにEmmetを入れるといいと思いますよ、独自のHTMLのフォーマットってw3cの承認も得ずに勝手のフォーマット決めてるのかと思いました ^_^;
makoto-n

2016/08/03 13:45

ww、そうですね、ありがとうございます。 Emmetタグもあったんですね。
guest

回答2

0

自己解決

動作確認はすぐに行えませんが、こんな感じで書いていこうと思います。
なお、Ie8までが対象のシンプルなレイアウトを記述するためのソースです。
Ie6,7は捨てる覚悟でいきます。
jQueryは1.xまでが対応しているとのことです。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link rel="canonical" href=""> 5 <meta charset="UTF-8"> 6 <meta name="author" content=""> 7 <meta name="copyright" content="copyright&copy;" /> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <meta name="format-detection" content="telephone=no, email=no, address=no"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 13 <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico"> 14 <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon.png"> 15 <link rel="manifest" href="manifest.json"> 16 <meta name="theme-color" content="#ffffff"> 17 <meta name="msapplication-TileColor" content="#ffcc22"> 18 <meta name="msapplication-TileImage" content="mstile-144x144.png"> 19 <meta name="msapplication-config" content="browserconfig.xml" /> 20 <link rel="stylesheet" href="css/style.css"> 21 <link rel="stylesheet" href="css/ie-hack.css"> 22 <title>TITIE</title> 23 <meta name="apple-mobile-web-app-title" content="TITIE"> 24 <meta name="application-name" content="TITIE"> 25</head> 26<body> 27 <header><div id="header"> 28 29 </div></header> 30 <nav><div id="nav"> 31 32 </div></nav> 33 <main><div id="main"> 34 35 </div></main> 36 <footer><div id="footer"> 37 <noscript> 38 このページは<span class="bold">JavaScript</span>を使用しています。<br> 39 ご使用中のブラウザは<span class="bold">JavaScript</span>が無効になっているか、<span class="bold">JavaScript</span>に対応していません。<br> 40 <span class="bold">JavaScript</span>を有効にするか、<span class="bold">JavaScript</span>が使用可能なブラウザでアクセスして下さい。 41 </noscript> 42 &copy; 43 </div></footer> 44<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 45<!--[if lte IE 8]> 46 <script src="js/html5shiv.min.js"></script> 47 <script src="js/selectivizr-min.js"></script> 48<![endif]--> 49</body> 50</html>

header,footerなどのhtml5要素は

css

1padding: 0; 2margin: 0;

を記述してクラスやIDを付け加えません。
ありがとうございました。

ps.Ie7,6の葬儀を始めようと思いますw。

追加

emmetスニペット

"!!": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n\t<link rel=\"canonical\" href=\"\">\n\t<meta charset=\"UTF-8\">\n\t<meta name=\"author\" content=\"\">\n\t<meta name=\"copyright\" content=\"copyright&copy;\" />\n\t<meta name=\"description\" content=\"\">\n\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n\t<meta name=\"format-detection\" content=\"telephone=no, email=no, address=no\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<link rel=\"icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"shortcut icon\" type=\"image/vnd.microsoft.icon\" href=\"favicon.ico\">\n\t<link rel=\"apple-touch-icon\" sizes=\"192x192\" href=\"apple-touch-icon.png\">\n\t<link rel=\"manifest\" href=\"manifest.json\">\n\t<meta name=\"theme-color\" content=\"#ffffff\">\n\t<meta name=\"msapplication-TileColor\" content=\"#ffcc22\">\n\t<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">\n\t<meta name=\"msapplication-config\" content=\"browserconfig.xml\" />\n\t<link rel=\"stylesheet\" href=\"css/style.css\">\n\t<link rel=\"stylesheet\" href=\"css/ie-hack.css\">\n\t<title>TITIE</title>\n\t<meta name=\"apple-mobile-web-app-title\" content=\"TITIE\">\n\t<meta name=\"application-name\" content=\"TITIE\">\n</head>\n<body>\n\t<header><div id=\"header\">\n\t\t\n\t</div></header>\n\t<nav><div id=\"nav\">\n\t\t\n\t</div></nav>\n\t<main><div id=\"main\">\n\t\t\n\t</div></main>\n\t<footer><div id=\"footer\">\n\t<noscript>\n\t\t\tこのページは<span class=\"bold\">JavaScript</span>を使用しています。<br>\n\t\t\tご使用中のブラウザは<span class=\"bold\">JavaScript</span>が無効になっているか、<span class=\"bold\">JavaScript</span>に対応していません。<br>\n\t\t\t<span class=\"bold\">JavaScript</span>を有効にするか、<span class=\"bold\">JavaScript</span>が使用可能なブラウザでアクセスして下さい。\n\t\t</noscript>\n\t\t&copy;\n\t</div></footer>\n<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\n<!--[if lte IE 8]>\n\t<script src=\"js/html5shiv.min.js\"></script>\n\t<script src=\"js/selectivizr-min.js\"></script>\n<![endif]-->\n</body>\n</html>"

投稿2016/08/07 07:30

編集2016/08/07 07:33
makoto-n

総合スコア436

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

check


Error: Bad value for attribute href on element link: Must be non-empty.
From line 4, column 3; to line 4, column 32

<link rel="canonical" href="">

Syntax of URL:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C.


Error: Bad value Imagetoolbar for attribute http-equiv on element meta.
From line 12, column 3; to line 12, column 47

<meta http-equiv="Imagetoolbar" content="no">

投稿2016/08/03 13:08

asahina_dev

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

makoto-n

2016/08/03 13:11

<link rel="canonical" href="">はURLが記載されていないだけです。 <meta http-equiv="Imagetoolbar" content="no">はIe6用に書き加えました。
asahina_dev

2016/08/03 14:45

IE6向けをサポートしないでもいいとはおもうが(追加料金でいいレベル)
asahina_dev

2016/08/03 15:00

ひとついいわすれていた IE6向けにかきくわえるなら meta の content-type が必須ですよ
makoto-n

2016/08/03 20:09

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> とかですか、、ありがとうございます。知りませんでした。
asahina_dev

2016/08/03 21:36

IEの古いのは HTML5に対応してないのですq・
makoto-n

2016/08/03 23:50

 <!DOCTYPE html>  <html lang="ja"> にもでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問