アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ

ハイブリッドアプリ開発でも利用出来る、JavaScriptCSSのアニメーションライブラリを集めてみました。



最近ではCanvasWebGLを利用したアプローチもあると思いますが、ちょっとしたUXを作るにはライブラリが大きすぎます。開発にインパクトを与えず、既存の技術で対応でき、さらにネイティブライクである点をポイントにまとめてみました。



jQueryのanimation代替え系 Velocity.js



jQueryの$.animate()と同等のAPIを持ちながらjQueryには依存しない、高速アニメーションライブラリです。既存コードの「$.animate」を「$.velocity」とするだけでも運用が可能とあるので、いま速度に悩まされている方は、一度こちらを試してみてはいかがでしょうか。





MovieCropデモ



Site jQuery.animate()の代替えライブラリ「Velocity.js」
GitHub https://github.com/julianshapiro/velocity
Demo http://jsfiddle.net/mach3ss/LSH79/embedded/result/
License MIT


CSSスプライト MovieCrop.js



CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。背景要素をコントロールするため、フレーム分の画像を用意する必要がありますが、ほかのTween系のライブラリと組み合わせることで、より複雑なアニメーションも可能でしょう。





MovieCropデモ



Site シンプルなスプライトアニメーションライブラリ「MovieCrop.js」
GitHub https://github.com/mach3/js-moviecrop
Demo http://jsfiddle.net/mach3ss/LSH79/embedded/result/
License MIT


CSSアニメーションライブラリ1 Animate.css



既存スクリプトに影響を与えない、CSSのみで出来たライブラリです。
クロスブラウザに対応しており、タグのclass要素に指定するだけで利用できます。パララックスで利用したり、他のアニメーションライブラリと組み合わせても良さそうです。





Animate.cssデモ



Site http://daneden.github.io/animate.css
GitHub https://github.com/daneden/animate.css
Demo サイト内で確認可能
License MIT


CSSアニメーションライブラリ2 magic animations



こちらも、CSSのみのアニメーションライブラリの紹介です。ブラウザサポートも明確に記載されており、CSSの利用方法も解説がやさしく丁寧です。





magicデモ




Site http://www.minimamente.com/magic-css3-animations-by-minimac
GitHub https://github.com/miniMAC/magic
Demo http://www.minimamente.com/example/magic_animations/
License MIT


JavaScriptCSSの magic animations



実際のアニメーションは前出のAnimate.cssを利用しており、スクリプト自体はjQueryなど特定のフレームワークに依存しません。



利用方法は、呼び出しのスクリプトを定義し、あとは各タグでclass属性と専用の属性でパラメータを指定するだけです。そのためJavaScriptに汚染されず、全体のコードがすっきりとするでしょう。





wowデモ



Site http://mynameismatthieu.com/WOW/index.html
GitHub https://github.com/matthieua/WOW
Demo http://www.minimamente.com/example/magic_animations/
License MIT


すぐに使えるアニメーションのライブラリとしてまとめてみました。ぜひ使ってみてください!

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法

こんにちは、鴨田です。
タイトルが長くなってしまってすみません。

皆さんの中で、自分のサイトコンテンツの中で、
iframeを使って外部サイト(自分で更新できない)を表示したいときに、
iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、
サイトコンテンツをレスポンシブレイアウトではなく、
固定幅のまま、あらゆるブラウザで、
ウィンドウサイズに合わせてピッタリに拡大縮小したい、
と思ったことがある人はいないでしょうか?

前置きが大変長くなりましたが、
そんなことがあったけど出来なくて諦めたとか、
これからそんなことをしないといけないという方がいたら、
是非とも参考にしてください。



iframe内コンテンツの拡大縮小



例えば、このアシアルブログを横幅600px内でピッタリ縮小表示したい、
と思ったとき、どうすればよいでしょうか。

まず思いつくのは、cssのzoomを使って、縮小してみる方法です。

アシアルブログの横幅は1090pxとなっているので、
600/1090=0.55となるので、0.55倍するとピッタリ表示されるはずです。

高さはとりあえず600pxにしておきます。

HTML


<iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600"></iframe>
<iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600" style="zoom:0.55"></iframe>


通常




zoom:0.55



悲しいことに、iframeの横幅・縦幅が0.55倍になるだけで、
iframe内のコンテンツが縮小されるわけではないのです。
Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。
また、iOSではそもそもiframeの幅指定を無視します。

ではどうすればよいのでしょうか?

答えとしては、CSS3が解釈できるブラウザ限定にはなりますが、
CSS3のtransformを使えばいいのです。

HTML


transform:scale(0.55)<br>
<iframe src="http://blog.asial.co.jp" frameborder="1" width="1090" height="1090" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);"></iframe>


transform:scale(0.55)



こうなります。
でもまだおかしいのです。上下左右にマージンがあります。
これは意図した物ではありません、tranformの起点がコンテンツの真ん中にあるためです。
これを補正するために、スタイルを追加します。

HTML


<iframe src="http://blog.asial.co.jp" frameborder="1" width="1090" height="1090" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"></iframe>


transform:scale(0.55);transform-origin:0 0;



これでtranformの起点が左上になるので、意図したとおりの表示になりました。
後は、横方向にスクロールバーが出ているのが気になるのと、
まだiframeの右側と下側に大きくマージンが出来てしまっているので、
これを隠して上げる必要があります。

transformの起点は左上になりましたが、
コンテンツサイズは元のままとなっているためです。

HTML


<div style="width:600px;height:600px;overflow-x:hidden;border:1px solid #999">
    <div style="width:600px;height:3081px;overflow:hidden;">
        <iframe src="http://blog.asial.co.jp" frameborder="0" scrolling="no" width="1090" height="5603" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;"></iframe>
    </div>
</div>




二つほどdivの入れ子をする必要があります。
最初のdivは、実際の表示エリアになります、ボーダーと縦方向のスクロールを設定します。
2つめのdivは、コンテンツの高さを決めます、5603/0.55=3081pxです。スクロールなしに設定します。
最後にiframeとして、ボーダーなし、スクロールなし、高さと幅をコンテンツサイズとして、transformです。

最後にどういったときにこれを使うのかというと、
WEBアプリなどで、外部サイトだがアプリの一部として表示させたい、
などといったときに使えるかと思います。

基本的にCSS3が使えるブラウザであれば、動作するはずですが、
Androidの場合、端末によって、WebViewで動作しないことがあるようです。

※初出時に、ベンダープリフィクスを書いていなかったので追記しています。



固定幅レイアウトのページをウィンドウサイズでピッタリ表示させる



例えば、このアシアルブログをウィンドウサイズ600pxのときでも、
スクロールを出さずに、コンテンツサイズを縮小させて表示させたい、
と思ったとき、どうすればよいでしょうか。

まず思いつくのは、cssのzoomを使って、縮小してみる方法です。

アシアルブログの横幅は1090pxとなっているので、
600/1090=0.55となるので、0.55倍するとピッタリ表示されるはずです。

そうです、iframeのときと要領は同じです。
ですが、cssのzoomを使うだけではなく、viewportやjavaScript(jQuery)を駆使する必要があります。

