cssのclassに絵文字使うとかわいい感じになった
Nexus 7 の Chrome でインターネットしてると、サイトによっては欧文フォントが等幅になっていることに気づいた。例えばこのようなサイト（とスクリーンショット）。 [](http://ascii.jp/) あとこれとか。 [](http://www.forest.impress.co.jp/docs/review/20140410_643367.html) ※ 適当にブラウジングしてたら偶然見つけたもので、サイトの選定に他意はありません。 上のスクショは、モトヤLマルベリ3等幅（標準でインストールされてる）の欧文が表示されてて、ちょっと見栄えがよくない。Android には Droid Sans という欧文フォントが搭載されているので、欧文フォントはそっち出てほしい。べつにこのフォントでも困らないという人がいるかもしれないし、これらのサイトも意図してこのフォントにしてるかもしれないけど、個人の主観ではこの等幅フォントよりも Droid Sans のほうがいい。 で、どういう条件でこのフォントファミリになるのか、調べても見つからなかったので、自分で調査した。発生条件が不明だからなかなか再現できなくて手間取ったのだけど、いろいろ調べたらなんとなくわかった。 ## 環境 Nexus 7, Android 4.4.2 の Chrome で調査した。 ## 調査する内容 欧文フォントがモトヤLマルベリ3等幅になってほしくないので、どういう font-family を書くとそうなるか調査した。 ## 結論 結論から言うと、下記の条件で等幅フォントになる。 - font-family に Helvetica か Arial か Droid Sans を指定していない - `html lang=“ja”` を指定している ## 検証サイト作った 取り急ぎ、検証サイトを作って調査した。 - このサイトでは、`html lang=“ja”` を指定し、さまざまな font-family を指定したダミーテキストを表示してある。 [Android で使用可能なフォント一覧](https://github.com/android/platform_frameworks_base/tree/master/data/fonts)に、ヒラギノもメイリオも無いので、下記のような、割とよく見かける font-family 指定でも発生する。 font-family: ‘ヒラギノ角ゴ Pro W3’, 'Hiragino Kaku Gothic Pro’, 'メイリオ’, Meiryo, 'ＭＳ Ｐゴシック’, 'MS PGothic’, sans-serif;  が、上記の使用可能なフォント一覧を見ると、Helvetica も Arial も無い。こういう font-family を指定した場合はどうなるか調べたところ、どうやら勝手に Droid Sans にフォールバックされるようだった。おもしろい。  ## 対策 対策、下記のことをしておけばよさそうだった。 - Helvetica か Arial を指定するとブラウザ側で Droid Sans に置き換わるからそうしておけばよい ## そういえば そういえば、Android 4.0 以降は Roboto というフォントが使えたはずだったけど、上記の検証サイトでは表示されなかった。なにかミスってるかもしれないけどよく分からなかった。 ## 検証機としての Nexus 7 ぼくは普段モバイル端末は iOS を使っているのだけど、Android 検証機として Nexus 7 も持ってる。自分のサイトの Analytics を見ると、iPhone, iPad に続き、3番目に Nexus 7 からのアクセスが多かったから、これでひとまず見ておけば大体良いだろうという気持ちでいる。Android わりとシェア多いから、ちゃんと検証して、意図しないスタイル崩れとか発生しないようにしたい。 Nexus 7 は安いわりに、動作が速いから、検証機だけ使うには勿体無いほど十分なスペックがある。
[](http://sanographix.github.io/lovelive-logo) ラブライブのBDロゴ作るやつを以前作って[日記に書いた](http://memo.sanographix.net/post/66335736492)けど、ちょっと直して、よりジャケットの印象に近づけた。雑な感じで下記のURLに置いてる。このページめちゃくちゃ重いのでスマホだときびしい思いをするかもしれない。 - フォントサイズらへんを少し調整した。 ## HTML
“If we want to protect our beloved school, we need to do what we can we need to become idols!”
Now their “School Idol Project” begins to make their dreams come true!
Make our dreams come true!
body {
font-family:'DIN Next W01 Regular';
text-align: center;
color: #ddd;
-webkit-font-smoothing: antialiased;
}
.content {
height: 250px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
margin-top:-125px;
}
h1,h2 {
font-family:'DIN Next W01 Medium';
font-weight: normal;
margin: 0;
line-height: 1;
}
h1 {
font-size: 1100%;
line-height: .8;
}
h2 {
font-size: 284%;
letter-spacing: .1em;
line-height: .9;
}
p {
letter-spacing: .1em;
font-size: 60%;
line-height: 1.5;
}
ジャケットを見ると、厳密には違う箇所が見つかるけどそこそこ似てる。"o"の形を見ると、たぶん DIN Next じゃないほうの DIN だと思うんだけど、webfont で無かったので Next で代用した。
![ラブライブ! 1 <特装限定版> [Blu-ray]](https://64.media.tumblr.com/a15e6b41b873beac539b42c678c8ddb0/tumblr_inline_pooeh8gcXc1qaxsyz_250.jpg)
![ラブライブ! 2nd Season 1 (特装限定版) [Blu-ray]](https://64.media.tumblr.com/32666a1b97ae6a8f4f6076d3b64739a4/tumblr_inline_pooeh86WXN1qaxsyz_250.jpg)
それと、背景に gif アニメ流すようにした。Vague.js という jQuery プラグインを使って、ちょっとぼかした。こんなふうに書くと簡単にぼかせる。
$(function(){
var vague = $( '.background' ).Vague({intensity:15});
vague.blur();
});
背景をぼかす表現、ランディングページとかでわりと良く見るけど、gif アニメをぼかすと、gif アニメ特有の粗さが見えにくくなるから、美化されて、走馬灯とか思い出っぽい感じが出て、ふわふわした印象になって良い。ラブライブを見ているときは夢っぽい感じで見ているので、視聴の印象が似ている。
SMACSS (Scalable and Modular Architecture for CSS) 読んだ。
SMACSS は、メンテナンスしやすい CSS 書くためのスタイルガイド。15ドルで買える。
CSS、個人のホームページとかだと適当に書いててもなんとかなるけど、大規模かつ継続的な変更があるサイトとかだと、なんらかのルールに則って書かないと収拾がつかなくなる。ちょっと触ったらどこか別の場所が連鎖的に崩れるとか、とにかくぶっ壊れやすい。
そうならないために、メンテナンス性の高い CSS を書きましょうっていう話で、SMACSS はそのガイドラインみたいな感じ。フレームワークではない。これを使えば魔法のような CSS が書けますとかでもない。
CSS、あまりちゃんと本読んだことなかった。自然と実践できていたこともあったけど参考になる部分もあったので下記にメモする。
こういうカテゴリごとに CSS 書けって書いてある。
sass とか less とかの CSS プリプロセッサ使ってる場合、それぞれ独立したファイルを作ってマスターファイルに全部 @import すると便利。
命名規則参考になる。プレフィックス書くのが良いみたい。レイアウトカテゴリにはl-を使う（l-fixedとか）とか、状態だったらis-activeとかの class にすると、カテゴリごとに把握しやすいし、ぱっと見で意味も通じやすい。
下記は良くない例。
#sidebar div {
border: 1px solid #333;
}
今後ページを拡張したとして、divを増やしたときに困るのが目に見えている。h3 とか a とかはセレクタつけなくても良いけど、div とか span とかはセレクタつけましょうという話。css に div って書くと不吉な予感がするからぼくは直感的に避けてきたけど、このように明文化されることで一層気をつけて書くことができる。
!important、なるべく使うなって書いてある。使うときは 絶対必要な 場合に限る。!important を上書きするために更に !important を使用するのは地獄みたいな感じ。
Google Page Speed の推奨設定とか見ると、子孫セレクタ（#content h3 とか）を使うとレンダリング遅いとか書いてある。が、遅いといっても大して影響しないし子孫セレクタ使わないほうが不便だから気にしすぎないほうがいいみたいな感じだった。
入れ子にしすぎるとメンテナンス性が下がるとか、あとから別のスタイルを上書きしたいときに大変になるとかで避けたい。CSS プリプロセッサ使ってると起こりがちで、特に less 初期に書いてた頃はネストしまくれるとかいって喜んでたけど良くなかった。less 見たときネストでまとまっていたほうが視覚的にわかりやすいけど、過度にやると良くない。SMACSS 的には、そもそもモジュール単位で CSS 書いてたら入れ子があまり必要ないとかで、深い入れ子は推奨してない。
100ページくらいの本でサクッと読める。まえがきで、全部この通りするんじゃなくて各自の開発スタイルに合う所をうまく使ってねって書いてあるから、良いところを取り入れるみたいな感じで使うのがよいと思った。
CSS の本、随分前にこれ読んだことあるけど今だと内容古いかもしれない。
アイコンをwebfontにするの、数年前から流行ってて、確かに便利ということがある。[Font Awesome](http://fontawesome.io/)とかが有名。 アイコンフォント、自分でも作れそうだったので作り方まとめた。 ## 用意するもの - [Glyphs Mini](https://itunes.apple.com/jp/app/glyphs-mini/id469036911?mt=12&uo=4&at=11l8Mb) - Adobe Illustrator Glyphs Miniはフォント作るアプリ。Mac App Storeで買える。
ちなみに、上記の手順はこちらのテンプレートファイルを参考にしている。GitHubからダウンロードすることで手順を省くことができる。
Font Awesome のアイコンとか調べてみると、確かにシャープに作ってあった。参考になる。
別のアイコンを作りたいときは、「アートボードを追加」でどんどん足していく。
OTFのままだとwebfontにならないので、font-face kit generator に放り込む。
オプションでEXPERTを選択。
こういうのが生成されてる。
@font-face {
font-family: 'iconfontregular'; // お好みで変更
src: url('iconfont-regular.eot');
src: url('iconfont-regular.eot?#iefix') format('embedded-opentype'),
url('iconfont-regular.woff') format('woff'),
url('iconfont-regular.ttf') format('truetype'),
url('iconfont-regular.svg#iconfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
これだけだと、アイコンにならない。.icon-hogeって書いたらアイコン出るようにしたい。
CSSこういうふうに追記する。
[class^="icon-"] {
display: inline-block;
font-family: 'iconfontregular'; // お好みで変更
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
さらに、各アイコンに対応するCSSを書く。こんなかんじ。 \e000 がunicodeの値。
.icon-share:before {
content: '\e000';
}
ちまちま書いて大変だけど全アイコン書いていく。
HTMLにこんな感じのを書いてうまく出たら成功。
<i class="icon-share"></i>
下ごしらえがめんどくさいけど、@2xとかいちいち用意しなくて良くなるし、大きさとか色も自由に変えられて便利。自分が使うアイコンを厳選してフォント化すれば、Font Awesomeみたいなアイコンセットよりも軽くできる。
[](http://sanographix.github.io/lovelive-logo/) ラブライブロゴタイプ（円盤のほう）をCSSで再現した ## デモ ## HTML
<div class="content">
<h1>LoveLive!</h1>
<h2>School idol project</h2>
<p>
If we want to protect our beloved school, we need to do what we can we need to become idols!<br>
Now their "School Idol Project" begins to make their dreams come true!<br>
Make our dreams come true!
</p>
</div>
body {
font-family:'DIN Next W01 Regular';
text-align: center;
color: #ababab;
}
.content {
height: 250px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
margin-top:-125px;
}
h1,h2 {
font-weight: normal;
margin: 0;
line-height: 1;
}
h1 {
font-family:'DIN Next W01 Medium';
font-size: 1000%;
line-height: .8;
}
h2 {
font-size: 300%;
letter-spacing: .1em;
line-height: .9;
}
p {
letter-spacing: .1em;
font-size: 60%;
line-height: 1.4;
}
bodyでセンタリングしたあと、.contentで垂直方向にも中央配置にしている。
DIN は fonts.com の webfont を利用した。1ヶ月 25,000PV までなら無料で使えるのでちょっと遊ぶ用途なら充分使える。
円盤のやつ、元ネタはこれ。
![ラブライブ! 2nd Season 1 (特装限定版) [Blu-ray]](https://64.media.tumblr.com/32666a1b97ae6a8f4f6076d3b64739a4/tumblr_inline_pooeiaQO5I1qaxsyz_250.jpg)
背景ぼかすとかした。
Retina ディスプレイ用に 2 倍の画像出すとき、 Media Queries でこういう感じに書くと思う。
// デバイスにかかわらず Retina のときに出す
@media
(-webkit-min-device-pixel-ratio: 2),
( min-resolution: 2dppx) {
#azunyan {
background-image: url('images/[email protected]');
}
}
↑ これだとデバイスにかかわらず Retina のとき 2 倍の画像になるけど、スマートフォンとか 3G 回線で巨大な画像を読み込むのは重くてつらい感じになると思う。
そこで、
の 3 パターンの Media Queries を用意することで、画像を読み込むファイルサイズの節約ができる。 CSS だけで出し分けできたっぽい。こういう感じで書いた。
// デバイスにかかわらず Retina のときに出す
@media
(-webkit-min-device-pixel-ratio: 2),
( min-resolution: 2dppx) {
#azunyan {
background-image: url('images/[email protected]');
}
}
// iPad 以上のときに出す（スマートフォンには出ない）
@media
(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px),
( min-resolution: 2dppx) and (min-device-width: 768px) {
#azunyan {
background-image: url('images/[email protected]');
}
}
// MBP Retina のときだけに出す
@media
(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
( min-resolution: 2dppx) and (min-device-width: 1025px) {
#azunyan {
background-image: url('images/[email protected]');
}
}
使いどころとしては、レスポンシブデザインのサイトで有用だと思う。スマホでも PC でもサイズが変わらない画像（ロゴとか）は全部の Retina デバイスで出すのがよい。一方、写真とか、ちょっと大きめの画像はレスポンシブデザインにするときスマホの幅（300px くらい）に縮めると思う。そのような、元の画像で充分高解像度な場合はわざわざスマホで @2x にする必要はないから MBP Retina のときだけ @2x の画像を適用したらいいと思う。