innov-staff-blog

今回の勉強会はWeb Storageについてです。

Web Storageの概要

Cookieと同じようにクライアントにkey:value形式のデータを保存する仕組みです。
元々はHTML5の仕様の一部として定義されていましたが、「HTML 5 differences from HTML 4」で切り離されています。
Web Storageではセッション単位で保存する「sessionStorage」と永続的に保存する「localStorage」があります。

Cookie,sessionStorage,localStorageの違い

	Cookie	sessionStorage	localStorage
データの有効期限	指定期限まで	ウィンドウやタブを閉じるまで	永続的
参照範囲	domain,path単位	ウインドウ,origin単位	origin単位
データ量の上限	4KB	5MB
サーバーへのデータ送信	毎回送信	必要時にスクリプトで送信

※originは「プロトコル+ドメイン+ポート番号」で識別されます。

Web Storageはデータ量の上限が5MBと大きく、大量のデータを保存できます。
Cookieのように毎回サーバーへ送信することはなく、必要時のみスクリプトで取得するので、大量のデータを保存しても通信速度に影響をあたえることはありません。

データの保存や取得などの方法

//サポート確認
if(!window.localStorage){
	return; //サポートされていない
}

//localStorageからsessionStorageに変更する場合に、変更が一箇所で済むように変数に入れて使う
var storage = window.localStorage;

//保存されているデータ数
storage.length;

//n番目のkeyを取得
storage.key(n);

//データの保存
storage.setItem("samplekey", "Sample Data");
storage["samplekey"] = "Sample Data";
storage.samplekey = "Sample Data";

//データの取得
storage.getItem("samplekey");
storage["samplekey"];
storage.samplekey;

//データの削除
storage.removeItem("samplekey"); //samplekeyに対応しているデータを削除
storage.clear(); //データをすべて削除

保存された内容の確認方法

Chromeの場合は、デベロッパーツールのResourcesで確認できます。
その他のブラウザでも確認はできるようですが、試せていません。

その他

localStorageでは他のウィンドウで保存内容が更新されたときにイベントを取得することができます。

現在、主に使用されているブラウザはWeb Storageに対応していますが、IE7以下は対応していないです。

Web Storageまとめ

Web Storageは保存容量が大きくCookieよりも使い勝手がいいので、基本的にはWeb Storageを使用し、毎回サーバーで使用する必要があるデータのみCookieを使用することになると思います。

以上です。堤田

今回の勉強会はPageSpeed Insights（速度の提案）についてです。

PageSpeed Insights（速度の提案）の概要

Google Analytics内のコンテンツ→サイトの速度→速度の提案で、サイトの表示速度に悪影響を及ぼしているやり方をしている場合は、問題点の個数が表示され、個数をクリックすると、PageSpeed Insightsが表示され、問題点の具体的な内容を見ることができます。
ChromeとFirefoxの拡張機能もあり、表示してるページを解析して問題点を確認することもできます。

サイトの速度がGoogle Analytics内で表示されているので、Googleの検索順位には影響があるはずで、速度が遅いと順位が下がるらしいのですが、速度対策をしても順位はほぼ変わらなかったので、影響は小さいようです。

PageSpeed Insights（速度の提案）で表示される問題点の基準となっているPageSpeed Insights Rulesの各項目の概要と、それに対する対処法を見て行きたいと思います。
※この記事は2013/07/29に更新されたRulesを元にしています。

Avoid Landing Page Redirects

概要

ランディングページリダイレクトを避ける。
リダイレクトする度にHTTPリクエストなどが発生するので、リダイレクト回数を最小限に抑えることで、サイトのパフォーマンスを向上させることができます。

対処法

リダイレクトはどうしても必要なページのみで設定する。
AからB、BからCにリダイレクトしているような場合は、AからCに直接リダイレクトする。
PC用ページからスマホ用ページにリダイレクトしている場合は、PC用ページに<link rel="alternate">でスマホ用ページを明示することで、スマホでの検索結果にスマホ用ページが表示されるようになり、余計なリダイレクトを減らす事ができます。

Enable Compression

概要

圧縮を有効にする。
サーバーで圧縮していない生ファイルではなく、gzip形式で圧縮したファイルをクライアントに返すことによって、ダウンロード時間を短縮する事ができます。

対処法