なお、対応ブラウザは、Chrome、Mobile ChromeSafari、Mobile SafariFirefoxIE9~11です。
IE8にも対応させたいのですが、うまい方法が見つかっていません。
MsFilterが動作すればいいのですが、何故かうまいこといきません。
いい方法があれば、教えてもらえると大変嬉しいです。



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>アシアルブログ</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// UA判定用
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
// ロード・リサイズ時に画面最適化
$(window).bind("load resize", function(){
    var width = $(window).width();
    $("html").css("zoom" , width/1090);
    if (appVersion.indexOf("msie 9.") != -1) {
        $("html").css("-ms-transform" , "scale(" + width/1090 + ")").css("-ms-transform-origin" , "0 0");
        $("body").css("overflow-x" , "hidden");
    } else if (userAgent.indexOf('gecko') != -1) {
        $("html").css("-moz-transform" , "scale(" + width/1090 + ")").css("-moz-transform-origin" , "0 0");
        $("body").css("overflow-x" , "hidden");
    }
});
</script>
<style>
/* IE用viewport */
@-ms-viewport {width: 1090px;}
/* common */
html,body {margin:0;padding:0}
</style>
</head>
<body>
    <a href="https://www.asial.co.jpblog.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpblog.jpg"></a>
</body>
</html>


HTML、JavaScriptCSSに関して、
それぞれ説明を行います。



<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">


viewportの設定です。
一般的なものとなりますので、特に注意事項はありません。
Chrome、Mobile ChromeSafari、Mobile SafariFirefoxで有効です。

IEに関しては、metaのviewport設定では対応していませんので、
CSSで下記の指定をします。なお、IE10以降で有効です。



/* IE用viewport */
@-ms-viewport {width: 1090px;}


こちらはdevice-widthでは、正常動作しなかったので、
コンテンツサイズとしてください。

続いて、JavaScriptです。



<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


jQueryを読み込みます。バージョンは必要に応じて変えてください。



// UA判定用
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();


UsetAgent判定を行う必要があるので、
ブラウザ名とバージョンを取得します。



// ロード・リサイズ時に画面最適化
$(window).bind("load resize", function(){
// 中身
});


ページロード時とウィンドウリサイズ時に処理を行います。



var width = $(window).width();


ウィンドウ幅を取得します。



    $("html").css("zoom" , width/1090);


ウィンドウ幅をコンテンツサイズ(1090px)で割った数値を、
htmlのzoomに設定することで、コンテンツサイズがウィンドウサイズと同じになります。
Chrome、Mobile ChromeSafari、Mobile Safariはこの設定だけで動作します。



if (appVersion.indexOf("msie 9.") != -1) {
    $("html").css("-ms-transform" , "scale(" + width/1090 + ")").css("-ms-transform-origin" , "0 0");
    $("body").css("overflow-x" , "hidden");
} else if (userAgent.indexOf('gecko') != -1) {
    $("html").css("-moz-transform" , "scale(" + width/1090 + ")").css("-moz-transform-origin" , "0 0");
    $("body").css("overflow-x" , "hidden");
}


FirefoxIE9に関しては、htmlに対するzoomが効かないようなので、
zoomの代わりに、transform:scaleを使用することで同じ効果が得られます。
また、横方向のスクロールバーが出てくるため、
bodyに対して、overflow-x:hiddenを設定します。



<a href="https://www.asial.co.jpblog.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpblog.jpg"></a>


最後にコンテンツですが、今回はデモなので1090pxの画面キャプチャとしました。

最後に、実際どのように表示されるのか見てみたいと思います。

デモページ(クリックで別ウィンドウで起動します)


幅600pxのiframeで表示しているだけですが、自動的にサイズ調整されているのが分かります。

iOSなどだと、iframeが自動的にコンテンツサイズにされてしまうので、
 iframeの方だと正常動作していませんが、デモページの方は問題ありません。



以上です。

調べても、こういった使い方をしている人があまり見あたらないので、
レアケースな実装なのかも知れませんが、なんとなく使い道があると思いますので、
参考になればと思います。

HTML5プロフェッショナル認定試験レベル1 受験記

こんにちは、鴨田です。

突然ですが、先日「HTML5プロフェッショナル認定試験レベル1」を受験し、
合格することが出来ました。

今回は受験記みたいなものを書いてみたいと思います。



HTML5プロフェッショナル認定試験とは



HTML5プロフェッショナル認定試験」とは、特定非営利活動法人エルピーアイジャパン(LPI-Japan)が開発したHTML5の認定試験です

http://html5exam.jp/

2014年6月現在は、「Level 1」のみ受験することが出来ます。
より難易度の高い「Level 2」は現在策定中となっていますが、2014年秋から開始するようです。

HTML5プロフェッショナル認定試験の受験方式はコンピュータベーストテスト(CBT)となっており、
受験会場・受験日時は、全国各地から好きな日時を自由に選択して受験できます。
出題方式はマウスによる選択方式がほとんどですが、キーボード入力問題も多少出題され、実技や面接はありません。
CBTの詳細は、試験配信会社(テストセンター)「ピアソンVUE」までお問い合わせくださいとのことです。

今回は、アシアルの社員を集めて、団体受験したため、ペーパーテスト(PBT)でした。
団体受験を希望のする場合は、LPI-Japan事務局に問い合わせてみてください。



試験の対象職種



Webデザイナー
・グラフィックデザイナー
・フロントエンドプログラマー
・HTMLコーダー
・Webディレクター
・Webシステム開発
スマートフォンアプリ開発
・サーバーサイドエンジニア

といった職種が対象となっているようです。
主にフロントエンド周りに携わる人のための資格と言えると思います。

実際、試験を受けた身としても、
Webデザイナーから、Webディレクターなどにステップを移したいと思っている人にとって、
すごくいい勉強になると思うので、オススメしたいです。

あるいは、専業のWebデザイナーをしていて、
HTMLなども書けるようになりたいと思っている方にもオススメします。



出題範囲



「Level 1」の出題範囲は大きく5つのカテゴリに分かれています。

1.1 Webの基礎知識(出題率:30%)
 1.1.1 HTTP, HTTPSプロトコル
 1.1.2 HTMLの書式
 1.1.3 ネットワーク・サーバ関連技術の概要
 1.1.4 Web関連技術の概要
1.2 CSS3(出題率:20%)
 1.2.1 スタイルシートの基本
 1.2.2 CSSデザイン
 1.2.3 カスケード(優先順位)
1.3 要素(出題率:37%)
 1.3.1 HTML4.01以前の要素および属性
 1.3.2 HTML5で新しく加わった要素および属性
 1.3.3 HTML5で廃止されたタグ
1.4 レスポンシブWebデザイン(出題率:10%)
 1.4.1 マルチデバイス対応ページの作成
 1.4.2 メディアクエリ
 1.4.3 スマートフォンサイト最適化
