Adobe Blank（Webフォント）を使った画像置換 New Kellum method
初めてレスポンシブ案件のコーディングをすることになりました。
メディアクエリで背景画像を入れ替えたりする都合上、避けて通れないのが画像置換。なにかいいやり方がないかなと、調べていたらおそらく日本語ではまだ紹介されていないNew Kellum methodという方法を発見したのでご紹介します。
画像置換とは
サンプル
このように、タグの中に入っているテキストを隠しつつ、背景画像を表示させる方法です。
コードはこんな風になっています。
■html
<p>画像ですよ！</p>
■CSS
p {
width: 113px;
height: 38px;
background: url('置き換えたい画像のURL') no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Scott Kellum Methodという方法で、-9999などで画面の外にテキストを飛ばしてしまうより軽いとのことです*1。
今のところこれがメジャーなのかな、と思いきや、New Kellum methodというものがありました。
New Kellum method
サンプル
画像ですよ！
■html
<p>画像ですよ！</p>
■CSS
@font-face {
font-family: "AdobeBlank";
font-weight: 100;
font-style: normal;
src: local('AdobeBlank.otf'),
url("AdobeBlank.eot") format('eot'),
url("AdobeBlank.ttf.woff") format('woff');
}
p {
background: url('置き換えたい画像のURL') no-repeat;
font-family: AdobeBlank;
}※サンプルはgoogleドライブにfontファイルを入れてWebフォントとしています。
乏しい英語力を総動員した結果わかったのですが、Adobeがオープンソースで出している目に見えず、空白にもならないフォントを利用して画像置換を行う方法のようです。
米Adobe、見えないフォント「Adobe Blank」をオープンソースで公開 | OSDN Magazine
本来の想定としては、重たいWebフォントを読み込むまでの間、標準のフォントが表示されないようにしたりするものだそうです。サンプル通り日本語でも使える様子。特に高さや幅を指定しなくてもぺちゃんこになって置換している背景画像が見えなくなるということはないのかも。サンプルは画像が小さいだけかも知れないですが……。
ざっと調べてみましたが、この方法、日本語で紹介しているところは見当たりませんでした。日本語のWebフォントは重たくて難しいですから、発案当初（2013年くらい？）はみんなピンとこなかったのかも知れないですね。
こんな方法があるんだ、と感心しました。
Webフォントとしてはアイコンフォントなどはかなり使われるようになってきたし、画像置換の方法としてはそろそろ実用を考えてもいいものなのかも知れません。
*1:ただ、現在では通信速度や端末性能の向上により、それ程差はない場合も。また、改行するテキストには使えなかった。2行目のテキストが消えない。
2015年の買って良かったモノは、iPod touch第6世代！
今週のお題「今年買って良かったモノ」
今年買って良かったモノは、間違いなくiPod touch第6世代です！
買うまでは第4世代のiPod touchを使っていました。ところがコードが切れてしまって、コードを買い直すくらいならいっそ本体を買っちゃおうということで突発的に購入に踏み切ったんですよね。
という訳で、iPod touch第6世代を買って良かったことです。
色んなアプリがさくさく動く
まずこれ。第4世代まではメモリ不足で動かないアプリも出てきていたのですが、題6世代で大幅パワーアップしたので動きが軽快。ゲームもし放題です。
最近はもっぱらファイナルファンタジー ブレイブエクスヴィアス（FFBE）をやってます。久々のRPG、面白いです*1。
容量アップでKindle本をたくさん入れられるようになった
容量が64GBあるので、現在購入数255冊のほとんどすべてがkindleに入っていますが、余裕です。他のアプリも諸々入ってまだ15GBに届いていません。
カメラの性能が上がった
デジカメ並みとは言いませんが、そこそこ綺麗に撮ることができるので、旅行やイベントの際の持ち物が減りました。
撮った写真の例
【お題：ブログフォトコンテスト2015夏】夏の風景 古民家でお茶 - たそがれノート
確実に生活の質は上がりました
数ヶ月使ってみてしみじみ思ったのですが、日常使うモノの性能アップは、確実に生活の質を上げてくれます。軽快に動く、容量を気にせずに済むというのは小さなことですけれど、その小さなことがとても大事。
もうiPod touchなしの生活は考えられないですし、壊れたり紛失したりしたら、数日立ち直れない程の心的ダメージを受けそうなくらい大事にしています。
間違いなく日常で一番長く使っているものです。
wifiさえあればLINEも使えますし、電話機能のないiPhoneと言っていいです。
金額もSIMフリーのiPhoneの半額以下ですし、とてもお得だと思います。
電話機能は別にいらないし、できれば安く済ませたいという人にはおススメですよ。
【日記】2015年7月22日 iPod touch6購入！ - たそがれノート
Apple iPod touch 64GB 第6世代 2015年モデル スペースグレイ MKHL2J/A
posted with amazlet at 15.11.29
Apple Computer (2015-07-17)
売り上げランキング: 10,413
売り上げランキング: 10,413
*1:ストーリーについては現在随時追加中の模様。
【Web】制作後のサイトの構造を守らせるか、自由度を上げるか
私は社内でも新しくサイトを制作する部署にいますので、極端なことを言えば「作るだけは作るが管理のことは考えない」といった仕事の仕方も可能です。が、できるだけそれはしないようにと努めています。
その後サイトを管理する人が困るのは良心が咎めますし、それ以前にそういう作り方をするのが気分的に嫌なのです*1。
そのため可能な限りシンプルに、余分なものを削いだテンプレートを作って、こまめにマイナーチェンジを繰り返しています。
その辺りは詳しくはこちら。
【日記】2015年10月21日～10月22日 コーディング用テンプレートは極力シンプルに - たそがれノート
そういった中で悩み続けていることのひとつが『構造を守らせる作りにする』か『自由度を上げる』かのバランスです。
制作者以外の人間がサイトを運用する際の問題点
よくあるのが、運用段階で担当者が変わった際に意図せずに構成を崩してしまう、ということ。
既に用意しているスタイルなのに重複して作ってしまったり、必要なものを記述していなかったり、うっかり全ページに影響が出る修正をしてしまったり……こうなるとどんどんスパゲッティ状態のコードになっていきます。
構造を守らせるコーディング
たとえば、コーディング時h1タグに下記のようにスタイルを設定したとします。
h1 {
font-size: 20px;
font-weight: bold;
color: red;}
こうしておくと、<h1>h1見出し</h1>と記述するだけで、勝手に赤字・太字・フォントサイズ20pxのスタイルがつきます。
特に意識しなくてもh1には必ず同一のスタイルが適用されますし、htmlへの記述量は少なくて済みます。
また、作業者に見出しレベルについての理解が一定以上あるか、あるいはデザインを守るならh1→h2→h3……の順で記述していくしかないので、ある程度は構造を守ることが期待できます。
一方、この方式だとh2部分にh1と同じスタイルを使いたいんだけど……といった場合に融通がききません。
ある程度自由がきくコーディング
上のデメリット部分を解消する方法のひとつが、スタイルとコードを分離させることです。下のようにクラスを作ってスタイルを割り当てます。
CSSファイル
.title_h1 {
font-size: 20px;
font-weight: bold;
color: red;}.title_h2 {
font-size: 16px;
font-weight: bold;
color: green;}
htmlファイル
<h1 class="title_h2">大見出し</h1>
<h2 class="title_h1">大見出し</h2>
htmlファイルの方を見ると、それぞれクラスをつけることによって見た目はh1だけど構造としてはh2、というようなことが可能です。
この方式のメリットは、見た目と構造を分離しているので、h1の直下にh3の見出しデザインを配置しなければならない場合でも、<h2 class="title_h3">といった感じにしてやれば済むところです。
一方のデメリットとして、見出しレベルに無頓着だとデザイン部分の正誤だけ見て、コピペで、
htmlファイル
<h2 class="title_h1">見出し1</h2>
<h1 class="title_h2">見出し2</h1>
という記述になってしまうかも知れませんし、あるいは、
htmlファイル
<h1>見出し1</h1>
<h2>見出し2</h2>
とクラスをつけずに記述してここだけスタイルがついてない、ということが起こることも……。
基本的には構造を守らせる作りの方を採用
私は自由度よりもサイト全体の構造やデザインの統一性が崩れる方が問題だと考えているので、なるべく「構造を守らせる作り方」をしています。サイトは運用していくものですし、自分を含めて人間はミスをするし、自分以外の人が運用しても壊れにくくする、というのがまず頭にあるからです。
そのため見出しに限らず、使いまわしの部分はできるだけhtmlファイルの方に記述を増やさなくても済むようにしています。
たとえば、見出しの前に記号がつくスタイル（表示例：「■見出し」など）は、
CSSファイル
h1:before {
content: "■";
}
htmlファイル
<h1>見出し</h1>
こういう風にしておくと、自動で「■」が見出しの先頭につきます。いちいちhtmlファイルの方に<h1>■見出し</h1>と書かなくて済むし、別の箇所で「■」を付け忘れてしまった、というミスもなくなります*2。
また、上の自由がきくコーディング方式で、例外的にh2にh1のスタイルを適用するということを行っていると、まとめてh2のスタイルを変えたい、という場合に作業が煩雑になります。
同じ理由で、ひとつのタグに複数のクラスを指定するのも、うっかり抜けしやすいですし、煩雑で好きではありません。そのためなるべく1タグにつき1クラスを基本にしています。
おそらく、コーディング的にはある程度自由のきく方が推奨されているのだと思いますが、私は制作したサイトを他の人が運用するということが常なのでこんな感じです。
さっと調べてみても、こういう「サイトの構造を守らせる」という考え方が見当たらなかったのですが、他の方はどうなんでしょうか。検索ワードが良くないだけかも知れないですけど……。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
posted with amazlet at 15.11.27
インプレス (2014-07-24)
売り上げランキング: 11,064
売り上げランキング: 11,064
修正のしやすさと崩れにくさの両立のバランスが難しい。