サーバー側でリクエストがあったタイミングで圧縮を実行するか、予め圧縮ファイルを用意しておき、クライアントがgzipが解凍できるなら圧縮ファイルを返すように設定する。（参考記事1,参考記事2）

Improve Server Response Time

概要

サーバーの応答時間が200ミリ秒を超えるのはNG。

対処法

サーバーサイドプログラムで重い処理をしていて、アクセス数が多い場合などに、サーバーに負荷がかかり、サーバーの処理能力を超えると、応答が遅くなるので、処理を軽くするか、サーバーを良いものに替えるか、サーバーを複数用意して負荷分散するなどが、直接的な対処法として考えられます。
速度の提案ある項目に対応していく事で、サーバーに対する負荷は減るはずなので、他の対応をある程度した後で、まだ残っている場合にサーバーを見直すという方向になるはず。

Leverage Browser Caching

概要

ブラウザのキャッシュを活用する。
複数回サイトに訪れる場合、画像,JS,CSSなどのファイルを再取得せずにキャッシュから読み込むようになれば、その分のダウンロード時間をなくす事ができます。
一般的に、画像などのページの部品となる静的なファイルはキャッシュ可能ですが、HTMLファイルは変更が加わるファイルなので、キャッシュ可能と考えるべきではありません。

対処法

サーバー側で画像,JS,CSSなどのファイルに、max-ageか、Last-ModifiedとETagを設定する。
max-ageの設定は1週間〜1年が推奨されているので、1ヶ月あたりが無難だと思います。

# .htaccessでの設定例（max-age 1ヶ月）
<FilesMatch ".(flv|gif|jpe?g|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

Minify Resources (HTML, CSS, and JavaScript)

概要

HTML,CSS,JavaScriptの各ファイル内で、余計な空白,改行,インデントなどがある場合、これを削除することによってファイルサイズを縮小することができます。
また、変数名などを短くすることによって、さらに縮小することができます。

対処法

HTMLの縮小は、PageSpeed Insightsで解析して、最適化されたコンテンツをダウンロードして使用する。
CSSの縮小は、YUI Compressorやcssmin.jsなどを使用する。
JavaScriptの縮小は、Closure Compiler,JSMinかYUI Compressorなどを使用する。
これらの作業は更新する度に必要で、手動で行うのは現実的ではないので、自動的に最適化する環境を構築する必要があると思います。

Optimize Images

概要

画像を最適化する。
画像ファイルの中に含まれるコメント削除し、適切な形式(png,gif,jpg)で圧縮する事で、画像ファイルサイズを減らすことができます。

対処法

HTMLやCSSでサイズを指定して縮小して表示している場合は、縮小されたサイズの画像にする。ただし、同じページ内で違うサイズで表示する場合は、小さい画像を何種類も読み込むより、最大のサイズに合わせた画像で縮小表示して一つの画像を使い回した方がいい。
形式は、写真であればjpgで見た目に問題が出ない程度に画質を落としたものがよく、写真でなければ基本的にはpngで、10*10px以下や3色以下などの小さい画像であれば、gifがいい。BMPやTIFFなど他の形式は使用しない。
png画像は、PageSpeed Insightsで解析すれば、可逆圧縮で最適化された画像をダウンロードできる。
jpgは画質をどの程度落とすかを決める必要があるので、手作業で書き出していく必要があります。

Optimize CSS Delivery

概要

CSSの配信を最適化する。
小さいサイズでも外部cssファイルを読み込む時にも、サーバーにリクエストしてダウンロードするために一定の時間がかかり、その間はブラウザがコンテンツを描画できないので、cssファイルをインライン化すれば、待ち時間をなくすことができます。

対処法

いくつも小さいcssファイルを読み込んでいる場合は一つにまとめる。
小さいcssファイルをインライン化する。大きいcssファイルは外部ファイルにして、キャッシュを有効活用した方がいい。

Reduce the size of the above-the-fold content

概要

初期描画に必要なファイルサイズを抑えて、初期描画が終わった後に追加でコンテンツを読み込んで描画していくようにすることで、初期描画にかかる時間を抑えることができます。

対処法

具体的な方法はわかっていないので、理論だけです。
メインコンテンツと関係ないサイドバーを後で読み込む。
ファーストビューで表示されない画像などをスクロールして表示が必要なタイミングで読み込む。
ソーシャル系のコンテンツはメインコンテンツ部分が下まで表示されたタイミングで読み込んで表示する。

