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

デザイン - CSSの記事一覧

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

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

もっと見る

List

  • 2012/12/05

レスポンシブWebデザインでサイトを組む際のベースに「Wirefy」

WirefyはレスポンシブWebデザインを使う場合のデザインフレームワークです。レスポンシブWebデザインで組み上げようと思うと、色々とあらかじめ考えておくべき点に出くわしてなかなか本当にやりたいデザイン作業に入れずにイライラしたりするかも知れません。そこで使ってみたいのがデザインフレームワークのWirefyです。サン...

List

  • 2012/11/22

レスポンシブWebデザインを実現する際のベースにしたい「Proto」

ProtoはレスポンシブWebデザインで構築するためのWebデザインフレームワークです。レスポンシブWebデザインを使ってWebサイトを構築していくならベースとして使ってみたいのがProtoです。Sassを使ったレスポンシブWebデザイン用のデザインフレームワークです。サンプルです。ブロックを追加しました。Protoの...

List

  • 2012/11/10

CSS Shadersを知りたい人は触ってみよう「CSS Shaders with WebGL」

CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現するサンプル集です。CSS Shadersという技術があります。CSSによって要素を変形させるもので、プログラマブルシェーダーというプログラミングによって制御します。それによって何ができるのかその一例としてみておきたいのがCSS...

43965?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2fscreenshot-2012-10-22-10.13.24_thumb

  • 2012/11/01

Web上のコンソール風入力UI「cssConsole」

cssConsoleはCSS/JavaScriptを使ってコンソール風表示を行うソフトウェアです。Webページ上でユーザに何か入力してもらってその結果を表示する際に使ってみたいのがcssConsoleです。まるでCUIの入力を実現します。確かにコンソール風です。コマンドを打って結果を得られます。dirコマンドの結果。こ...

List

  • 2012/10/29

CSS3の設定を外すとどう見えるかをチェックできるブックマークレット「deCSS3」

deCSS3はCSS3のプロパティを解除してCSS3非対応Webブラウザの表示を確認できるブックマークレットです。最近のモダンなWebブラウザは大抵CSS3に対応しています。格好いいイフェクトを実現するのも容易ですが、レガシーなWebブラウザでの表示をつい怠ってしまいがちです。そこでCSS3の設定を外してくれるdeCS...

List

  • 2012/10/26

Webブラウザ上でCSS Sprite画像を作成「InstantSprite」

InstantSpriteはWebブラウザ上でSprite画像を作成するソフトウェアです。複数の小さな画像をくっつけて、それをCSSで切り分けるのがSprite画像です。画像編集ソフトウェアやサーバサイドで行うソフトウェアがありますが、今回はWebブラウザのクライアントサイドで行うInstantSpriteを紹介します...

43703?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2fscreenshot-2012-10-15-11.23.35_thumb

  • 2012/10/24

最低限かつ十分なスタイル設定が特徴のCSSフレームワーク「Kube」

Kubeはプロフェッショナル向けのCSSフレームワークです。見やすく、かつ様々なニーズに対して即座に答えられるようなデザインを考えるのはとても大変なことです。しかしその道のプロが作り出したスタイルシートフレームワークであるKubeを使えば実現しやすくなるかも知れません。デモページです。リンクやサイドバーが並んでいます。...

43504?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2faf149d59941f227525e3dd431016b6a9

  • 2012/10/18

レスポンシブなグリッドデザインを極めよう「rwdgrid」

rwdgridは960.gsに影響を受けたグリッドデザインのスタイルシートフレームワークです。グリッドデザインのCSSフレークワークをベースにしてデザインを組んでいた方に見ていただきたいのがrwdgridです。レスポンシブを強く意識したグリッドデザインになっています。グリッドデザインです。こちらはiPhoneで見た場合...

List

  • 2012/10/13

奇麗なスタイルシートを目指してプロパティをソート「CSScomb」

CSScombはスタイルシートのプロパティを並べ替えるオンラインまたはテキストエディタ用プラグインです。スタイルシートは冗長的に書いたり、多少ミスして書いてもうまくWebブラウザが解釈してくれる分、更新を重ねていくと徐々に見づらくなっていきます。そこで定期的にCSScombを使って奇麗な並び順に戻してみましょう。トップ...