1.5 オフラインWebアプリケーション(概要とマニフェスト)(出題率:3%)
 1.5.1 オフラインWebアプリケーション(概要とマニフェスト

デザイナー系職種の人にとっては、
「CSS3」や「要素」「レスポンシブWebデザイン」は得意分野だと思いますが、
「Webの基礎知識」「オフラインWebアプリケーション」の部分は弱いところだと思うので、
重点的に知識を付ける必要があります。

また仕事で散々HTMLやCSSを使っていたとしても、
HTML要素の本当の意味合いであったり、HTML5になって意味が変わったもの、
廃止予定の要素などといったものは、知らないことも多々あるので、
初心に戻って、勉強し直す必要・意味があると感じました。

実際、どのような問題が出るのかについては、
サンプル問題があるので、一度ご覧になって下さい。

http://html5exam.jp/measures/sample.html



勉強方法



自分の行った勉強方法は以下です。

・認定教材の問題集でテスト実施
・認定教材の熟読
・社内勉強会
・認定教材の問題集で模擬テスト再実施

http://html5exam.jp/measures/learning.html#book

上記で紹介されている「HTML5プロフェッショナル認定資格 レベル1 教科書」に、
問題集が収録されているので、まずはこれを実施することで、
自分に足りていない部分を確認しました。

その後、足りていない知識に関して、
教材を読んだり、HTML5/CSS3リファレンスを調べたりして、
知識の穴埋めを行いました。

また、社内勉強会を行うことで、
HTML5で新規に追加された要素であったり、CSS3のアニメーションに関して、
実際にコーディングを行い、座学だけでなく、手を動かして、勉強を行いました。

そして、実際の試験前に再度、認定教材の問題集を使用して、
模擬テストを行い、身につけた知識を総ざらいしました。



受験結果



結果としては、冒頭で伝えたとおり、一発で合格できました。
結果のスコアも教えてもらえるのですが、結構ギリギリといった感じでした。

テストの合格点は公表されていないのですが、公式の見解としては、
「サイコメトリック(計量心理学)を導入し、約7割程度の正答率で合格できるような設定となっています。」
ということです。

試験時間は80分だったのですが、
全部記入し、見直しを行っている途中で試験時間が終わってしまいました。
思ってたよりも時間を使った印象があります。
試験を行いながら、自己採点をしていたのですが、
(確実と思える問題と自身のない問題で分ける)
確実に取れてるのは6~7割程度だったので、とても不安がありました。

社内メンバーの状況として、合格率はまずまずといった具合でした。
職種としてはWebデザイナー/HTMLコーダーが苦戦しており、
実践と知識は違うということもあると思いますが、
コーディング以外の知識を問われる範囲が大きいということが大きな要因だと思っています。

経験のあるWebデザイナー/HTMLコーダーでも、しっかり勉強しないと、
足下をすくわれるので、受験する方はそれなりの時間をかけて、試験に臨んでもらえればと思います。

上記を参考に独学するのも良いですが、
資格取得を目指す方々のための教育機関(LPI-Japan HTML5アカデミック認定校)もあります。

http://html5exam.jp/measures/learning.html#institutions

アシアルも現在認定校の申請を行っており、
アシアルスクールでも、講座を開設する予定ですので、
ご興味のある方は是非お問い合わせいただければと思います。




個人的には、さらに難易度の高いLEVEL2にいつか挑戦したいと考えていますが、
内容がエンジニア向けでかつ出題範囲もかなり広いので、
受験して合格出来るのが、いつになるやら・・・。

とはいえ、アシアルスクールでそのうち講座もできると思うので、
受講して、いつか受験・合格できればいいなと思っています。

皆様も是非、HTML5プロフェッショナル認定試験を受けてみては如何でしょうか。

画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応)

こんにちは、鴨田です。

何らかの要素が縦横中央揃えになっているデザインが結構な頻度で出てきます。
デザイナーとしては見栄えを考えてそうしているのですが、
コーダーとしては、横方向はまだしも縦方向の中央揃えは何かと面倒だったりします。

いくつかケースがあると思うので、それぞれに関して自分ならこうする、
というコーディングをしていきたいと思います。

とある要素の中で画像だけを縦横中央揃えしたい、というケースもあると思いますが、
今回は画像があってその横に来るテキストを縦方向に中央揃えしなければならない、
というデザインに特化した説明をします。

また、画像の横幅は決まっているけど、テキスト部分の横幅が可変となっていて、
かつ、画像とテキストを内包するリンクは縦横いっぱいにリンクエリアが確保されている
というリキッドレイアウトとします。



0.元となるHTML



HTML


<div class="wrap">
  <a href="#">
    <div><a href="https://www.asial.co.jp100-100.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp100-100.png"></a></div>
    <p>画像アリ一行テキスト</p>
  </a>
  <a href="#">
    <p>画像ナシ一行テキスト</p>
  </a>
  <a href="#">
    <div><a href="https://www.asial.co.jp100-100.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp100-100.png"></a></div>
    <p>画像アリ複数行テキスト画像アリ複数行テキスト画像アリ複数行テキスト</p>
  </a>
  <a href="#">
    <p>画像ナシ複数行テキスト画像ナシ複数行テキスト画像ナシ複数行テキスト</p>
  </a>
</div>


<img>を<div>で囲んでいますが、場合によっては囲う必要はありません。
(1と3のケースでは、囲う必要はありません。
 divに指定しているCSSをimgに適用すれば動くはずです)

これから各ケースにおいて、CSSの説明をしますが、
デザイン上の装飾に関しては、スルーします。
縦方向の中央揃え、リキッドレイアウトに関する箇所のみの説明となります。



1.line-heightを使う



CSS


.wrap {
  border-top: 1px solid #666;
}

.wrap a {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background: #eee;
  border-bottom: 1px solid #666;
  display: block;
}

.wrap a:hover {
  background: #eff;
}

.wrap div {
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: middle;
}

.wrap p {
  display: inline-block;
  line-height: 100px;
}



デモページ

<img>を含む<div>に対して、"vertival-align"を指定し、
横に並ぶ<p>に"line-height"を画像の高さに合わせて指定することで、
縦方向に中央揃えとすることが出来ます。

テキストが絶対に一行に収まるときは、この方法が一番楽な実装になると思いますが、
テキストが複数行になると派手に崩れます。



2.display: table-cellを使う



CSS


.wrap {
  border-top: 1px solid #666;
}

.wrap a {
  width: 100%;
  height: 120px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background: #eee;
  border-bottom: 1px solid #666;
  display: table;
}

.wrap a:hover {
  background: #eff;
}

.wrap div {
  display: table-cell;
  width: 100px;
  padding: 0 5px 0 0;
}

.wrap p {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2;
}



デモページ

まず、<div>と<p>を内包する<a>に、"display: table"を指定し、
<div>と<p>に"display: table"を指定することで、横並びのリキッドレイアウトを実現します。

<div>に"width"をpx指定することで、<p>の幅は可変となります。
最後に、<p>に"vertical-align"を指定することで、縦方向に中央揃えとなります。



3.box-align: centerを使う



CSS


.wrap {
  border-top: 1px solid #666;
}

.wrap a {
  width: 100%;
  height: 120px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background: #eee;
  border-bottom: 1px solid #666;
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  box-align: center;
}

.wrap a:hover {
  background: #eff;
}

.wrap div {
  width: 100px;
  padding: 0 5px 0 0;
}

.wrap p {
  -webkit-box-flex: 1.0;
  -moz-box-flex: 1.0;
  -o-box-flex: 1.0;
  -ms-box-flex: 1.0;
  line-height: 1.2;
}



デモページ

<div>と<p>を内包する<a>に、"display: box"を指定することで、自身をボックス要素とし、
さらに、"box-align: center"を指定することで、子要素の縦方向の揃え位置が中央揃えになります。

<div>に"width"をpx指定し、<p>には"box-flex"を指定することで、
横並びのリキッドレイアウトとなります。



以上です。

IE9での対応を考えると、2の方法がオススメですが、
古いIEまで考えると、実は2も3も使えなかったりします。
その時は真面目にmarginを使用して、行数に応じたクラスを作成するなどして、
どうにかするしかありません。