Remove Render-Blocking JavaScripts

概要

描画を止めているJavaScriptをなくす。
ブラウザは描画を始める前にJavaScriptを解析する必要があるので、外部JavaScriptファイルがあると、サーバーにリクエストしてダウンロードして解析するために一定の時間がかかり、その間はブラウザがコンテンツを描画できません。

対処法

小さいJavaScriptファイルはインライン化する。大きいJavaScriptファイルは外部ファイルにして、キャッシュを有効活用した方がいい。
初期描画に関係ないクリックなどのイベント処理などのJavaScriptファイルの読み込みをコンテンツの描画後に行う。具体的な記述方法はinsights/BlockingJS。

Use Asynchronous Scripts

概要

非同期スクリプトを使用すれば、ダウンロードと実行が並列で同時に行われるので、待ち時間が減ります。

対処法

HTML5ではscriptにasync属性を付けることで非同期にすることができます。
ただし、そのscriptが非同期で問題なく実行できるかを確認する必要があり、適当にXHTML 1.0でasyncを付けたらIE8で固まるという現象が起きたので、動作確認はしっかりする必要がありそうです。

その他

PageSpeed Insights Rulesにはないが、PageSpeed Insightsで出てくるものをいくつか。
※以前はPageSpeed Insights Rulesにあったけどなくなったものです。

CSS スプライトに画像をまとめる

小さい画像をいくつも使用している場合は、スプライト画像として一つのファイルにして、CSSでその一部を表示するようにする事で、リクエスト回数を減らす事ができます。
img要素でaltがあるものはそのまま一つの画像にした方がHTMLの意味として正しいので、背景画像やアイコンなどテキストに置き換えないものをまとめることになります。
例：Google Analytics、Facebook、Twitter、Yahoo! JAPAN

CSS @import を使用しない

CSS @import を使用すると、@importで読み込まれているファイルを読み込み終わるまで、@import以降が評価されません。単純に全てのファイルをlinkで読み込めば、同時に並列で読み込む事が可能なので、@importは使用するべきではありません。

PageSpeed Insights（速度の提案）まとめ

全体としてサーバー側の設定の問題が多く、サーバーが強力なら表示速度に問題が起きることはないのだろうと思います。
実際に手元で更新するファイルの他に、圧縮されたファイルを用意する必要があり、更新があるサイトで手作業で行うのは大変なので、自動的に最適化してくれるツールを使うことになるはず。

以上です。堤田

Googleが、スマートフォンやタブレット、パソコンなどのマルチデバイス環境における消費者の利用状況や行動についての調査結果を、「マルチスクリーンワールド」という名称のサイトで7月29日から一般公開しています。

ビジネスに役立つあらゆるマルチスクリーンに関する様々なデータを閲覧できることができ、有益な情報をダウンロートしたり、メールや SNS で共有することができます。

▼マルチスクリーンワールド
http://multiscreen.withgoogle.com/jp/

調査実施期間は2013年1月～2月で、18歳～64歳のスマートフォンとパソコンの両方を所有し、かつテレビも使う1351人を対象としています。

なお、今回の調査では、マルチデバイスの中にフィーチャーフォンは含まれていません。

企業が自社のFacebookページを活性化させる手段として、まず思いつくのが、「いいね！」数を増やす事になります。

その為の手段として、

最近では、Facebookアプリを使ったキャンペーンなどが人気で、手っ取り早く「いいね！」を集めるのに有効です。

但し、

最終的な目的は、Facebookから自社Webサイトや店舗への集客、情報の拡散、新規ユーザーの獲得、リピーターの囲い込み

などになるので、日々の運用をしっかりやって行く必要があります。

具体的には、

タイムライン上での日々の投稿に力を入れて行く事になります。

しかし、実際に行ってみると、

「投稿はしてるけど反応がない」 、何を投稿したら良いかわからない」

と言う悩みを良く聞きます。

●ユーザーはFacebookからの投稿をどのように見ているのか？

ユーザーが企業のFacebookページに「いいね!」すると、その企業のFacebookページの投稿がユーザーのニュースフィードに表示されるようになるので、

ユーザーは、わざわざ、Facebookページに見に行かなくても、

自分のニュースフィードから投稿内容を確認することができます。

これは、ユーザーにも、その企業にもメリットのあることですが、

