timeタグのpubdate属性の廃止について

2016-12-01 12:46

こんにちは。制作チームの野澤です。
先日、HTML5のコードのチェックを行う機会があったのですが、
そのページの公開日としてtimeタグのpubdate属性を使ってその日付を指定していたのですが、
現在その仕様は既に廃止されており、文法エラーになることに気づいたのでちょっとご紹介したいと思います。

例えば以下のようなコードをチェックするとエラーになります。

<dd><time datetime="2016-11-29T12:47+09:00" pubdate="pubdate">2016/11/29 12:47</time></dd>

1	<dd><time datetime="2016-11-29T12:47+09:00" pubdate="pubdate">2016/11/29 12:47</time></dd>

https://syncer.jp/html-reference/time によると

pubdate属性は、2011年11月に廃止されました。指定すると文法違反になります。

とのこと。

また、http://ascii.jp/elem/000/000/676/676208/ でも

本記事は、「W3C Working Draft 25 May 2011」の仕様をもとに説明していますが、「Editor’s Draft 7 March 2012」ではpubdate属性が削除されているほか、これまでは許されていなかった、“西暦のみ”“月日のみ”といった表記が認められるなど、多くの仕様が変更されています。

と紹介されており、pubdate属性の取扱いは変更になったようです。
W3Cの定義書もチェックしましたが、やはりpubdate属性は見当たりません。
代わりにschema.orgのmicrodataを使った書式がサンプルとして紹介されていました。

<article typeof="schema:BlogPosting">
  <h1 property="schema:headline">Small tasks</h1>
  <footer>Published <time property="schema:datePublished" datetime="2009-08-30">yesterday</time>.</footer>
  <p property="schema:articleBody">I put a bike bell on his bike.</p>
</article>

<h1 property="schema:headline">Small tasks</h1>

<footer>Published <time property="schema:datePublished" datetime="2009-08-30">yesterday</time>.</footer>

</article>

いくつかのサイトではまだ未だに「pubdate属性つけられますよ」と言っているところもあるので、きちんとコードのチェックをかけたり、W3Cのプライマリな仕様書を確認する必要がありますね。

SASS(scss)とLESSの違い

2016-09-30 20:09

こんにちは。デザイン担当の田中です。
今回、SASS(scss)とLESSの違いついて簡単に紹介をしたいと思います。

SASS・LESSとは

SASSとLESSはcssを生成するための技術です。
コンパイルしてcssを用意するという意味では、差はそんなにありません。
前回紹介しました　SASS(scss)の入門　を見ていただくと全体像がわかるかと思います。

SASS(scss)とLESSの記述の違い

■ネスト（入れ子）
SASS(scss)とLESSの差はありません。

SASS(scss)

.box{
    .red{
        background-color: #ff0000;
    }
    .blue{
        background-color: #0000ff;
    }
}