スマホ対応やモダンブラウザだけでいいのであれば、
是非試してもらえたらと思います。

CSS3 メディアクエリを使ってWebサイトをスマートフォン・タブレット対応しよう

皆様、ご無沙汰しております。笹亀です。
ブログを公開させていただくペースが遅くなってしまいました・・申し訳ございません。そのことが災いしたのか、先日、自分のスマートフォンを落としてしまい、液晶が派手に割れてしまいました。

さて最近、仕事をしている中でPC系だけではなく、スマートフォン系のサイトを作成をすることはもはや当たり前になってきました。そんなスマートフォンサイトでもさらにタブレットにも対応をさせたWebサイトの構築を求められることが多くなってきています。タブレットに対応させるサイトの構築方法ですが、様々なものが考えられます。
例えば動的にタブレットスマートフォンを判定して、テンプレートを出し分けするといった対応する方法やViewPortを固定値にして作成する方法などがございます。
今回はViewPortは下記のようにデバイスのサイズにした状態でCSS3のメディアクエリというものを利用した方法をご紹介したいと思います。


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


メディアクエリとはメディアタイプとメディア特性を必要とする一つ以上の条件式からなりたちます。メディアタイプには様々なものがあり、それぞれの条件にあったときに特定のスタイルを適応することができます。
参考:メディアクエリ

今回はスマートフォンタブレットなどを想定した画面サイズの違いによって、適応するスタイルを変更するといったことをおこないます。簡単なサンプル用のHTMLとメディアクエリを記載したCSSを用意して説明致します。

sample.html




<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
	<meta charset="UTF-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no" />

	<link rel="stylesheet" href="./css/sample.css" />
	<title>メディアクエリのサンプル</title>
</head>
<body id="top">
<div id="page">
<header class="global">
	<div id="header_inner">
		<p class="headerlogo"><a href="https://www.asial.co.jpimg/logo.png &mode=1" class="popupimg"><img src="https://www.asial.co.jpimg/logo.png"></a></p>
	</div>
</header>

<section class="main">
	<div class="test_1">
		<h3><a href="https://www.asial.co.jpimg/sample.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpimg/sample.jpg"></a></h3>
		<div class="test_1_inner">
			<ul class="list">
			<li><a><p class="head">ブログAほげほげほげほげほげほげほげほげほげほげほげほげほげ</p><p class="time">2013年5月21日</p></a></li>
			<li><a><p class="head">ブログB</p><p class="time">2013年5月20日</p></a></li>
			<li><a><p class="head">ブログC</p><p class="time">2013年5月19日</p></a></li>
			</ul>
		</div>
	</div><!-- //.test_1 -->
	
	<div class="test_2">
		<div class="text_big">文字サイズ大</div>
		<div class="text_middle">文字サイズ中</div>
		<div class="text_small">文字サイズ小</div>
		<div class="copy">Copyright &copy; Asial Corporation All rights Reserved.</div>
	</div>
</section>
</div>
</body>
</html>


sample.css




/** header-start **/
header.global {
background: #fe9700; /* Old browsers */
background: -moz-linear-gradient(top, #fe9700 0%, #fed919 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe9700), color-stop(100%,#fed919)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fe9700 0%,#fed919 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fe9700 0%,#fed919 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fe9700 0%,#fed919 100%); /* IE10+ */
background: linear-gradient(to bottom, #fe9700 0%,#fed919 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9700', endColorstr='#fed919',GradientType=0 ); /* IE6-8 */
position: relative;
height: 190px;
}

header.global .headerlogo {
	float: left;
	width: 460px;
}

header.global .headerlogo #header_rogo{
	width: 460px;
	height: 50px;
}
/** header-end **/




/* test_1-start */
section.main .test_1 h3{
	text-align: center;
}

section.main .test_1 ul.list{
	overflow: hidden;
	border:solid 1px #ddd;
	width: 620px;
	margin: 0 auto 17px;
	background-color: #fff;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	list-style-type: none;
	padding-right: 40px;	
}

section.main .test_1 ul.list li{
	background-image:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%); 
	background-image:-webkit-gradient(linear,left top, left bottom,,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(229,229,229)));
	background-image:-webkit-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
	background-image:-o-linear-gradient(top,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
	background-image:linear-gradient(to bottom,rgb(255,255,255) 0%,rgb(229,229,229) 100%);
	border-top:solid 1px #ddd;
	margin-top: -1px;
}

section.main .test_1 ul.list li a{
	height: 100%;
	color: #000;
	text-decoration: none;
	font-size: 27px;
	display: block;
	padding: 10px 15px;
}

section.main .test_1 ul li a p.head{
	margin-bottom:0;
	width: 100%;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}

/* test_1-end */

/* test_1-start */
section.main .test_2{
	width: 100%;
	text-align: center;
	background-color: #7FFFD4;
}

section.main .test_2 .text_big{
	font-size: 48px;
}

section.main .test_2 .text_middle{
	font-size: 32px;
}

section.main .test_2 .text_small{
	font-size: 18px;
}

section.main .test_2 .copy{
	font-size: 20px;
	padding-top: 50px;
	text-align: center;
	color: #333;
	font-weight: normal;
}

/* test_2-end */

/* メディアクエリー部分 */
@media screen and (max-width: 720px) {
	/** header-start **/
	header.global{
		height: 95px;
	}
	header.global .headerlogo {
		width:230px;
	}
	header.global .headerlogo #header_rogo{
		width: 230px;
		height: 25px;
	}
	/** header-end **/
	
	/* test_1-start */
	section.main .test_1{
		padding-top:43px;
		background-size: 112px 36px, auto auto;
		background-position: right 10px, 0 0;
	}
	section.main .test_1 h3{
		width: 360px;
		text-align: center;
	}
	section.main .test_1 h3 img{
		width: 210px;
		height: 140px;
	}
	
	section.main .test_1 ul.list{
		overflow: hidden;
		border:solid 1px #ddd;
		width: 320px;
		margin: 0 auto 8px;
		background-color: #fff;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	section.main .test_1 ul.list li{	

		border-top:solid 1px #ddd;
		margin-top: -1px;
		/* height: 43px; */
	}
	section.main .test_1 ul.list li a{
		font-size: 13px;
		padding: 4px 7px;
	}
	section.main .test_1 ul.list li a .time{
		font-size: 6px;
	}
	/* test_1-end */
	
	/* test_2-start */
	section.main .test_2 .text_big{
		font-size: 24px;
	}

	section.main .test_2 .text_middle{
		font-size: 16px;
	}

	section.main .test_2 .text_small{
		font-size: 9px;
	}

	section.main .test_2 .copy{
		font-size: 10px;
		padding-top: 25px;
		text-align: center;
		color: #333;
		font-weight: normal;
	}
	/* test_2-end */

}


少しサンプルHTMLとCSSが長くなりましたが、こちらをベースにして説明をさせていただきます。メディアクエリにてスタイルを変更する際の注意点ですが、素材などのコンテンツについてスタイルを分ける中で一番解像度が大きいもの、今回の場合ですとタブレットの素材で作成するようにします。例えばタブレット用に用意した画像素材は、スマートフォンなどで表示する際にはタブレットより小さい解像度のときは比率を合わせて縮小して利用します。


例)タブレット用に準備した画像のサイズ:720x400 → スマートフォンで表示するサイズ:300x166