この結果、「友達の投稿」と「企業の投稿」が一緒（並列）に表示される為、

企業が不用意に投稿を行うと、「友達の近況」の間に「つまらない商品紹介やニュース」が

入って、「うっとおしい」と感じてしまい、「非表示・いいね！解除」につながってしまいます。

Point1：　

一番興味のある「友達の近況」に埋もれてしまっている為、投稿内容が目立たない、もしくは、スパム的な扱いを

されている可能性がある。

ユーザー（ファン）の属性からライフスタイルや、過去の投稿に対する反応から推測して、

最適なタイミングでの投稿を行って行く事が重要です。

また、その際に、投稿内容、口調、文章形式（友達口調、絵文字、写真など）、投稿頻度も

一緒に検討して行うとより効果的です。

●投稿した内容はユーザーに届いているのか？

「いいね！」したら、ニュースフィードに情報が表示されるようになりますが、必ずと言うわけではありません。

Facebookページを運営する企業からすると、いいね！数が1000あれば、

1回の投稿で1000人のニュースフィードに表示されると考えますが、必ずしもそうなりません。

「いいね！」と言うアクションは「心理的なハードル」を除けば、割と簡単（気軽）に行えます。

その為、一人で100、200と沢山のFacebookページに対して「いいね！」をしている人は沢山います。

もし、「いいね！」したら、ニュースフィードに必ず表示されてしまう場合、

そのユーザーのニュースフィードは、全てFacebookページからの投稿で埋め尽くされてしまいます。

同様に、友達が沢山いる場合も、全ての友達の投稿（近況）を表示していくと、

ネット上での付き合いや、あまり親しくない人の情報であふれてしまう可能性があります。

その為、Facebookでは、「エッジランク」と言う指標を設け、その数値を持って、

ニュースフィードに表示する優先順位を決定しています。

Point2：

「いいね！」が押されたらから、情報発信ができていると思っている人が多いがそうでもない

「エッジランク」の仕組みを理解した上で、投稿内容や方法を工夫して行く事が重要です。

●エッジランクについて

エッジランクを構成する３要素

・新密度

・重み

・経過時間

親密度とは、あるファンとそのFacebookページとの関係性の強さです。

つまり、あるファンが普段からどれくらいあなたのFacebookページの投稿に反応しているかになります。

具体的には、

投稿へのいいね！、コメント、シェアをした回数

ソーシャルプラグイン上でいいね！コメント、シェアした回数

Facebookページへのアクセス数、滞在時間、書き込みした回数

これらの回数や時間が多い方がより親密度が高いと判断されます。

重みとは、Facebookページがファン全体からどれくらい反応されているか？

※一般的に、シェア　＞　コメント　＞　いいね！の順に重みづけされます。

経過時間とは、Facebookページの投稿がどれだけ新しいものか？

投稿された情報がどれだけ新鮮かを表し、最近投稿されたもの程表示される確率が高まります。

具体的には

投稿されてからの経過時間

投稿にいいね！、シェア、コメントがついてからの経過時間

※過去の投稿でも直近でいいね！やコメント、シェアなどが付き反応があった投稿は重要度が高いと判断されます。

●エッジランクを高めるには

下記のような内容で投稿すると効果が高いと言われています。

直感的に印象の良い物：　食べ物、子供、ペットの写真

興味深く、有益なもの：　最新のニュースや話題になっていること、得する情報

意外な発見や事実：　秘話や舞台裏

笑いやユーモアのあるもの：　面白ネタや画像、動画

属人的、人となりが伝わる物：　挨拶、ランチ、日常、スタッフ

感謝や尊敬：　1000番目の「いいね」のようなキリ番のお礼

季節、イベントなどタイムリーなもの：　年中行事、GW、夏休み、クリスマス、バレンタイン

癒しを感じるもの：　美しい風景、心温まるエピソード

答えたくなる質問：　意見や感想の募集

注意点：　実際に投稿を行う際には、上記内容以外に、

「傷つく人がいないか？」「印象に残るか？」「興味のある話題か」「独りよがりの投稿になっていないか」

などを考える必要があります。

また、自分が伝えたいことではなく、ユーザーが知りたいこと、求めていることを乗せて行くと良いようです。

今回の勉強会は凸包とcanvasについてです。

凸包について

