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

デザイン - CSS3の記事一覧

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

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

もっと見る

List

  • 2017/05/14

Let it snow - CSSでWebサイトに雪を降らせよう

Webサイトに雪を降らせるような効果をみせるライブラリは幾つか存在します。多くはJavaScriptを使ってごりごりと実装するのですが、あまりスマートなやり方とは言えません。今回紹介するのはLet it snow、スタイルシートを活用した降雪効果を見せるライブラリです。## Let it snowの使い方デモのWebサ...

List

  • 2017/04/20

Grid Garden - CSS Grid Layout Moduleについて学べる学習ソフトウェア

CSSの使い方をちゃんと覚えるというのは大変です。しかも日々進化しており、新しいプロパティが追加されたりします。もちろんすぐに汎用的に使える訳ではありませんが、先進的なブラウザからどんどん導入が進んでいきます。放置しておくとあっという間に時代に取り残されてしまうでしょう。今回紹介するGrid GardenはCSS Gr...

None

  • Premium_s 2017/03/10

業務で使えるオープンソース(224)「CSS」

今回のテーマはCSSです。Webページ上でのイベントを補足して何か処理を行おうと思うとついJavaScriptでやってしまいます。開発者にとってはもちろんその方が簡単なのですが、余計なコードが増えてメンテナンス性が悪くなることがあります(特にアニメーション)。そんな時にスタイルシートを使えば解決できるかも知れません。今...

List

  • 2017/03/05

Luxbar - CSS3だけで実装されたレスポンシブなナビゲーションバー

JavaScriptが高機能になり、有効であるのが当たり前になるとちょっとしたアクションであってもJavaScriptで実現したくなります。しかし無効になっている場合やブラウザ間の動作誤差によってうまく動かない場合もあるでしょう。そういった不具合を防止するにはスタイルシートだけで実装するのがベストです。今回はCSSだけ...

List

  • 2017/02/06

formbase - 見栄えの良いフォームデザイン

Webの表現力はHTML5によって格段に上がりましたが、それもスタイルシートなどを駆使してデザインを行った場合に限ります。標準のままでは貧弱なデザインのままです。標準でももっと見栄えの良いデザインが欲しいのではないでしょうか。そこで使ってみたいのがformbaseです。ごくシンプルな指定で見栄えの良いフォームにデザイン...

List

  • 2016/12/25

Radiobox.css - ラジオボタンに選択時のアニメーションを追加

フォームで選択した際に何のフィードバックもないと不安になってしまいます。文字を入力していれば分かりやすいのですが、マウスでクリックした時に適切なフィードバックは必要でしょう。今回はラジオボタンにおける選択時のアニメーションを提供するRadiobox.cssを紹介します。## Radiobox.cssの使い方前半の6つで...

List

  • 2016/11/01

Wing - ミニマムなレスポンシブWebフレームワーク

Webデザインフレームワークは二極化が進んでいます。一つはBootstrapに代表される大型でリッチなフレームワークです。非デザイナーであればこの手のフレームワークが便利です。もう一つはごく基本的な機能だけを提供するミニマムなフレームワークです。こちらはデザイナー向きです。今回紹介するWingは後者のフレームワークです...

List

  • 2016/10/28

driveway - CSSだけで作られたMasonry

Pinterestで表示で一躍人気になったのがMasonryと言われる表示です。幅は固定しつつ、高さをずらして表示することで変化による印象付けを与えられます。女性向けのメディア、写真を多用するサイトで使われています。多くがJavaScriptを使って表現するのですが、今回紹介するdrivewayはCSSだけで実現されて...

List

  • 2016/10/23

Textillate.js - CSS3を使って華麗なテキストアニメーションを実現

CSS3になって表現力が広がっています。これまでFlashやJavaScriptを駆使しないとできなかったことが、スタイルシートだけで実現できるようになっています。スタイルシートを使えばGPUを使うのでより滑らかに表現できます。今回はTextillate.js、CSS3を使ってテキストアニメーションソフトウェアを紹介し...

List

  • 2016/09/25

Pure CSS modal - CSSオンリーなモーダル

モーダルウィンドウを表示するWebサービスは多々あります。そうした時にはJavaScriptでイベントをフックして、モーダルコンテンツを表示するというものが多いかと思います。つまりJavaScriptがオフになると使えない機能です。そこで使ってみたいのがPure CSS modalです。なんとスタイルシートだけで実現さ...