それではメディアクエリの説明をさせていただきます。メディアクエリはメディアタイプのその条件を指定し、条件内に記載されているスタイルが記載した条件にマッチするときにスタイルとして適応されます。下記の条件は、出力デバイスの描画域の横サイズが720ピクセル以下の場合にスタイルが適応されます。


@media screen and (max-width: 720px) {
 ・・・・
}


複数の条件を設定することも可能で、下記のようにすると出力デバイスの描画域の横サイズが500ピクセルから800ピクセルの場合にスタイルが適応されます。


@media screen and (min-width: 500px) and (max-width: 800px) {
 ・・・・
}


sample.cssに記載されたメディアクエリは、720ピクセル以下の場合に通常で読み込んでいるスタイルを上書きして、条件内に記載しているスタイルが適応されることになります。

横サイズ:1024px



※ロゴの画像のスタイルは条件にマッチしないため、下記のスタイルが適応されている。


header.global .headerlogo #header_rogo{
  width: 460px;
  height: 50px;
}

富士山の画像についても同様に下記のスタイルが適応されている。


section.main .test_1 h3{
  text-align: center;
}

文字サイズを横サイズによって大きさを分けて表示する。



section.main .test_1 ul.list li a{
  height: 100%;
  color: #000;
  text-decoration: none;
  font-size: 27px;
  display: block;
  padding: 10px 15px;
}

section.main .test_1 ul li a p.head{
  margin-bottom:0;
  width: 100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
section.main .test_2 .text_big{
  font-size: 48px;
}
section.main .test_2 .text_middle{
  font-size: 32px;
}
section.main .test_2 .text_small{
  font-size: 18px;
}
section.main .test_2 .copy{
  font-size: 20px;
  padding-top: 50px;
  text-align: center;
  color: #333;
  font-weight: normal;
}


横サイズ:360px



※ロゴの画像のスタイルは条件にマッチするため条件内の下記のスタイルが適応されている。


header.global .headerlogo #header_rogo{
  width: 230px;
  height: 25px;
}

富士山の画像についても同様に下記のスタイルが適応されている。


section.main .test_1 h3{
  width: 360px;
  text-align: center;
}
section.main .test_1 h3 img{
  width: 210px;
  height: 140px;
}

文字サイズを横サイズによって大きさを分けて表示する。



section.main .test_1 ul.list{
  overflow: hidden;
  border:solid 1px #ddd;
  width: 320px;
  margin: 0 auto 8px;
  background-color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
section.main .test_1 ul.list li{	
  border-top:solid 1px #ddd;
  margin-top: -1px;
}
section.main .test_1 ul.list li a{
  font-size: 13px;
  padding: 4px 7px;
}
section.main .test_1 ul.list li a .time{
  font-size: 6px;
}
section.main .test_2 .text_big{
  font-size: 24px;
}
section.main .test_2 .text_middle{
  font-size: 16px;
}
section.main .test_2 .text_small{
  font-size: 9px;
}
section.main .test_2 .copy{
  font-size: 10px;
  padding-top: 25px;
  text-align: center;
  color: #333;
  font-weight: normal;
}


このようにメディアクエリを使用するとスマートフォンタブレットのように解像度が異なる端末でも、動的にテンプレートを切り替えることなくスタイルのみを切り分けるだけで対応することができます。
今回の例では2種類の切り分けのみでしたが、スマホタブレット特有の画面の縦表示・横表示の切り替えに対応するために数種類のサイズを用意することも可能です。


@media screen and (max-width: 360px) {
 ・・・・
}
@media screen and (min-width: 361px) and (max-width: 600px) {
 ・・・・
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
 ・・・・
}


おまけ


1行以上の文字列を折り返して表示をしたくなくて、文字数をカウントして◯◯以上の文字の場合は「...」にするということをよくおこないます。
文字数をカウントしてJSで切ったり、VIEW側でVIEWのヘルパーを使ったりといった対応をする方もいらっしゃると思います。
CSSでも対応できます。



<div class="test_1_inner">
  <ul class="list">
  <li><a><p class="head">Web標準のHTML5,JavaScript, CSSでスマフォアプリ未経験者でも簡単にアプリ開発ができます。</p><p class="time">2013年5月21日</p></a></li>
  <li><a><p class="head">ブログB</p><p class="time">2013年5月20日</p></a></li>
  <li><a><p class="head">ブログC</p><p class="time">2013年5月19日</p></a></li>
  </ul>
</div>



section.main .test_1 ul li a p.head{
  margin-bottom:0;
  width: 100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}


画像ではうまく伝わらないかと思いますので、そんな方はサンプルをブラウザで開き、ブラウザの横サイズを小さくしたり、大きくしたりしてみてください。スタイルがきりかわっているのがわかると思います。

次回は内容がガラッと変わりますが、postgresのレプリケーションについて興味があるので試しながらブログにしたいと思います。
それでは、皆様、良い、プログラミングライフを〜

CSSだけで作るアイコン付きボタンの作り方

こんにちは、鴨田です。

近頃はボタンのデザインに限らず、CSSで実現できるものは、
グラフィックにせず、CSSだけで書いています。

ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、
最近はあまりPhotoshopを開くこともなくなってきています。

ということで、本日はCSSだけで作るアイコン付きボタンの作り方です。
アイコン付きというのがポイントです。



● アイコンなしボタン


とりあえず、アイコンなしで作りましょう。

HTML


<body>
  <a href="#" class="button normal">ボタン</a>
</body>

CSS


body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
}

