ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - CSS3の記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2016/06/08

CalcSS3 - CSS3で作られた実際に使える計算機

CSS3を駆使すれば、驚くほどの機能が実現できます。JavaScriptはブラウザでオフにされることがありますが、CSSは殆どオフになりません。そのため、JavaScriptが使えなくとも動くというのは大きな利点があります。今回紹介するオープンソース・ソフトウェアはCalcSS3、CSS3で作られたiPhoneの計算機...

List

  • 2016/05/25

長雨 - 日本向けの縦書きTumblrテーマ

Tumblrはコンテンツを簡単にシェアしたり、公開できるとあってとても人気のあるサービスとなっています。さらにテーマがカスタマイズできるとあって、自由度が高さも売りとなっています。今回はそんなTumblrテーマの一つ、長雨を紹介します。特に和なコンテンツを公開していくのに最適なテーマとなっています。## 長雨の使い方長...

List

  • 2016/05/19

chewing-grid.css - ダイナミックにレイアウトが変わるカードデザイン

プロフィールページなどではユーザアイコンと名前、加えて簡単な説明をつけたカードタイプのレイアウトがよく使われます。ユーザに限らずGitHubのリポジトリリストや商品一覧ページなどでもカード型のレイアウトは便利に使えます。そんなデザインを提供するのがchewing-grid.cssです。幅や並べる個数なども細かく指定でき...

List

  • 2016/04/29

Label.css - 画像の上にラベルを自在に配置

Webサイトを作っていて画像はよく使われます。さらに画像にはキャプションとして説明をつけてあげることでより分かりやすいものになります。説明がない画像は一見すると何のことか分からない場合もあります。そこで使えるのがLabel.cssです。単に画像の下に説明をつけるだけでないキャプションの使い方ができるようになります。##...

List

  • 2016/04/29

lup - JavaScriptで手軽にCSS3アニメーションを実現

CSS3でアニメーションが追加されたとは言え、効果的に実装するのは色々面倒です。そのため、分かってはいつつもなかなか手出しできないという人は多いのでは内でしょうか。そんな方に使ってみて欲しいのがlupです。jQuery風に簡単な指定を使ってアニメーションできるJavaScriptライブラリです。## lupの使い方一例...

List

  • 2016/04/16

Simple UI - 学習コストの低いシンプルなUIフレームワーク

Bootstrapはとても便利に使えるUIフレームワークですが、多機能になるにつれて設定するクラスや作法が増えていきます。バージョンアップも早いので追従するのが大変です。今回はもっとシンプルに使えるUIフレームワーク、その名もSimple UIを紹介します。## Simple UIの使い方Simple UIはあまりクラ...

List

  • 2016/04/05

Mobility - スマートフォン用Web/ハイブリッドアプリ向けUIフレームワーク

スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレー...

List

  • 2016/03/07

Elemental UI - React用のUIフレームワーク

Reactを使うと、デザイナとプログラマの分業が難しくなります。そこは致し方ない部分もあるのですが、デザインが面倒に感じられてしまいます。そこでReactで使えるUIフレームワークを使いましょう。今回はElemental UIを紹介します。## Elemental UIの使い方スクリーンショットを多めに紹介します。まず...

List

  • 2016/03/02

Bulma - Flexboxを使ったCSS3デザインフレームワーク

HTMLのデザインフレームワークが増えてきました。どれもコンセプトが異なるので、自分に合ったものを選択するのが大事です。今回はBulmaというCSSフレームワークを紹介します。機能は多くありませんが、必要十分に備わっています。## Bulmaの使い方スクリーンショットを多めに紹介します。まずは基本となるグリッドです。!

List

  • 2016/02/29

Timelined - CSS3で作られた縦型のタイムライン表示

Twitterでもタイムライン形式の表示を採用するという噂があります。最近、多くのソーシャル系サイトでタイムライン形式の表示が採用されています。もし自分のサイトでもタイムライン形式の表示を行いたいならばTimelinedを使ってみましょう。## Timelinedの使い方Timelinedのデモです。一つの線に沿って左...

List

  • 2016/02/29