凸包は与えられた集合を含む最小の凸集合です。平面上の点集合の凸包は輪ゴムをかけたて包み込んだ形になります。
凸包 wiki

幾何の問題で多数の点が与えられたときは、凸包を作成して、凸包を構成している点のみを対象とすることで、計算量を減らすことができるようになる問題があります。（最小包含円を求める問題など）

凸包を生成

手順：

点の数：

ログここから
ログここまで

excanvas.js

IE8以下ではcanvasに対応していませんが、Googleが提供しているexcanvas.jsを使用することで、IE8以下（IE6以上？）でもcanvasを使用することが可能です。
ただし、jqueryを使用している場合は読み込みの順番を考慮する（$(window).load()で処理を行う）必要があったり、対応していない機能（filltextなど）があったりするので、そのまま使えるようにはならないようです。

canvasに描画する方法

Contextを取得

Contextを取得して、ここに設定をして描画していきます。
var ctx = document.getElementById("canvas").getContext("2d");

各種設定

色や太さやフォントなどを設定できます。色はRGBの他に透明度（alpha）も指定できます。

ctx.fillStyle = '#0000FF'; //塗りつぶしの色
ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; //線の色
ctx.lineWidth = 1; //線の太さ
ctx.font = "18px Arial"; //フォント

四角を描画

fillRectで、左上のx座標, 左上のy座標, 幅, 高さを指定して、四角を描画します。

ctx.fillRect(x, y, w, h);

円を描画

arcで、中心のx座標, 中心のy座標, 半径, 角度などを指定して、円を描画します。

ctx.beginPath(); //線を書き始める為の設定
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); //円弧を描く
ctx.stroke(); //実際に線をcanvasに描画

多角形を描画

lineToで、線を描き、closePathで線の現在の地点とスタート地点とをつなぐことで多角形を描画します。

ctx.beginPath(); //線を書き始める為の設定
//t_lには各座標が入っている
ctx.moveTo(t_l[0].x, t_l[0].y); //線のスタート地点
for(i=1;i<t_l.length;i++){
    p = t_l[i];
    ctx.lineTo(p.x, p.y); //線を描いていく
}
ctx.closePath(); //現在の地点とスタート地点とをつなぎ、線を閉じる
ctx.stroke(); //実際に多角形の線をcanvasに描画
//ctx.fill(); //塗りつぶし多角形を描画

テキストを描画

fillTextで、テキスト,左上の座標を指定してテキストを書き込めます。最大幅を設定するとその幅を超える場合にその幅に収まるように調整されます（縦長になります）。

ctx.fillText(text, x, y, maxWidth);

クリアする

canvasは明示的にクリアしなければ、重ねて描画していくので、描画した線や図形を消すにはclearRectでクリアする必要があります。

//左上のx座標, 左上のy座標, 幅, 高さを指定してクリア
ctx.clearRect(x, y, w, h);

まとめ

canvasを使用すれば、幾何のアルゴリズムの説明が比較的簡単にできると思います。

以上です。堤田

今回の社内勉強会は、「デザインのきほん　レイアウト」です。

Webデザインにかぎらず、プレゼン資料や報告書などでも、
読み手が理解しやすいように、読み手のことを考えてデザインすることが大切です。
そのために、以下の点を意識することが必要です。

・揃える（整列）
要素はきちんと整列して配置する。
整列することで、見えない線が生まれ、読み手にスッキリとした印象を与えます。

・まとめる（近接）
関連の強い要素同士を近くに配置（＝グループ化）すると、内容を直感的に理解しやすくなります。
逆に、関連の弱い要素同士は、少し離して配置することでグループ化が強調されます。

・コントラスト
要素と要素に、はっきりとした違いをつける。
例えば文字の場合、「サイズ」や「太さ」、「色」を変えることにより、
情報の重要性を強調でき、また高い視認性を保つことができます。

Facebookから提供されている、ページ解析機能です。

概要ページの数字

①合計いいね！　:ページにいいね！を付けてくれたユニーク数です。

②ファンの友達　:いいね！してくれた人と、友達になっているユニーク数です。

③話題にしている人　:ページに対し、いいね！やコメント、タグ付けなどアクションを取ったユニーク数です。

④合計リーチ　:ページに関連するコンテンツを見たユニーク数です。広告や記事なども含みます。

また概要ページには、投稿ごとにリーチやアクションなどの反応数が確認できます。