a {  
  /* サイズ指定 */
  width: 200px;
  height: 50px;
  display: block;
  box-sizing: border-box;
  margin: 20px;
  
  /* 縦横中央揃え */
  text-align: center;
  line-height: 50px;
  
  /* 色指定 */
  background-image: -webkit-linear-gradient(top, #FC0, #F60);
  border: 2px solid #F33;
  color: #FFF;
  
  /* 角丸 */
  border-radius: 25px;
  
  /* シャドウ / ベベル */
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(255, 255, 255, 0.9) inset, 0 -1px 3px rgba(0, 0, 0, 0.1) inset;
  
  /* その他 */
  text-decoration: none;
  font-size: 24px;
  
}

a:hover {
  /* 反転 */
  background-image: -webkit-linear-gradient(top, #F60, #FC0);
}



デモページ

こんな感じでしょうかね。
ボタンとしては十分に機能していると思います。



● アイコン付きボタン その1


単純に文字の横に、アイコンを置きたい場合はimgタグで表現したり、
spanタグを使ってもいいと思います。



<body>
  <a href="#" class="button normal"><a href="https://www.asial.co.jparrow.png &mode=1" class="popupimg"><img src="https://www.asial.co.jparrow.png"></a>IMGタグ</a>
  <a href="#" class="button normal"><span class="arrow">></span>SPANタグ</a>
</body>

CSS


a img.arrow {
  width: 24px;
  height: 24px;
  display: inline-block;

  /* 位置合わせ用 */
  vertical-align: middle;
  margin: 0 10px 5px 0;
}

a span.arrow {
  width: 24px;
  height: 24px;
  background-image: url(arrow.png);
  background-size: 24px 24px;
  display: inline-block;
  text-indent: -9999px;

  /* 位置合わせ用 */
  vertical-align: middle;
  margin: 0 10px 5px 0;
}



デモページ

imgとかspanで入れた際に、微妙にずれるので、ちょっと位置合わせする必要があります。

また、この方法で作った場合の問題点として、
アイコン+文字でのセンター揃えなので、アイコンの位置が変わってしまい、
ボタンを縦に並べる様なデザインだと、統一感がなくなるということがあり得ます。

なので、次はアイコンの位置を固定したい場合を考えてみます。



● アイコン付きボタン その2


アイコンを左位置に固定したいと思います。



<body>
  <a href="#" class="button i-left1">ボタン</a>
  <a href="#" class="button i-left2">ボタン</a>
</body>

CSS


a.button.i-left1 {
  background-image: url(arrow.png), -webkit-linear-gradient(top, #FC0, #F60);
  background-repeat: no-repeat, no-repeat;
  background-position: left 10px center, 0 0;
  background-size: 24px 24px, contain;
}

a.button.i-left1:hover {
  background-image: url(arrow.png), -webkit-linear-gradient(top, #F60, #FC0);
}

a.button.i-left2 {
  position: relative;
}

a.button.i-left2:before {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  top: 50%;
  left: 10px;
  margin: -12px 0 0 0;
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-size: 24px 24px;
}



デモページ

前者(a.button.i-left1)は背景画像の一部として、アイコンを表現しています。
この場合、一点、難があります。
PCブラウザでは、特に問題なく見られると思いますが、
スマートフォンの一部ブラウザで見ると、表示が崩れます。
原因は下記CSS部分です。
CSS3で拡張されたbackground-positionが解釈されないようです。
(横方向は左端から10px、縦方向は中央揃え)



background-position: left 10px center;


なので、もし前者の方を採用する場合は、
画像にあらかじめマージンまで含める必要があります。

それが面倒な場合などは、後者(a.button.i-left2)の実装をおすすめします。
こちらであれば、モバイルブラウザでも崩れることはありません。

また、アイコン自体を背景画像として表現するのではなく、
ウェブフォントにしてしまうということも出来ます。

もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法
昔の自分の記事ですが、参考までに。

:beforeや:after議事要素を応用すると、いろいろな表現が可能です。
例として、当ブログから以下の記事をご紹介します。
CSSだけで簡単に吹き出しを作成する方法4つ!



以上です。

これから、フラットデザインが流行ってくると、
ボタンの質感よりも、ボタンのアイコンに重点が置かれるようになると思いますので、
そのようなときに役立てばいいかなと思います。

例えばこんな。


デモページ

【CSS】ハイブリッドアプリを作成するときにいつも書くようにしているCSSプロパティいくつか!

こんにちは、相変わらずドラクエ10三昧の橋本です。
最近はライノス道場に通っています。


さて、今日はハイブリッドアプリのCSSを書く際に毎回指定するようにしているプロパティを備忘録がてらいくつか書いていこうと思います(いつも忘れるので)。

-webkit-tap-highlight-color: rgba(0, 0, 0, 0)



iPhoneAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。
-webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。

ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないようにしています。



* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


リストの項目など、敢えて選択時に色を付けたい場合には、個別にtap-hightlight-colorを指定するといいかと思います。


-webkit-touch-callout: none



iOSでリンクを長押しした際に表示されるポップアップメニューを消すためにこのプロパティを設定しています。
ポップアップメニューが出るとネイティブっぽくないですもんね



* {
    -webkit-touch-callout: none;
}



-webkit-user-select: none



スマホのヘッダやフッター、またはボタンなどの要素の文字列や画像を選択してコピーできてしまうと、一気にネイティブっぽくなくなりますよね。
そんなときには、-webkit-user-selectにnoneを設定することで、要素を選択できなくすることができます。



* {
    -webkit-user-select: none;
}


ただし、このままだと、input要素で文字入力ができなくなってしまったり、何かと不都合があるので、ユーザーからの選択を許可したい箇所には、以下のように-webkit-user-selectにautoを入れて選択できるようにする必要があります。



input[type=text] {
    -webkit-user-select: auto;
}


もしくは、以下のように最初からinputは対象外にするのもいいかもです。



*:not(input){
    -webkit-user-select: none;
}



-webkit-overflow-scrolling: touch



スマホのネイティブアプリの特徴の1つに、コンテンツの慣性スクロールがあると思います。
-webkit-overflow-scrollingプロパティにtouchを指定することで、オーバーフローしたコンテンツに対して慣性スクロールを適用することができます。



div.contents-ga-overflow-suruyo {
    -webkit-overflow-scrolling: touch;
}


ただ、慣性スクロールは非常に重い処理になるので、端末とコンテンツによっては動きがガクガクになる場合があります(iPhone3GS、iPhone4など)。
そういう場合には、コンテンツにGPUアクセラレーションを効かせるために、以下の指定を入れます。



div.contents-ga-overflow-suruyo > * {
    -webkit-transform: translateZ(0px);
}


今回は-webkit-transform: translateZ(0px)を指定していますが、GPUアクセラレーションを効かせることが出来る指定なら、なんでもいいかと思います。
ただ、iOS6からは、「-webkit-transform: preserve-3d」ではGPUアクセラレーションが効かなくなっているので、それだけは要注意です。


box-sizing: border-box



これはハイブリッドアプリに限ったものではないのですが、ハイブリッドアプリを作成する際には、必ずこの指定を全ての要素に対して入れるようにしています。



* {
  box-sizing: border-box;    
}


box-sizingとは、ボックスの大きさの算出方法を指定するためのプロパティです。
box-sizingには、「content-box」と「border-box」の二種類の値を指定することができます。
content-boxを指定すると、ボックスの幅と高さには、罫線とpaddingの値は含みません。
box-sizingを指定しない場合と同じ扱いになります。

border-boxを指定すると、ボックスの幅と高さに、罫線とpaddingの値を含みます。

わかりにくいので、例として、以下の要素で説明します。



div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    padding: 10px;
}


box-sizingにcontent-boxを指定した場合、divの幅と高さは122pxになります。
box-sizingにborder-boxを指定した場合、divの幅と高さは100pxになります。

CSSでwidthやheightを指定する際に、paddingとborderの幅を考慮しなくてよくなるため、非常に快適です。



いかがでしたでしょうか。参考にしてもらえるとありがたいです。

決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた

こんにちは、鴨田です。

年の瀬ですね。
年をとる毎に一年があっという間に過ぎてしまうので、
もう今年も終わりかと嘆く日々です。

ということで、個人的には今年最後のブログとなります。

スマホサイトを作っていると、
見出しリストの作り方というのが、大分テンプレート化するので、
今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。



● デザイン




こういう感じのいかにもなリストを作ります。
ポイントは特にありませんが、せっかくなので画像はどんなサイズが来ても対応できるように、
縦横中央揃えに出来るjQueryライブラリを使います。

画面サイズは、横320pxとします。
そろそろ640pxくらいにしておきたい気がするのですが、
広告が320px対応が多かったりしますので。



● HTML




<article>
  <h1><a href="#list">リストタイトル</a></h1>
  <ul>
    <li>
      <a href="#title1">
        <div>
          <a href="https://www.asial.co.jp4-3.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp4-3.png"></a>
        </div>
        <p>記事タイトル1</p>
      </a>
    </li>
    <li>
      <a href="#title2">
        <div>
          <a href="https://www.asial.co.jp4-2.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp4-2.png"></a>
        </div>
        <p>記事タイトル2</p>
      </a>
    </li>
    <li>
      <a href="#title3">
        <div>
          <a href="https://www.asial.co.jp2-3.png &mode=1" class="popupimg"><img src="https://www.asial.co.jp2-3.png"></a>
        </div>
        <p>記事タイトル3</p>
      </a>
    </li>
  </ul>
  <h2><a href="#list">一覧 &nbsp;>></a></h2>
</article>

ポイントは特にありませんが、画像の縦横中央配置を行うために、
img要素をdiv要素で囲っておいてください。



CSS




* {
  margin: 0;
  padding: 0;
}

article {
  width: 320px;
}

article h1 {
  font-size: 16px;
  padding: 10px;
  background: #333;
}

article h1 a {
  color: #fff;
  text-decoration: none;
}

article li {
  border-bottom: 1px solid #9FA0A0;
  width: 100%;
}

article li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

article li a:before {
  content: ">";
  float: right;
  margin: 26px 0 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #666;
}

article li a:hover {
  background: #eee;
}

article div {
  width: 100px;
  height: 75px;
  border: 1px solid #333;
  margin: 0 5px 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  background: #fff;
}

article div img {
  position: absolute;
  max-width: 100px;
  max-height: 75px;
}

article p {
  display: inline-block;
  font-size: 14px;
}

article h2 {
  text-align: right;
  margin: 10px 0;
}

article h2 a {
  padding: 0 10px;
  font-size: 14px;
  color: #333;
}

こちらも特には説明は要らないのですが、
各見出しの右側に「>」を入れるために、
:before疑似要素で無理矢理突っ込んでいます。

本当は背景画像でやる方が細かい画像調整ができるはずです。
画像を使うのが面倒な場合、上記方法でも可能です。



● boxcenter.js


画像の縦横中央配置に関しては、boxcenter.jsを使用します。
詳しい説明は下記を参照してください。
http://labs.cybridge.jp/2011/05/boxcenter.html

外部ファイルとしておいてもいいですし、
head内に直接書いてもいいと思います。


$.fn.boxCenter = function() {
  return this.each(function(i){
    var w = $(this).width();
    var h = $(this).height();
    var mtop = (h/2)*(-1);
    var mleft = (w/2)*(-1);
    $(this).css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ 

"px"});
  });
};
$(window).bind("load",function(){
  $("article div img").boxCenter();
});

jQueryの読み込みは忘れないようにしてください。



● デモ





デモページ



こちら必要に応じて、いろいろとカスタマイズしてもらえたらと思います。
来年もよろしくお願いいたします。

もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法

こんにちは、鴨田です。

最近、アイコンがセットされたWebフォントを使うことで、
画像を使わずにアイコンを表示するという手法が流行っていますね。

すごく興味はあったのですが、なかなか使う機会もなく、
便利そうだなと思っていただけで、今まで使ったことがありませんでした。

しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。
(プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・)

1.アイコンWebフォントをダウンロードする



最近話題になっていたこちらのサイトがとても便利です。

Fontello - http://fontello.com/



使いたいフォントを選択します。
ここでは、「Entypo」フォントから5つ選択します。



選択が終わったら、上部のタブから「Edit codes」をクリックします。



イコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。
英語で頭文字を取るとか、abc~とかにするとかですかね。



文字列の指定が終わったら、フォントファイルのダウンロードを行います。
サイト右上にある「Download webfont(n)」をクリックしましょう。
「fontello-xxxxxxxx.zip」がダウンロードされます。

解凍して中身を見てみましょう。

fontello
cssフォルダ
 -icons.css
 -icons-codes.css
 -icons-ie7.css
 -icons-ie7-codes.css
-fontフォルダ
 -icons.eot
 -icons.svg
 -icons.ttf
 -icons.woff
-config.json
-demo.html
-LISENSE.txt
-README.txt

が入っています。

どんな作りになっているのかは割愛します。
重要な箇所に関しては、後で説明しています。
とりあえず中身を知りたい人は、ライセンスとリードミーを読んだ後、
(特にフォントのライセンスについては特に確認した方がいいと思います)
demo.htmlとicons.cssを見てみてください。

それでは、iOS風タブバーを作っていきましょう。

2.HTMLとCSSRetina対応のiOS風タブバーを作成する



html
cssフォルダ
 -reset.css
 -style.css
-fontフォルダ
 -icons.eot
 -icons.svg
 -icons.ttf
 -icons.woff
-index.html

reset.cssは、HTML5用の既知のreset.cssであれば何でも構いません。
以前に記事にした「HTML5+CSS3の導入時に役立つ7つの設定」も参考にしてください。

「font」フォルダは、先ほどダウンロードしてきたフォルダをそのままコピーします。

まずは、tab.htmlを書きましょう。

index.html


<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>iOS風タブバー</title>
  <link rel="stylesheet" media="screen" href="css/reset.css" />
  <link rel="stylesheet" media="screen" href="css/style.css" />
</head>

<body>

  <!-- header -->
  <header id="header">
    <h1>タイトル</h1>
  </header>

  <!-- tab menu -->
  <nav id="tab">
    <ul>
      <li><a href="" class="on"><span><i class="icon-home"></i>HOME</span></a></li>
      <li><a href=""><span><i class="icon-camera"></i>カメラ</span></a></li>
      <li><a href=""><span><i class="icon-picture"></i>アルバム</span></a></li>
      <li><a href=""><span><i class="icon-bookmark-1"></i>お気に入り</span></a></li>
      <li><a href=""><span><i class="icon-info-circle"></i>お知らせ</span></a></li>
    </ul>
  </nav>

</body>
</html>


特に何の変哲もないHTMLのソースコードです。
これに関しては、何も言うことがありません。

続いて、style.cssを書きます。

style.css


/* font */

@font-face {
  font-family: 'icons';
  src: url("../font/icons.eot");
  src: url("../font/icons.eot?#iefix") format('embedded-opentype'), url("../font/icons.woff") format('woff'), url("../font/icons.ttf") format('truetype'), url("../font/icons.svg#icons") format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-home:before { content: '\68'; } /* 'h' */
.icon-info-circle:before { content: '\69'; } /* 'i' */
.icon-picture:before { content: '\70'; } /* 'p' */
.icon-camera:before { content: '\63'; } /* 'c' */
.icon-bookmark-1:before { content: '\66'; } /* 'f' */

/* common */

#header {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 44px;
  top: 0;
  left: 0;
  background: #eee;
  background: -o-linear-gradient(top, #fff, #fff 50%, #ddd 50%, #ddd);
  background: -moz-linear-gradient(top, #fff, #fff 50%, #ddd 50%, #ddd);
  background: -webkit-gradient(linear,left top,left bottom, color-stop(0.5, #fff),color-stop(0.5, #ddd));
  border-top: 1px solid #666;
  border-bottom: 1px solid #444;
  text-align: center;
  overflow: hidden;
}


#tab {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 49px;
  bottom: 0;
  left: 0;
  border-top: 1px solid #444;
  background: #ccc;
  background: -o-linear-gradient(top, #fff, #ccc);
  background: -moz-linear-gradient(top, #fff, #ccc);
  background: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff),color-stop(1, #ccc));
  float: left;
  overflow: hidden;
}

/* header */

#header h1 {
  line-height: 44px;
  display: block;
  font-size: 20px;
}

/* footer */

#tab ul {
  width: 100%;
  height: 49px;
  float: left;
}

#tab li {
  width: 20%;
  height: 100%;
  text-align: center;
  display: block;
  float: left;
}

#tab li a {
  width: 100%;
  height: 100%;
  display: block;
  color: #777;
  text-decoration: none;
  font-size: 8px;
}

#tab li a.on, #tab li a:hover {
  color: #09c;
}

#tab li a span {
  margin: 3px 6px;
  padding: 0 0 2px;
  display: block;
}

