はじめまして! HTMLファイ部(内定者)の、のびーです。
4月の入社に向けて、せっせと勉強をしているアルバイターです。
jsdo.itでは、なんと本日、「HTML5実力テスト 応用編」をリリースしました！！
http://jsdo.it/blog/2013/01/html5cat-update.html
リリースを記念して、テスト問題にも出題される、「CSSで絵を描く」ことをテーマに記事を書いてみます！
※ 文中の例について、ChromeとFirefoxとOperaいずれの最新版とIE10が対応しています。
さて突然ですが、こちらのイラストをご覧下さい。
はい、絵本に出てきそうな、おひさまです。
そしてこのイラスト、実はCSSだけで描かれています。
「CSSって、Webのレイアウトをするためのものじゃないの?」、と思う方もいるかとは思いますが、
断言します。いまCSSお絵描きが熱いんです!!
今回の記事では、このイラストの作り方について説明しながら、
CSSお絵描きの楽しさを伝えられたらなと思います。
ゆとりジェネレーションのほんだです。
最近、Webフォントを使用する仕事に多く携わった関係で、
Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。
ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。
（以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。）
jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS
アイコンを作成するだけだと、あまり新鮮さはありませんが、
CSS3時代のいま、これはとっても有効なマークアップ方法となっています。
詳しくは、つづきからどうぞ！
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。
まずはChromeでこちらを遊んでみてください。
CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS
まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。
最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・)
↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません)
1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS
ちなみにiPhoneで実際に見るとこんな感じに見えます↓
iPhoneで実際に見るには、以下のURLから見れます↓
(jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました)
http://goo.gl/s5fV
今回のサンプル作成でこだわったのは、1要素に1クラスを指定することでiPhone風のUIを実現することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。
<a href="#" class="btnTypeA">ボタンタイプA</a>
実際に上記を表示すると以下のようにすぐボタンっぽい外観に変わります。↓
<div class="listIPhone listTypeA"> <ul> <li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li> <li><a href="#">リストアイテム</a></li> <li><a href="#">リストアイテム</a></li> <li><a href="#">リストアイテム</a></li> </ul> <!-- /.listIPhone.listTypeA --></div>
実際に上記を表示すると以下のようにリストスタイルになります。(1要素1クラスを意識していますが、ベースとなるものが同じで、異なる外観の場合は2クラスに分けて複数の見た目を制御できるように実装しています)
また、「削除ボタン」はややイレギュラーなもののため、いくつかクラスを追加しています。リスト中のa要素は基本、横100%のリンクになってしまいますが、例外的に「noListLink」クラスを追加することで回避しています。
さらに通常時は表示されない要素、ということで、「floatBtn」クラスを付けることで、左は時に表示されるようにしています。
<div class="listIPhone listTypeB"> <ul> <li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li> <li><a href="#">リストアイテム</a></li> <li><a href="#">リストアイテム</a></li> <li><a href="#">リストアイテム</a></li> </ul> <!-- /.listIPhone.listTypeB --></div>
実際に上記を表示すると以下のようにリストスタイルになります。
もちろん、右端にある青い丸矢印も画像は使っていません。
そして今回、ちょっとこだわった部分がタイトル左横にある矢印型のボタンです。
当初はこういう形は画像使わないと無理かなーと思っていたんですが、そこそこ見れるものが作れました。(ただ、やっぱり若干標準のUIと比べると形がいびつです)
ソースもかなりシンプル。
<div class="toolbarBox"> <h1 class="toolbar">CSS3 UIテンプレート</h1> <nav> <ul> <li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li> <li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li> </ul> </nav> <!-- /.toolbarBox --></div>
意外とがんばればなんとかなるな、というのが感想でした。
標準UI以外にも、これくらいのデザイン性のものであればCSSのみで実現できてしまうので、iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
(もともとは、CSSを使って画像を使わずにデザインを実装する、というのを書こうと思ったのが発端だったので)
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。
ちなみに今回のサンプルは、個人のブログで公開しているCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。→Photoshopライクな操作で手軽に作れるCSS3ジェネレーター
そしてカヤックでは、こんなiPhone風CSS3が大好きなマークアップエンジニアを募集中です！
先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。
ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。
SafariやChromeなどwebkitブラウザで表示してみてください。
※PLAYボタンをクリックすると表示されますよ
どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。
今回はこのCSSのアニメーションのチュートリアルをご紹介します。
こんにちわ。(・`д・ノ)ノ
面白法人カヤックでインターンシップ中のどうもぽんたです。
先週、鎌倉本社から自由が丘支社に移りました。
自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。
そしてこちらはインターン研修で、書いているエントリーです。
どうか柔らかいまなざしで見守って下さいませ！
今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。
といっても僕自身つくったことがないので、一緒に挑戦しましょう！！
つづきからどうぞ！
う●こ好きのみなさん、こんにちは。
このブログの「はてなスター」がう●こに変わっていることにお気づきになりましたか？
とっても簡単にCSSだけでう●こに変えることができたので、その方法を紹介したいと思います。
それではう●こに理解のある人だけ続きからどうぞーー
CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。
現実的に使えそうな路線で頑張ってみました。
このページを見ていたら、角丸をどう実装してるのか気になりました。
http://www.michaelpaulyoung.com/
調べたら、なんとCSSで角丸を実装しているようです。