.box{

.red{

background-color: #ff0000;

}

.blue{

background-color: #0000ff;

}

LESS

.box{
    .red{
        background-color: #ff0000;
    }
    .blue{
        background-color: #0000ff;
    }
}

.box{

.red{

background-color: #ff0000;

}

.blue{

background-color: #0000ff;

}

↓

css

.box .red {
  background-color: #ff0000;
}

.box .blue {
  background-color: #0000ff;
}

.box .red {

background-color: #ff0000;

}

.box .blue {

background-color: #0000ff;

}

■変数
変数の定義の仕方が微妙に違います。SASS(scss)なら「$」、LESSなら「@」です。

SASS(scss)

$red: #ff0000;
.box{
    .title{
        background-color: $red;
    }
    .button{
        background-color: $red;
    }
}

$red: #ff0000;

.box{

.title{

background-color: $red;

}

.button{

background-color: $red;

}

LESS

@red: #ff0000;
.box{
    .title{
        background-color: @red;
    }
    .button{
        background-color: @red;
    }
}

@red: #ff0000;

.box{

.title{

background-color: @red;

}

.button{

background-color: @red;

}

↓

css

.box .title {
  background-color: #ff0000;
}

.box .button {
  background-color: #ff0000;
}

.box .title {

background-color: #ff0000;

}

.box .button {

background-color: #ff0000;

}

■mixin
これはSASS(scss)とLESSで差があります。引数の定義は変数と同じで「$」「@」の差があります。LESSの方が簡単ですが、私はLESSだとclassと見分けがしづらいのでSASS(scss)のほうが好みです。

SASS(scss)

@mixin transformRotate($to) {
    -moz-transform: rotate($to);
    -webkit-transform: rotate($to);
    transform: rotate($to);
}
.box{
    @include transformRotate(45deg);
}

@mixin transformRotate($to) {

-moz-transform: rotate($to);

-webkit-transform: rotate($to);

transform: rotate($to);

}

.box{

@include transformRotate(45deg);

}

LESS

.transformRotate(@to) {
    -moz-transform: rotate(@to);
    -webkit-transform: rotate(@to);
    transform: rotate(@to);
}
.box{
    .transformRotate(45deg);
}

.transformRotate(@to) {

-moz-transform: rotate(@to);

-webkit-transform: rotate(@to);

transform: rotate(@to);

}

.box{

.transformRotate(45deg);

}

↓

css

.box {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.box {

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

■インポート
SASS(scss)とLESSの差はありません。

SASS(scss)

@import "./mixin.scss";

1	@import "./mixin.scss";

LESS

@import "./mixin.less";

1	@import "./mixin.less";

最後に

いかがでしたでしょうか。
SASSがRubyベース、LESSがJavaScriptベースと、裏側に差があり機能で「できること」「できないこと」がありますが、今回ご紹介した内容ではほとんど差がありませんね。
SASSの方が機能が多く、ウェブ上の情報・書籍の量でも一歩リードしているようですが、LESSもcssにより近いという意味で導入をしやすいメリットがあります。
LESSも　SASS(scss)の入門　で紹介いたしました「Prepros」でコンパイルできます。
一歩踏み出せない方は、LESSからはじめてみるのも良いのではないでしょうか。

ページスピードのチューニングその１：CSSとJSによるレンダリングブロックの仕組み

page speed insightを見るとCSSのレンダリングブロックのアラートが出ることがあります。特にスマートフォンでページをチェックしたときにはこのメッセージがよく表示されると思います。

Googleのレファレンスを見ると、ファーストビューに必要なものはhead内でインラインで記述し、それ以外のものはあとから読み込むようにしてくださいとのことです。

今回、かなりこの問題の解決に苦労したので、いろいろ調べたことをまとめてみたいと思います。

基本的にはGoogleのベスト・プラクティス集である”Web Fundamentals“のうち、
「クリティカルレンダリングパス」という章を参考に見ていきたいと思います。

そもそもレンダリングブロックとは
javascriptとcssの依存関係
ファーストビューのレンダリングブロック

こんな内容でお送り致します。

>>続きを読む

配色に悩んだときに見るサイト4選

2016-09-02 17:47

こんにちは！デザイン担当の望月です。

デザインをするにあたって必要不可欠な要素「配色」！
今回は、配色、キーカラー、などを決める際に役立ちそうな、
社内で話題にあがった便利ツールをいくつかご紹介します。

『coolors』

blog_mimg01

https://coolors.co/app

こちらは、キーカラーが決まっているときに活躍しそうな配色ジェネレーターです。

アクセスすると最初にチュートリアルがありますが、
ものすごーく簡単に訳すと

・「スペース」を押すと画面上の配色パターンが変わるよ！
・鍵アイコンを押すと、その色だけロックできるよ！
・カラーコード入力や、自分で調節することでも色を設定できるよ！
・画像から色を自動でピックアップすることもできるよ！
・配色の保存やユーザー登録もできるよ！（しなくても使えます）

……みたいなことだと思います。

まずはスペースを押しまくって色の移り変わりを楽しんでみましょう。
これだけでかなり楽しい！
カラーコードをただランダム表示するのではなく
綺麗な配色になるように調整されている気がします。

キーカラーを設定してロックしたら、
あとはエンターを押すだけで綺麗な配色を提案してくれるので、
とても便利です。

『Color of Book』

blog_mimg02

http://colorchart.jp/

書籍の表紙から色を抽出してくれるユニークツール！

本のタイトルを自分で検索することもできますし、
ファッション雑誌やスポーツ誌のカテゴリーから検索することもできます。
これって、自分が制作するページのターゲットユーザーに近しいカテゴリーから探せば、
その層に好まれる配色を研究できちゃいますよね。
なかなか奥が深いです。

抽出した配色はphotoshopのカラーパレット用データでダウンロードできるようです。

結構昔にリリースされたサイトのようですが、
AmazonやWikipediaから検索しているので最新の結果が表示されますよ。

書籍の発行時期でも絞り込みができるようになったら
季節のカラー的なものも研究できてさらに最高！など、夢を見てしまいました。

『NIPPON COLORS』

blog_mimg03

http://nipponcolors.com/

社内のデザイナーKさんが教えてくれた、
日本の伝統色を紹介してくれるオシャレなサイトです。

Firefoxではうまく表示されなかったので、
推奨されているSafariかChromeでの閲覧をオススメします！

違う色を選択したときの色の移り変わりや表現が美しくて、
間をデザインするのはさすが「和」だなー、なんて思いました。

和系のサイトや年賀状のデザインにうってつけのサイトだと思います。
デザイナーってプレゼン力いりますよね。
どういった意図でこの色を選んだのか、など伝統色の名前も交えて
説明できたらなんとなくカッコイイ！と、邪な思いが……。

ちなみに、右にある　MUNSELL「ON OFF」　とあるボタンをクリックすると……？
これまたカッコイイ！です。

『Adobe Kuler』

blog_mimg04

https://color.adobe.com/ja/create/color-wheel/

最後は社内のデザイナー田中さんが教えてくれた、
色相環上で複数の色をピックアップし、配色を作成できるAdobeが公開しているツールです。

カラールールのカテゴリでポインタの動き方をある程度絞り込むことができ、
例えば「補色」を選択するとポインタの位置が対角線上に固定されて
彩度や明度のみが調節できるようになります。

かなり直感的な操作で
なんとなく淡めな配色、や
補色を使ってぱっきりした配色、
などのぼんやりした頭の中のイメージを形にしてくれますね。

なんのイメージも沸いていないときは「探索」で他のユーザーが作成した
パレットを見ることもできます。

また、CCアカウントでログインすると、
「保存」をぽちぽちっとクリックするだけで
photoshopCCにインポートすることができます！

まとめ

時間がないと、自分の頭の中の配色ストックを使いまわしてしまいがちです。

いつもと同じ、にならないようにこういった便利なサイトを使って
スピーディーにいいものを作っていければなと思います！

SASS(scss)の入門

2016-09-01 16:04

こんにちは。デザイン担当の田中です。
今回、SASS(scss)のついて簡単に紹介をしたいと思います

SASSとは

SASSとはcssを生成するための技術です。
SASSの機能を使うことで、効率よくcssを用意することができます。
SASSには「sass」と「scss」の2つの記述の仕方があります。
今回は「scss」です。

まず、コンパイルできる環境を準備

私は「Prepros」という無料で使えるソフトを使っています。
scssファイルが入っているフォルダをドラッグで登録して
scssファイルを編集・保存すると、自動で同じ階層にcssファイルが生成されます。
これだけです。
細かいPreprosの設定・使い方は省略させていただきます。
私の場合、Preprosインストールするだけでコンパイルできる環境が整うはずがうまくいかず、
Ruby・gemのインストールというステップを踏みました。
うまくいかなかったらこの辺を疑ってみてください。

scssの基本的な使い方

scssの場合、基本的にはcssと同じ記述をしますので導入をしやすいと思います。
scssの機能について少し紹介したいと思います。

■ネスト（入れ子）
構造が深くなってくると便利です。構造の変更、class名の変更等があっても一部を修正するだけで済みます。

scss

.box{
	.red{
		background-color: #ff0000;
	}
	.blue{
		background-color: #0000ff;
	}
}

.box{

.red{

background-color: #ff0000;

}

.blue{

background-color: #0000ff;

}

↓

css

.box .red {
  background-color: #ff0000;
}

.box .blue {
  background-color: #0000ff;
}

.box .red {

background-color: #ff0000;

}

.box .blue {

background-color: #0000ff;

}

■変数を使う
下記のように「$」の後に名前を付けて値を入れるだけです。色やマージンなど、サイト内で使いまわすものは変数にしておけば管理が楽になります。

scss

$red: #ff0000;
.box{
	.title{
		background-color: $red;
	}
	.button{
		background-color: $red;
	}
}

$red: #ff0000;

.box{

.title{

background-color: $red;

}

.button{

background-color: $red;

}

↓

css

.box .title {
  background-color: #ff0000;
}

.box .button {
  background-color: #ff0000;
}

.box .title {

background-color: #ff0000;

}

.box .button {

background-color: #ff0000;

}

■mixinを使う
mixinとは値を渡して（渡さなくても使えます）スタイルを返してもらうものです。
ベンダープレフィックスなど、スタイルをまとめたいときに便利です。
「@mixin 」の後に名前を付けて、引数を使う場合は「$」の後に名前を付けます。
呼び出すときは「@include 」の後にmixin名で呼び出せます。引数を使う場合、値を渡してあげます。下記の場合「45deg」を渡しています。

scss

@mixin transformRotate($to) {
	-moz-transform: rotate($to);
	-webkit-transform: rotate($to);
	transform: rotate($to);
}
.box{
	@include transformRotate(45deg);
}

@mixin transformRotate($to) {

-moz-transform: rotate($to);

-webkit-transform: rotate($to);

transform: rotate($to);

}

.box{

@include transformRotate(45deg);

}

↓
css

.box {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.box {

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

■インポートを使う
変数・mixinの使い方を紹介いたしましたが、
これらは別ファイルにしてインポートしたほうが管理がしやすいです。
例えば、「top.css」「about.css」のように
ページ単位でcssを持たせる場合、共通で使いまわすことができます。
変数・mixinは呼び出される前に定義してある必要があるので、インポートする場合は最初にインポートさせておくと間違いないです。また、他の人が触るときにも分かりやすいです。

scss

@import "./mixin.scss";

1	@import "./mixin.scss";

最後に

今回紹介したのはSASSのほんの一部です。
配列を定義してeachで回すこともできたりします。
まだまだ便利な機能がありますのでチェックしてみてください。
最後に注意ですが、SASSを導入したらcssファイルを直接編集するのは厳禁です。
コンパイルしたら上書きされて消えてしまいます。
これだけ注意すれば間違いなくコーディングのスピードがアップしますので是非導入してみてください。
SASS(scss)の紹介でした。

デザイナーブログ

timeタグのpubdate属性の廃止について

SASS(scss)とLESSの違い

SASS・LESSとは

SASS(scss)とLESSの記述の違い

SASS(scss)

LESS

css

SASS(scss)

LESS

css

SASS(scss)

LESS

css

SASS(scss)

LESS

最後に

ページスピードのチューニングその１：CSSとJSによるレンダリングブロックの仕組み

配色に悩んだときに見るサイト4選

『coolors』

『Color of Book』

『NIPPON COLORS』

『Adobe Kuler』

まとめ

SASS(scss)の入門

SASSとは

まず、コンパイルできる環境を準備

scssの基本的な使い方

最後に

BLOG

働くママのブログお引っ越しのお知らせ

常時SSL化の備忘録