#tab li a.on span {
  margin: 2px 5px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}

#tab li a i {
  font-family: 'icons';
  font-size: 30px;
  font-style: normal;
  display: block;
  padding: 0 0 2px 0;
}

#tab li a.on i, #tab li a:hover i {
  text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.6);
}


注目するところは、以下ですね。



@font-face {
  font-family: 'icons';
  src: url("../font/icons.eot");
  src: url("../font/icons.eot?#iefix") format('embedded-opentype'), url("../font/icons.woff") format('woff'), url("../font/icons.ttf") format('truetype'), url("../font/icons.svg#icons") 

format('svg');
  font-weight: normal;
  font-style: normal;
}


まずは、Webフォントの読み込みを行います。



.icon-home:before { content: '\68'; } /* 'h' */
.icon-info-circle:before { content: '\69'; } /* 'i' */
.icon-picture:before { content: '\70'; } /* 'p' */
.icon-camera:before { content: '\63'; } /* 'c' */
.icon-bookmark-1:before { content: '\66'; } /* 'f' */


:beforeセレクタとcontentプロパティを使うことで、
HTML自体に余計な文字列が紛れ込むのを防いでいます。
SEOユニバーサルデザイン的にもあまりよろしくないですからね。

そして、最終的に重要なところはここです。



