タグ : CSSフレームワーク

[Animate.css] ボタンクリック時にアニメーションを動かす方法

css
HTMLの文字や画像などにアニメーションで動きをつけることのできるライブラリで「Animate.css」というライブラリは比較的有名だと思います。

しかし、ボタンクリックやマウスオーバーで文字や画像を動かそうと思うと一手間必要になります。

今回はそんな一手間について紹介していきます。

続きを読む

【CSSフレームワーク】FoundationでレスポンシブWebデザインを無効にする方法

css

レスポンシブWebデザインって最近の流行りだし、使い勝手もよくて個人的には非常に好きなのですが、業務系アプリだとレスポンシブWebはやめてほしいという声をクラインとから意外とよく聞きます。

スマホやタブレットを使わないことを前提とした業務系アプリでは、確かに画面サイズによってUIが変わるとなるとあまりよろしくないようにも思えます。

今回はそんな要望に応えるべく、FoundationのレスポンシブWebデザインを無効にする方法を紹介します。
続きを読む

【CSSフレームワーク】FoundationのGridの使い方で参考になるページを紹介

css

CSSフレームワークFoundationとBootStrapのような他CSSと比較した時の一番の強みは、Gridの多種多様な使い方ではないでしょうか。

わたしはFoundationのGridの魅力にはまって、簡単なツールを作る時はFoundationを使うようにしています。

ただFoundationのGridって色々な表現が出来てとても魅力的なのですが、どうしても複雑なGridを作ろうとすると思い通りにならなくてアレとなったことも多々あります。。

今回はそんなGridを作るうえで、とても役立つ参考ページを紹介します。
続きを読む

【CSSフレームワーク】Foundationに標準で付いているjQueryプラグイン一覧

css

CSSフレームワークといえば、BootStrapが王道とは思いますが、他CSSフレームワークも大分知名度を上げてきています。

今回は、個人的に注目している、CSSフレームワークのFoundationに梱包されているjQueryプラグインを紹介します。
Foundationを導入(インストール)したらすぐに使えるプラグイン達ばかりです。
続きを読む

【CSSフレームワーク】Foundationの導入手順(インストール手順)

css

最近流行のCSSフレームワークですが、たくさんと種類が出ていますよね。
ダントツで人気のあるCSSフレームワークは、BootStrapのように感じます。
BootStrapと比べると知名度では低いけど、素晴らしいCSSフレームワークは他にもたくさんあります。

今回は、個人的に大好きなFoundationの導入手順を紹介します。
続きを読む

BootStrapのサンプルソースを取得して雛形として使う

css

BootStrapが話題になってから、大分時間がたちました。BootStrapも結構浸透してきたのではないでしょうか。

BootStrapが登場してから、非デザイナーでもデザインを構成することの敷居が下がったように感じます。

しかし、いくらデザインが楽になったと言っても、BootStrapのCSSを一から構成するのは大変です。
BootStrapリファレンス片手に格闘するのも時間がかかります。
というわけで、今回はBootStrapのサンプルソースの紹介方法をします。
サンプルソースを雛形にして、BootStrapライフを楽しみましょう!
続きを読む

非デザイナにオススメのCSSフレームワーク6選

css-framework

UIデザイナやコーダーの方には馴染みが深い、CSSフレームワークです。
最近では、業務系アプリでも使われる場面が多くなり、エンジニアの方でも一度は聞いたこと、見たことがあるのではないでしょうか。

非デザイナの私もCSSフレームワークのBootStrapは仕事で使っています。
過去に記事にも書きました。はじめてのBootStrapインストール(導入)手順

私もいくつかCSSフレームワークを触ってみました。
特に使い心地の良かったもの、導入が簡単だったものをピックアップして紹介します。
続きを読む

はじめてのBootStrapインストール(導入)手順

css

CSSフレームワークのBootStrapの導入手順を紹介します。
CSSのデザインは、非デザイナのエンジニアの方が一番悩んでいることではないでしょうか。
BootStrapを使うことで、今風のカッコイイUIが簡単につくれます。
非デザイナには敷居の高いwebレスポンシブもBootStrapを使うことで簡単に実現出来ます。
UIのデザインであれこれ悩んでいるかたは是非導入しましょう!
続きを読む