確認できる数字は、以下のものです。

①日時：投稿された日時です。

②投稿：投稿の出だしです。クリックすると全文が見れます。

③リーチ：投稿が公開されてから投稿を見た人のユニーク数です。クリックすると詳細が見れます。

④アクションを実行したユーザー：投稿が公開されてからをクリックした人のユニーク数です。

⑤話題にしている人：投稿が公開されてからいいね！、コメント、シェアなどアクションを起こしたユニーク数です。クリックすると詳細を確認できます。

⑥クチコミ度：題にしている人割合です。※（話題にしている人）÷（リーチ）

いいねページの数字

ページにいいね！している人の統計データなどが表示されています。

確認できるのは、以下の数字です。

①性別・年齢：ユーザーがプロフィール情報に記載している性別・年齢です。

②国/市区町村：ユーザーの推定居住地を表示します。

③言語：ユーザーのデフォルトの言語設定です。

いいね！ページには、新規いいね！数といいね取り消し数、またどこでいいね！されたのか場所がも表示されています。

いいねされた場所として、確認できるのは、以下のような項目です。

①ページ上

②いいね！ボックスといいね！ボタン

③モバイル

④広告とスポンサー記事

⑤友達の紹介

⑥タイムライン

⑦マウスオーバー

リーチページの数字

ページからの投稿について、リーチした人の統計データなどが表示されています。

確認できるのは、以下の数字です。

①リーチの方法(オーガニック)

②リーチの方法(有料)※バナー広告など

③クチコミ

④リーチの頻度：頻度別ユニークユーザー

⑤合計タブビュー※キャンペーン、基本データ、写真など

⑥外部リンク元

話題にしている人の数字

ページを話題にしている人の統計データが表示されています。

その他、以下の数字も確認できます。

①話題にしている人の推移

②口コミリーチ数の推移

話題にしている人を増やす事で、口コミリーチ数があがり、結果ファンやリピーターが増えていく傾向が強いようです。

今回の勉強会はSelectors Level 4（CSS4セレクタ）についてです。

Selectors Level 4（CSS4セレクタ）の概要

Selectors Level 4の草案が2013年5月2日に更新されました。
Selectors Level 4
W3C Working Draft 2 May 2013

Selectors Level 4はCSS3セレクタの上位仕様なので、CSS4セレクタと言えるのですが、urlが/css3-selectors/から/selectors4/になっている事からもわかるように、CSSのセレクタという位置づけではなく、セレクタ単体として定義されています。
セレクタはもうCSSだけのものではないという事でしょう。

※Selectors Level 4の略し方がわからないので、この記事では便宜上、CSS4としています。

各セレクタの紹介

Selectors Level 4で新しく追加されたセレクタのみを紹介していきます。

※便宜上、サンプルコード内の各要素指定はクラスとしています。
　要素に当てたいCSSはcolor:#c00、元はcolor:#333としています。

E:not(s1, s2)

E:not(s1, s2)はs1でもs2でもないE要素です。
CSS3でE:not(s)（sでないE要素）はありましたが、複数指定はできませんでした。

CSS3まででの書き方

E {
	color: #c00;
}
E.s1,
E.s2 {
	color: #333;
}

CSS4での書き方

E:not(.s1, .s2) {
	color: #c00;
}

E:matches(s1, s2)

E:matches(s1, s2)はs1もしくはs2であるE要素です。
これまでもカンマ区切りで複数の要素を指定することができましたが、:matchesを使用することで短い記述で指定することが可能になり、可読性があがります。

CSS3まででの書き方

E.s1,
E.s2 {
	color: #c00;
}

CSS4での書き方

E:matches(s1, s2) {
	color: #c00;
}

E[foo="bar" i]

E[foo="bar" i]は大文字小文字を区別せずにfoo属性の値がbarであるE要素です。
CSS3までは環境によって区別されたり区別されなかったりしましたが、明確に区別せずに一致させることができるようになります。

ひらがなとカタカナで区別しないような日本語対応がされる日がいつかは来るかもしれません。

E:dir(ltr)

E:dir(ltr)は文書の方向がltrであるE要素です。
左から右の言語（英語など）か、右から左（アラビア語など）によって指定することができます。

縦書きはどうなるのかは謎です。

E:lang(zh, *-hant)