#tab li a i {
  font-family: 'icons';
  font-size: 30px;
  font-style: normal;
  display: block;
  padding: 0 0 2px 0;
}


アイコンを表示させるべき箇所で、font-familyプロパティに、さきほどセットした"icons"を使用します。
displayプロパティはblockにしてください、地味に重要です。
後は、アイコンの大きさとちょっとしたパディング設定とイタリック体の解除を行っています。

これだけです。これだけでこうなります。
デモなので、ロールオーバーとかします。



なんて便利!
もういちいち画像を使って、タブバーを作るのが面倒くさくなってしまいます。

動作確認は、iOS5.0ではSafariChrome、Android4.0および2.3では標準ブラウザで行っています。
PCブラウザであれば、各最新版のSafariChromeFirefoxOperaで問題ありません。
IEは9以降で、グラデーション等が使えないですが、Webフォント自体は使えるようですね。

一応、横幅はどんなサイズであろうとも、対応しています。
ただし、もろもろの事情により、先日書いた「CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方」とは違い、古風な手段で対応しています。

Opera対応しようと思っただけなのですが、Operaはbox-flex使えないので・・・
 多分、スマホサイトでしか使わないと思うので、
 OperaIEを気にしないのであれば、上記記事と組み合わせて、モダンなCSSでいけるはずです。

是非、一度試してもらえたらと思います。

GitHubソースコード一式を公開したので、煮るなり焼くなり、
自由にダウンロードやフォークしてみてください。

jsdo.itにも公開しておきます。ただし、SVGファイルしか置けなかったので、
ChromeSafariでしか、ちゃんと表示されません。

CSS Filter Effectsの使い方

こんにちは、橋本です。

今日は最新版のChromeWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。
途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。
また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。
この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。

wikipedia: レナ (画像データ)

CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう!」というものです。
Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。

具体的には、以下のようなフィルタが実装されています。
・色相・明度・彩度
・グレースケール・セピア
・透明度
・階調の反転
コントラスト
・ぼかし
・ドロップシャドウ

フィルターを適用するためには、filter属性(ベンダプレフィクスが必要)に対して、適用したい画像処理用の関数を指定します。

文字で書いていても仕方ないので、サンプルを作成して、実際の使い方と結果を見ていきたいと思います。

色相・明度・彩度


画像の色相、明度、彩度を変更するためのフィルタです。
色相を変更する際には、hue-rotate関数を使います。引数には色相環を回転させたい角度を指定します。

明度を変更する際には、brightness関数を使います。引数には現在の明度を0%として、どのくらい明度を上げ下げするのかを指定します。
値は-100%が黒、100%が白で、値が大きくなればなるほど明るくなります。

彩度を変更する際には、saturate関数を使います。引数には現在の彩度を100%として、どのくらい彩度を上げ下げするのかを指定します。
値が大きくなればなるほど彩度が高くなります。

サンプルはこちら


/* 色相 */
.hue {
    -webkit-filter: hue-rotate(180deg);
}

/* 明度 */
.brightness {
    -webkit-filter: brightness(-50%);
}

/* 彩度 */
.saturate {
    -webkit-filter: saturate(100%);
}


実行結果




グレースケール・セピア


画像をグレースケール、もしくはセピア調に加工するためのフィルタです。
グレースケールを適用するには、grayscale関数を使います。
また、セピアを適用するには、sepia関数を使います。
どちらも引数として、フィルタを適用する割合を%指定で引数に渡すことができます。100%が完全にフィルタが適用された状態で、デフォルトは100%です。

サンプルはこちら


/* グレースケール */
.grayscale {
    -webkit-filter: grayscale();
}

/* セピア */
.sepia {
    -webkit-filter: sepia();
}


実行結果



透明度


画像の透明度を変更するためのフィルタです。
透明度を変更する際には、opacity関数を使います。引数は透明度の割合で%で指定します。

サンプルはこちら


/* 透明度 */
.opacity {
    -webkit-filter: opacity(50%);
}


実行結果


階調の反転


画像の階調の反転を行うためのフィルタです。いわゆるネガ・ポジ反転です。
フィルタを適用するには、invert関数を使います。

サンプルはこちら


.invert {
    -webkit-filter: invert();
}


実行結果


コントラスト


画像のコントラストを変更するためのフィルタです。
コントラストを変更するには、contrast関数を使います。引数には現在のコントラストを100%として、どのくらいコントラストを上げ下げするか指定します。

サンプルはこちら


/* コントラスト */
.contrast {
    -webkit-filter: contrast(150%);
}


実行結果


ぼかし


画像をぼかすためのフィルターです。
画像をぼかすためには、blur関数を使用します。引数にはぼかし度合いをピクセルで指定します。

サンプルはこちら


/* ぼかし */
.blur {
    -webkit-filter: blur(5px);
}


実行結果


ドロップシャドウ


画像にドロップシャドウを適用します。
ドロップシャドウを適用するにはdrop-shadow関数を使います。引数は、x方向の大きさ、y方向の大きさ、影の広がり、色の順で指定します。

サンプルはこちら


/* ドロップシャドウ */
.dropshadow {
    -webkit-filter: drop-shadow(10px 10px 5px #f00);
}


実行結果


また、上記のフィルタに対して、CSS3transitionプロパティを使って、アニメーション効果を適用することも可能です。

サンプルはこちら


img {
    -webkit-transition: 1s -webkit-filter ease-in-out;    
}
img.animate_hue:hover {
    -webkit-filter: hue-rotate(180deg); 
}


上記のサンプルでは、画像にマウスが載ると、色相環が徐々に180度回転するようになっています。
これは実際に見ると結構感動するので、是非最新のChromeWebkitをインストールして見てみていただければと思います。

まだまだ対応するブラウザが少ないため、すぐに使える機能ではないのですが、非常に面白い機能なので、是非試してみてください。