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

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

ただいまの
回答率

89.99%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,154

makoto-n

score 384

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="canonical" href="">
  <meta charset="UTF-8">
  <meta name="author" content="">
  <meta name="copyright" content="copyright&copy;" />
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no, email=no, address=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Imagetoolbar" content="no">
  <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon.png">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#ffcc22">
  <meta name="msapplication-TileImage" content="mstile-144x144.png">
  <meta name="msapplication-config" content="browserconfig.xml" />
  <link rel="stylesheet" href="css/style.css">
  <title>site-title</title>
  <meta name="apple-mobile-web-app-title" content="site-title">
  <meta name="application-name" content="site-title">
</head>
<body>
  <header><div id="header">

  </div></header>
  <nav><div id="nav">

  </div></nav>
  <main><div id="main">

  </div></main>
  <footer><div id="footer">

  </div></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/selectivizr-min.js"></script>
<![endif]-->
</body>
</html>


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

margin: 0;
padding: 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

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="canonical" href="">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="author" content="">
  <meta name="copyright" content="copyright&copy;" />
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no, email=no, address=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon.png">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#ffcc22">
  <meta name="msapplication-TileImage" content="mstile-144x144.png">
  <meta name="msapplication-config" content="browserconfig.xml" />
  <meta http-equiv="content-style-type" content="text/css">
  <meta http-equiv="content-script-type" content="text/javascript">
  <link rel="stylesheet" href="css/style.css">
  <title>site-title</title>
  <meta name="apple-mobile-web-app-title" content="site-title">
  <meta name="application-name" content="site-title">
</head>
<body>
  <header><div id="header">

  </div></header>
  <nav><div id="nav">

  </div></nav>
  <main><div id="main">

  </div></main>
  <footer><div id="footer">

  </div></footer>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]>
  <script type="text/javascript" src="js/html5shiv.min.js"></script>
  <script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
</body>
</html>


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • makoto-n

    2016/08/03 22:08

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

    キャンセル

  • Mr_Roboto

    2016/08/03 22:18

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

    キャンセル

  • makoto-n

    2016/08/03 22:45

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

    キャンセル

回答 2

check解決した方法

0

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="canonical" href="">
  <meta charset="UTF-8">
  <meta name="author" content="">
  <meta name="copyright" content="copyright&copy;" />
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no, email=no, address=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="192x192" href="apple-touch-icon.png">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#ffcc22">
  <meta name="msapplication-TileImage" content="mstile-144x144.png">
  <meta name="msapplication-config" content="browserconfig.xml" />
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/ie-hack.css">
  <title>TITIE</title>
  <meta name="apple-mobile-web-app-title" content="TITIE">
  <meta name="application-name" content="TITIE">
</head>
<body>
  <header><div id="header">

  </div></header>
  <nav><div id="nav">

  </div></nav>
  <main><div id="main">

  </div></main>
  <footer><div id="footer">
  <noscript>
      このページは<span class="bold">JavaScript</span>を使用しています。<br>
      ご使用中のブラウザは<span class="bold">JavaScript</span>が無効になっているか、<span class="bold">JavaScript</span>に対応していません。<br>
      <span class="bold">JavaScript</span>を有効にするか、<span class="bold">JavaScript</span>が使用可能なブラウザでアクセスして下さい。
    </noscript>
    &copy;
  </div></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--[if lte IE 8]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/selectivizr-min.js"></script>
<![endif]-->
</body>
</html>


header,footerなどのhtml5要素は

padding: 0;
margin: 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>"

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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/04 05: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">
    とかですか、、ありがとうございます。知りませんでした。

    キャンセル

  • 2016/08/04 06:36

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

    キャンセル

  • 2016/08/04 08:50

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

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • 独自のEmmetHTMLフォーマットを作ったのですが、改善点などあれば教えてください、お願いします。