List

  • 2012/10/03

まるで画像。テキストを曲線上で表現する「CSSWARP」

CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。...

List

  • 2012/08/17

すごい!CSSだけでHTMLの検証を行う「Holmes」

Holmesはスタイルシートを使ってHTMLの検証を行うソフトウェアです。HTMLの検証を行ってくれるソフトウェア、サービスは多数あります。ソースやURLを指定してエラーの行数や場所を返してくれるタイプのものです。しかしそれでは分かりづらい、そう感じていた方はHolmesを使ってみましょう。エラーをその場で赤や黄色の枠...

41302?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-30-9.59.46_thumb

  • 2012/08/07

Facebookのタイムライン表示をHTML5で再現「Facebook timeline with simple html and css」

Facebook timeline with simple html and cssはFacebookのタイムライン表示をHTML/CSSで再現したソフトウェアです。Facebookで導入されているタイムライン表示。最初はインパクトが強いと思うUIでしたが、慣れてくると見やすさを感じます。左右の高さをずらすことで情報の...

40941?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-18-16.24.09_thumb

  • 2012/07/27

マウスで動く!CSSで描く3Dオブジェクト「Photon」

PhotonはCSS/JavaScriptを使って3Dオブジェクトを描くソフトウェアです。Web上で3Dオブジェクトを表現する試みは多数あります。最も有名なのはWebGLを使ったような高度なグラフィックスでしょうか。あのレベルまではいきませんが、シンプルな3DオブジェクトをCSSで表現するのがPhotonです。デモです...

List

  • 2012/05/19

JavaScript/CSSを使ってスクロールによるアニメーションを実現「skrollr」

skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。デモです。スクロールを開始します!回転しながら飛んでくる文字!下から上がってくる文字!横からスライドも。...

38579?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-08-11.24.33_thumb

  • 2012/05/18

キーフレームを使ったCSSアニメーションを実現「jQuery keyframe」

jQuery keyframeはCSSのスタイルの中で%を使ってアニメーションをキーフレーム単位で設定できるjQueryライブラリです。CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったア...

List

  • 2012/05/17

これまでのスタイルシートをLESSで書くとどうなるか「Css2Less」

Css2LessはCSSのコードをリアルタイムにLESSへ変換するWebアプリケーションです。LESSをはじめてみたいと思いつつも、既にある資産が邪魔していたり最初のとっかかりがないと感じている人は多いのではないでしょうか。そこで使ってみてほしいのがCss2Lessです。左側がCSS、右側がLESSです。左側を編集する...

38527?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-07-15.00.35_thumb

  • 2012/05/16

Twitter製。LESSからCSSを生成「RECESS」

RECESSはTwitter社が開発したLESSからCSSへコンパイルするソフトウェアです。最近はCSSもそのままではなくLESSやSassを使って書くケースが増えてきました。そこで紹介したいのがRECESS、Twitter社の開発したLESSコンパイルツールです。インストールします。npmでインストールできます。解析...

List

  • 2012/05/03

スマホ最適化サイトで使いたい。jQuery Mobile用アイコンパック「jQuery Mobile Icon Pack」

jQuery Mobile Icon PackはjQuery Mobileで使えるアイコン集です。jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。アイコンの一覧です...

37996?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f04%2fscreenshot-2012-04-17-14.36.44_thumb

  • 2012/04/28

吹き出し風CSSデザインをオープンソースで「CSS Arrow Please」

CSS Arrow PleaseはCSSだけで作成する吹き出しデザインをオンライン上で行えるサービスです。Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。トップページです。左に描かれて...

List

  • 2012/03/16

いいねフィッシングはこうして起こる?をデモする「Facebook like-trap」

Facebook like-trapはダミーのマウスカーソルを表示していいねボタンをダミーで押させるデモソフトウェアです。Facebookのいいねボタンを悪用したいいねフィッシングという行為が問題視されていますが、その実例といっても良いような動作をデモしてくれるのがFacebook like-trapです。カーソルが二...