デザイン - CSS3の記事一覧
Layoutit Grid - Web上でCSSグリッドをビジュアル的に設計
CSSグリッドはまだモダンなWebブラウザでしか使えませんが、それまでのテーブルで組むやり方や、Divタグで組むのに比べるとシンプルで分かりやすいのが利点です。その一方、使いこなすのが難しいイメージがあります。CSSだけで全体を想像しながら作るのは困難です。そこで使ってみたいのがLayoutit Gridです。Webブ...
css3d-game - CSS3製のファーストパーソンゲームエンジン
自分視点で楽しめるゲーム、いわゆるファーストパーソン系のゲームは主にシューティングで採用されています。しかし、自分の視点なのでより没入感が高く、他のジャンルでも応用できます。脱出ゲームなどもこの視点で提供されることが多いジャンルです。今回紹介するcss3d-gameはCSS3を駆使して提供されるファーストパーソン視点の...
wow.js - スクロールで開始するCSSアニメーションライブラリ
Web上でアニメーションを実現させるのはとても大変です。それだけに閲覧者にとっては大きなインパクトがあります。少しでも楽に実現させるために、ライブラリを使うのがいいでしょう。様々なライブラリを知っておけば、ぴったりの場面がありそうです。今回紹介するwow.jsはスクロールによって出現するアニメーションライブラリになりま...
MVP.css - 素のHTMLでもいい感じの表示に
いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP（Minimum Viable Product）と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。今回紹介するMVP.cssは、WebでMVPを作る時に使えるス...
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。## Hac...
PureCSS Lace - CSSだけで絵画のような表現を実現
CSS3を活用すれば高い表現力が実現できます。イラストを描いたりすることだってできます。まるでドローであったり、SVGのような使い方が可能です。もちろん厳密な計算が必要です。そんなCSS3の作品例としてPureCSS Laceを紹介します。まるで絵画のようなCSS作品です。## PureCSS Laceの使い方こちらが...
CJSS - CSSベースのWebビューフレームワーク
最近はReact、Vue.jsなど仮想DOMを使ったビューライブラリが人気です。しかし、JavaScript内にHTML情報を埋め込むのでデザイナーの方にとってはちょっと辛いところがありそうです。そこで使ってみたいのがCJSSです。上記ライブラリとは逆で、CSSにHTMLなどの情報を埋め込んでしまうという、すごいライブ...
CSS Grid Generator - CSSグリッドを簡単に作成
CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上で...
Tech companies Logos In CSS
CSS3によって計算ができるようになったり、表現力が大幅に高まっています。CSS3を駆使することによって、イラストを描いたり、アニメーションも実現できます。もちろん、かなりの創意工夫は必要ですが単なる絵よりもインパクトがあります。今回紹介するTech companies Logos In CSSはCSSだけを使ってテッ...
CSS3 Animate It - クラス名を指定するだけで簡単にアニメーションを実現
CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現して...
夜空ノ贈リ物 - CSS3を駆使して作られたアニメーション教本
CSS3が計算処理やアニメーション処理をサポートしたことによって、CSS3を駆使した作品が増えています。こんなことまでCSSでできるのかと驚かされるものも多いです。そんな作品を作ってみたいと思う方もいるのではないでしょうか。そんな方にぜひチェックして欲しいのが夜空ノ贈リ物です。CSS3を駆使して作られた作品であり、CS...
Instagram.css - CSSによるInstagram風フィルタ
Instagramは今なお高い人気を誇るサービスです。昨年にしてもインスタ映えという新しいキーワードを生み出しており、多くの方が利用しています。その人気の一つが簡単に見栄えのする写真に変身させられるフィルタ機能でしょう。そんなInstagramのフィルタ機能をWebベース、CSSで再現するのがInstagram.css...
Animation Worklet Explainer - Web上でスムーズなアニメーションを目指す
HTML5の高い表現力によって、アニメーションはなくてはならないものになっています。しかしJavaScriptの書き方であったり、CSS3の使い方によってはアニメーションというのは非常に重たい処理で、スムーズに表示されなかったりします。そんな現状を変えていこうと活動しているのがCSS Houdiniタスクフォースで、そ...
Dev Portfolio - 開発者向けポートフォリオテンプレート
フリーランス、個人事業主であれば自分のポートフォリオページを用意すべきです。そこでどんな技術を持っているか、職務経歴やこれまでに経験したプロジェクトなどをアピールしましょう。Dev Portfolioはそんなポートフォリオテンプレートの一つです。Dev Portfolioをベースに自分用にカスタマイズすれば簡単にポート...
CSS SANS - 時代を表現するCSS製フォント
CSS3によって多くのデザインがCSSだけで実現できるようになっています。しかしまだまだできないことも存在します。その一つがフォントです。複雑でバランスが大事なフォントはWeb Fontを使って表現するのが基本です。そんな中作られたのがCSS SANSです。CSSだけで作られた、「時代によって変わる」がコンセプトのフォ...
CSS Grid Highlighter for Chrome - CSS Gridをハイライト表示するChrome機能拡張
レスポンシブWebデザインの広がりに合わせて利用が広がっているのがグリッドベースのデザインです。そんな中、ついに登場したのがCSS Gridになります。Web標準だけで手軽にグリッドデザインが実現できるようになりました。そんなCSS Gridもまだまだ普及していない技術だけに手探り感があります。そこで使ってみたいのがC...
CSS Browsers - CSSで作られたブラウザウィンドウ
GUIのWebブラウザの歴史は長いです。Mosaicの時代から考えるとすでに25年近いのではないでしょうか。その後NetscapeやFirefox、IE、Safari、Opera、Chromeなど様々なブラウザが誕生しました。そんなブラウザの遍歴をうかがい知れるのがCSS Browsersです。なんとCSSで作られたブ...
AniJS - 効果的なアニメーションとUIコンポーネント集
最近はWebデザインと言っても静的なものだけでなく、クリックやマウスオーバー時などのイベントに基づくアニメーションなども必要になっています。それによって一歩先行くデザインに仕上がります。しかしアニメーションはちょっとした違和感などで台無しになってしまう可能性も秘めています。今回はそんな失敗を防ぐべく、AniJSを紹介し...
tScroll - 多彩なテキストアニメーションライブラリ
単なるテキストだと見過ごされてしまうかも知れません。そこで必要になるのが目立たせるための工夫です。文字の色を変えたり、フォントを変えたりすることもできますが、ちょっと安っぽくなってしまうこともあります。そこで使ってみたいのがtScrollです。文字をアニメーションさせることで印象づけるテクニックが使えます。## tSc...
Mocka - モックアップの作成に使えそうなplaceholder
Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供し...