List

  • 2016/09/03

Kissui.scrollanim - CSS3/JavaScriptによるスクロールアニメーション

SPA(シングルページアプリケーション)で効果的なのがスクロールに伴うアニメーションです。ページ全体が長くなりがちなので、アニメーションを盛り込むことで変化をつけられるようになります。今回紹介するKissui.scrollanimはCSS3ベースのアニメーションライブラリになります。高速でスムーズなアニメーションが実現...

List

  • 2016/08/09

Spectre.css - 軽量で機能多数のWebデザインフレームワーク

WebのデザインフレームワークというとすぐBootstrapやFoundationなどが挙がります。企業の管理画面などであれば良いのですが、よくあるフレームワークには臭いが感じられてしまうのが難点です。そこで、という訳ではないですが他のフレームワークを使うことでオリジナリティを出してみてはいかがでしょう。今回は軽量なS...

List

  • 2016/08/05

Material Kit - Bootstrapをベースにしたマテリアルデザインフレームワーク

マテリアルデザインが人気です。単なるフラットなデザインだとどこがボタンなのか、さらにクリックした時の反応がないためアクションを起こしたのかどうかも分かりづらいと言った問題があります。マテリアルによって反応が得られるようになればユーザビリティが高くなるでしょう。そこでBootstrapに対してマテリアルデザインを適用でき...

List

  • 2016/08/04

hack.css - ハッカー用のCSSフレームワーク

CSSフレームワークがたくさん出ています。それぞれにコンセプトがあり、サイトの雰囲気に合わせて選択するのが良いでしょう。Bootstrapが人気ですが、何でもBootstrapが良いという訳ではありません。もし開発者らしいサイト、プロジェクト用のページを立ち上げるならばhack.cssはいかがでしょうか。ハッカー用のシ...

List

  • 2016/08/01

A Single Div - たった一つのdivタグでできている作品集

CSS3を駆使することによって、複雑な形であったり、ドローさながらのイラストを描いたりすることができます。画像やSVG、Canvasを使ってもできることですが、あえてCSSだけの縛りを加えることに意味があります。そんなスタイルシートだけ、さらにたった一つのdivだけという縛りを用いて作られた作品集がA Single D...

List

  • 2016/07/31

css-keyframer.js - CSS3のスタイル設定を使ったキーフレームアニメーション

アニメーションは一コマ一コマ指定しながら作成することもできますが、作成に時間がかかります。それに対してキーフレームを指定して、そこへの変化(または移動)を指定する方式はコンピュータ側でアニメーションを補完してくれる分、効率的にアニメーションが作成できます。今回紹介するcss-keyframer.jsはそんなキーフレーム...

List

  • 2016/07/27

Keen-UI - マテリアルデザインのUIコンポーネント集

デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを...

List

  • 2016/07/21

GitHub Calendar - GitHubのアクティビティグラフを任意のサイトに埋め込み表示

GitHubでの活動はオープンソース・ソフトウェア開発者としてのアクティビティとも言えます。会社でGitHubを使っていれば緑の濃い部分ばかりになるかも知れませんが、さらに休日もちゃんと埋めようと活動している人もいるでしょう。そんな方にお勧めなのがGitHub Calendarです。GitHubのアクティビティグラフを...

List

  • 2016/07/16

Star Wars Intro - スターウォーズのイントロをスタイルシートだけで再現

みんな大好きなスターウォーズ。そしてスターウォーズと言えば、映画開始直後のオープニングの演出は誰もが知っているところだと思います。あの瞬間からスターウォーズの世界に引き込まれていくことでしょう。そんなスターウォーズのイントロをCSSだけで再現したのがStar Wars Introです。ぜひご覧ください!## Star ...

List

  • 2016/06/30

Shine CSS Framework - ビビッドなカラーリングが特徴のCSSフレームワーク

CSSフレームワークは多数ありますが、どうしても色が感じられるようになってしまいます。なんとなくBootstrapで作っただろうなと言うサイトは分かるはずです。便利だけど、あまり使われているものは避けたいと考えるのではないでしょうか。今回は新しいCSSフレームワーク、Shine CSS Frameworkを紹介します。...