お知らせnews

2020年 03月 25日

【テンプレート】バージョン5.2.4 アップデートのお知らせ

HTMLマークアップをGoogleが推奨するコーディングガイドラインに合わせて調整しました。
Google HTML/CSS Style Guide

今回調整した内容は以下になります。

マークアップルール

プロトコル

埋め込みリソースからプロトコル表記(http:,https:)を省略

  






   

0と単位

「0」の値は単位を省略。

margin: 0;
padding: 0;

小数点先頭の「0」を省略

小数点の値は先頭の “0”を省略。

font-size: .8em;

16進法

可能な場合は3文字の16進表記を使用。

/* 推奨しない */
color: #eebbcc;
 
/* 推奨 */
color: #ebc;

プロパティの記述順

アルファベットの順に記述する。
※ベンダープレフィックスは無視。例えば-moz接頭辞は-webkitの前に来る、などの順序は保つ。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

ブロック単位にインデント

階層がわかるようにブロック単位でコンテンツをインデント。

@media screen, projection {
 
  html {
    background: #fff;
    color: #444;
  }
 
}

プロパティ名の終端

プロパティ名の終端にはコロンの後にスペースを入れること。

/* 推奨しない */
h2 {
  font-weight:bold;
}
 
/* 推奨 */
h2 {
  font-weight: bold;
}

宣言ブロックの分離

最後のセレクタと宣言ブロックの間にスペースを使用。

/* 推奨しない:スペースが不足してる */
#video{
  margin-top: 1em;
}
 
/* 推奨しない:不要な改行がある */
#video
{
  margin-top: 1em;
}
 
/* 推奨 */
#video {
  margin-top: 1em;
}

セレクタとプロパティの分離

別々のセレクタとプロパティは改行して記述。

a:focus, a:active {
  position: relative; top: 1px;
}
 
/* 推奨 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

CSSの引用符

属性セレクタやプロパティ値の引用符にはシングルクォーテーションを使用。
※URI値には引用符を使用しない。

/* 推奨しない */
@import url("//www.google.com/css/maia.css");
 
html {
  font-family: "open sans", arial, sans-serif;
}
 
/* 推奨 */
@import url(//www.google.com/css/maia.css);
 
html {
  font-family: 'open sans', arial, sans-serif;
}

関連記事はこちら

【テンプレート】バージョン5.2.6 アップデートのお知らせ
【テンプレート】バージョン5.2.5 アップデートのお知らせ
【テンプレート】バージョン5.2.3 アップデートのお知らせ
【テンプレート】バージョン5.2.2 アップデートのお知らせ