E:lang(zh, *-hant)は言語がzhか-hantに後方一致するE要素です。
これまでも言語指定はできましたが、*-hantのように部分一致での指定方法が追加されました。

E:any-link

E:any-linkはリンク要素（<a>,<area>,<link>）のE要素です。
これまで:linkと:visitedの両方を記述していた指定を:any-linkと一つの記述で指定できるようになります。
上で紹介した:matches()を使用して:matches(:link, :visited)としても同じ指定になります。

CSS3まででの書き方

E:link,
E:visited {
	color: #c00;
}

CSS4での書き方

E:any-link {
	color: #c00;
}

E:local-link

E:local-linkはリンク先が同じドメイン内であるE要素です。
内部リンクと外部リンクで違う指定を簡単に記述できるようになります。

CSS3まででの書き方

E[href^="/"],	/*ルート相対パス*/
E[href^="."],	/*ドキュメント相対パス*/
E[href^="http://www.innov-i.co.jp/"]	/*絶対パス*/
{
	color: #c00;
}

CSS4での書き方

E:local-link {
	color: #c00;
}

E:local-link(0)

E:local-link(0)はリンク先が同じドメイン内で(0)階層目までディレクトリが同じE要素です。
ナビゲーションなどで同じディレクトリであれば、その中にいることを示す為に色を変えたりすることはよくありますが、今まではhtmlを作成時に変えるか、javascriptで同じディレクトリであるか判別して変えるなどをする必要がありましたが、E:local-link(0)を使用することでCSSのみで実現できるようになります。

E:scope

E:scopeは現在参照中であるE要素です。
Selectors API Level 2で使用するセレクタで、CSSで使用するためのものではありませんが、HTML5では<style>を記述した要素内だけにCSSを適用することができるようになるようです。

E:current

E:currentは時間軸で現在であるE要素です。
音声ブラウザなどで読み上げられている要素です。

E:current(s)

E:current(s)は時間軸で現在であるなかでsであるE要素です。
音声ブラウザなどで読み上げられている中でsである要素です。

E:past

E:pastは時間軸で過去であるE要素です。
音声ブラウザなどで読み上げが終わった要素です。

E:future

E:futureは時間軸で未来であるE要素です。
音声ブラウザなどで読み上げがまだ始まっていない要素です。

E:indeterminate

E:indeterminateは不確定状態であるE要素です。
チェックボックスで、チェックを入れもチェックを外しもしていない、つまり、触っていない状態などがこれにあたります。

E:default

E:defaultは既定値（初期値）であるE要素です。
<select>で、selectedが指定されている<option>が選択されている要素などがこれにあたります。
CSS3 UIでも定義されています。

E:in-range,E:out-of-range

E:in-rangeは入力値が範囲内であるE要素、E:out-of-rangeは入力値が範囲外であるE要素です。
HTML5では入力要素の属性としてstep,min,max,maxlengthなどを指定することで入力値の範囲を指定できますが、それと合わせて入力値が範囲内（:in-range）か範囲外（:out-of-range）かを指定することができます。
CSS3 UIでも定義されています。

E:required,E:optional

E:requiredは必須項目であるE要素、E:optionalは任意項目であるE要素です。
HTML5では入力要素にrequired属性を付けることによって必須項目とすることができますが、それと合わせて必須項目（:required）か任意項目（:optional）かを指定することができます。
CSS3 UIでも定義されています。

E:read-only,E:read-write

E:read-onlyは読み取り専用であるE要素、E:read-writeは読み書き可能であるE要素です。
HTML5ではreadonly属性を付けることによって読み取り専用とすることができますが、それと合わせて読み取り専用（:read-only）か読み書き可能（:read-write）かを指定することができます。
CSS3 UIでも定義されています。

E:nth-match(n of selector)

E:nth-match(n of selector)はn個目のselectorであるE要素です。
CSS3で:nth-child(n)（n個目の要素）はありましたが、これに追加でselectorも指定できるようになりました。
selector:nth-child(n)として似た指定ができますが、こちらはn個目でありかつselectorである要素となるので、意味が違います。

E:nth-last-match(n of selector)

E:nth-last-match(n of selector)は最後から数えてn個目のselectorであるE要素です。
CSS3で:nth-last-child(n)（最後から数えてn個目の要素）はありましたが、これに追加でselectorも指定できるようになりました。
selector:nth-last-child(n)として似た指定ができますが、こちらは最後から数えてn個目でありかつselectorである要素となるので、意味が違います。