pageSwitch - 多彩なアニメーションが指定できるページ切り替え

SPA(Single Page Application)ではページの切り替わり時にアニメーションしながら表示することが多いです。それによって一連の動作に流れが生まれ、継続的に使い続けられます。ページを切り替える際のアニメーションは多数ありますが、pageSwitchを使えば多彩なアニメーションから選んで実装できます。#...

List

  • 2016/02/27

voxel.css - ここまでできる!CSS3製ボクセル

マインクラフトに代表される、立方体をボクセルと呼びます。単なる立方体をながら、模様があり、それを積み重ねることで様々な造形を可能にしています。そんなボクセルをCSS3を駆使して可能にしているのがvoxel.cssです。Webベースのボクセルエンジン開発が進みそうです。## voxel.cssの使い方トップページです。こ...

List

  • 2016/02/21

Milligram - ミニマムで格好良いCSS3フレームワーク

CSSのフレームワークはたくさん出てきていますが、その目的は2つに分けて考えることができます。一つはBootstrap/Foundationのように大型で、すべての機能を提供してくれる統合的フレームワークです。もう一つは小さくて軽量で、カスタマイズや独自拡張して使えるものにしていくタイプです。Milligramは後者の...

List

  • 2016/02/11

Philter - Webブラウザ上の写真加工ライブラリ

サイト上で写真を綺麗に見せようと思ったら多少の加工は欠かせません。しかし大量にある写真を一つ一つメンテナンスするのは大変ですし、加工前の写真も保存しておくと容量が2倍必要になってしまいます。そこで使ってみたいのがJavaScript、つまりクライアントサイドでの写真加工です。今回はPhilterを紹介します。## Ph...

List

  • 2015/12/24

Solid - BuzFeedで使われているデザインテンプレート

多くのWebサービスがデザインテンプレートを公開するようになっています。その恩恵はとても大きく、デザインテンプレートをベースにすれば格好良いデザインのサイトが簡単に立ち上げられるようになっています。今回はその一つ、BuzzFeedが公開したテンプレートSolidを紹介します。## Solidの使い方スクリーンショット多...

List

  • 2015/12/11

CSS Gallery – これはすごい!スタイルシートだけで作られたイメージギャラリー

ブログなどで画像を一覧で表示したり、記事中に写真を埋め込んでいるのはよく見る光景です。そんな時、画像をクリックするとフローティングで拡大表示されます。また、次の写真に移動することもできるでしょう。そんな見せ方はCSSとJavaScriptを使ってこそできるものだと思っていましたが、CSS Galleryは違います。スタ...

List

  • 2015/11/19

Scooter - Dropbox社製のデザインフレームワーク

企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。## Scooterの使い方ScooterはSCS...

List

  • 2015/11/17

Kathamo - シンプルなレスポンシブ・フレームワーク

最近のCSSフレームワークは大型化する傾向にあります。多機能で多数のUIパターンに対応しているのは利用者としては嬉しい一方で、フレームワークの提供する機能以上のことをしようとすると突然バランスが崩れてしまうことになります。そこで使ってみたいのが最低限の機能を小さく提供するフレームワークです。今回はモバイルにも対応したK...

List

  • 2015/11/16

CSSGram - スタイルシートを使ったInstagram風フィルタ

Instagramは相変わらず高い人気で、10代を中心に多くのユーザが日々写真をアップロードしています。そんなInstagramの売りと言えば、写真に対する格好良いフィルタではないでしょうか。CSSGramはそんなInstagram風のフィルタをWeb上で再現してくれるライブラリになります。CSSレベルとあって、自由に...

List

  • 2015/11/05

WeUI - WeChat開発チームが作ったモバイルWebアプリ向けUIライブラリ

WeChatというチャットアプリが中国では有名です。英語圏ではWhatsApp、日本ではLINEが有名なのと同様に中国圏ではNo.1のシェアを獲得しています。そこには多くの開発者が日々開発を行っているのでしょう。そんなWeChatの開発チームがリリースしたのがWeUIです。モバイルWebアプリケーション向けのUIライブ...