E:column(selector)

E:column(selector)はグリッドまたはテーブル内のselectorである列のE要素です。
<table>内の<col>要素を指定するselectorにより、その列を指定できます。
記述方法は col.selected || td のような形になるようです。

E:nth-column(n)

E:nth-column(n)はグリッドまたはテーブル内のn列目であるE要素です。
:nth-childと同じように(2n)や(3n+1)なども指定できます。

E:nth-last-column(n)

E:nth-last-column(n)はグリッドまたはテーブル内の最後から数えてn列目であるE要素です。
:nth-last-childと同じように(2n)や(3n+1)なども指定できます。

E /foo/ F

E /foo/ FはE要素のfoo属性と同じ値のID属性を持つF要素です。
label:matches(:hover, :focus) /for/ input などとすれば、ラベルと入力項目をひも付けて指定することができます。

E! > F

E! > FはF要素の親要素であるE要素です。
!を付けた要素が指定する要素となります（E > F! > Gの場合はF要素）。

Selectors Level 4対応状況（2013年6月現在）

対応確認用の該当項目が赤く（#c00）なってれば対応しています。
緑（#0c0）になっている場合は、ベンダープレフィックス付きのみ対応しています。
※ベンダープレフィックスの付け方がよくわかっていないので、正しく付けたら対応しているものもあるかも知れない。
gc=Chrome 27,Fx=Firefox 21,IE=IE 10

セレクタ	対応確認用	gc	Fx	IE
E:not(s1, s2)	Eのみ E+s1 E+s2 E+s1+s2	×	×	×
E:matches(s1, s2)	Eのみ E+s1 E+s2 E+s1+s2	×	×	×
E[foo="bar" i]	foo="bar" foo="BAR" FOO="bar" FOO="BAR"	×	×	×
E:dir(ltr)	左から右 右から左	×	△	×
E:lang(zh, *-hant)	zh zh-hant	×	×	×
E:any-link	リンク	△	△	×
E:local-link	絶対パス ルート相対パス ドキュメント相対パス	×	×	×
E:local-link(0)	絶対パス ルート相対パス ドキュメント相対パス	×	×	×
E:scope	スコープ内 スコープ外	×	×	×
E:current E:current(s) E:past E:future	現在 現在でs 過去 未来	×	×	×
E:indeterminate	不確定状態	×	×	×
E:default	初期値ではない 初期値 初期値ではない	×	×	×
E:in-range E:out-of-range	1-10の範囲内 1-10の範囲外	○	×	×
E:required E:optional	必須入力 必須入力でない 任意入力 任意入力でない	○	○	○
E:read-only E:read-write	読み込み専用 読み書き可能	○	△	×
E:nth-match(n of selector)	selectorでない selector selectorでない 二つ目のselector（ここを指定）	×	×	×
E:column(selector)	E:column(selector) col.selected || td	×	×	×
E:nth-column(n)	E:nth-column(n)	×	×	×
E:nth-last-column(n)	E:nth-last-column(n)	×	×	×
E /foo/ F		×	×	×
E! > F	子要素にFがある > F 子要素にFがない	×	×	×

Selectors Level 4（CSS4セレクタ）まとめ

• CSSのためのものではない
• E:local-linkやE:columnなど、CSS3では実現不可能でjavascriptを書くか、HTMLに記述を足さなければいけなかったものが、CSSだけで実現できる
• E:matchesなどパターンを指定するものがあり、CSSの記述を短くできる（CSSgolfができる）
• 2013年6月現在では、まだ草案段階ということもあり、ほとんど対応していない

以上です。堤田

今回の社内勉強会は、「デザインのきほん　テキスト」です。

メンバーが、コーダー、プログラマーが多いので、デザインの基本的なところを再確認しました。

WEBサイトでは、「テキスト」が構成要素として大きな割合を占める場合が多く、
「テキスト」の読みやすさが、閲覧者のWEBサイトに対する印象に大きく影響してきます。

そのため、テキストの読みやすさを意識することが大切です。

読みやすさは、視認性、可読性、判読性という3つの要素からなりたち、
これらの要素を高めるために以下を調整する必要があります。

・フォントの種類
・フォントのサイズ
・行間
・字間
・一行の文字数

読みやすいWEBサイトを心がけて制作していきたいと思います。