[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
知らなきゃ損！CSSフレームワーク「HTML KickStart」の便利さを試してみた！ | 波乗りスタッフ日記/Web制作会社サーフボード
こんにちは、デザイナーの瀬戸です。 最近、子供の足蹴と夜泣きの二重苦であまり眠れてません。 ところで、CSSフレームワークという言葉を聞いたことはありますか？ フレームワークとは（wikipedia引用）・・・ 開発・運用・意思決定を行う際に、その基礎となる規則・構造・アイデア・思想などの集合のこと。日本語では「枠組み」などと訳されることが多い。 簡単に説明すると、HTML・CSS・JSの知識があんまりなくてもきれいなページがつくれるよ！という便利ツールのようなものです。 世に出回っているCSSフレームワークは数多くあるのですが、今回「HTML KickStart」というオサレな名前のCSSフレームワークを試してみました。 使い方は非常に簡単です。 以下のURLより、HTML KickStartをダウンロード →HTML KickStartを全力ダウンロード blank.htmlを直接編集
Adobe製超軽量！！レスポンシブCSS フレームワークTopcoat
Adobe製超軽量レスポンシブフレームワークTopcoat デザインしたくないシリーズ、第二弾！最近とっても気に入っているレスポンシブフレームワークTopcoatを紹介します。 Topcoatとは TopcoatはAdobe製のレスポンシブフレームワークで、最大の特徴がとにかくめっさ早い！ってこと。 jQueryMobileを使ってよくスマートフォンサイトを作っていたのですが、「いかにもjQuerymobile」感があったり、重い、デザイン上のカスタマイズがしずらいというものがありました。 ところがどっこい、Topcoatはとにかく軽く、さくさく。フレームワーク元のデザインも「今風」なフラットでシンプルなデザイン。 シンプルだから、後からカスタマイズも非常にしやすいのが特徴です。 流行りのフラットなデザイン ボタンやフォームの一つ一つがフラットで洗練されたデザインというのも特徴で、シンプル
レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム
レスポンシブWebデザイン使えるCSSフレームワークとグリッドシステムをまとめました。※随時更新中です Bootstrap 様々なコンポーネントも揃った高機能フレームワーク。Customizeから必要なファイルのみ選択してダウンロードもできますが、gitからはless形式で提供されてるのでこちらを使用したほうがよりカスタマイズがしやすいです。 Foundation 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gemでSass形式のものをダウンロードしたほうがカスタマイズしやすいです。 Gumby 様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gitでcloneするとSass形式が入手できるので、そちらのほうがカスタマイズしやすいです。 GroundworkCSS 様々なコン
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
YahooのCSSフレームワーク「Pure」 – ウェブアラカルト
ちょっと前に知った、Yahooが公開しているjavascript不要で軽量なCSSフレームワーク「Pure」関連のメモ。 Pureという、他でもわんさか使われてるような単語が名前になってるので、検索に引っかかりにくいということもあり、このページにメモっておくことにしました。 Pure(公式) Pure自体が欲しい方は、ここにいけばOKです。 Pureを使うには、 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css"> と1行書くだけで大丈夫です。これに全機能が入ってます。 ※2013年6月11日に0.2.0が公開されました。 全機能入ったもの(pure-min.css)で20KB程度です。 Bootstrap2.x系は100KB位なので、ずいぶん軽いですね。もちろんその分シンプル(出来る
Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
Pure
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35（〜2013年9月まで） | co-jin
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップでもレスポンシブWEBデザインに対応したテンプレートが発売されていました。 またECサイトを制作・運営する勉強会でも、話題はレスポンシブ。 スマホ向けのサイトからの売上が、ここ最近急激に伸びてきていることから、いかにスマホ向けにするかということが課題に。 メンテナンス性を考えると、レスポンシブにしたいという方も多くいらっしゃいました。 レスポンシブというと、難しいように感じますが、レスポンシブWEBデザインに対応したフレームワークを利用すれば、比較的に簡単に導入することが可能です。 個人商店さんなんかで、予算がかけられないという方は、フレームワークの利用を考えるといいかもしれませんね。 そこで今回は、昨年から2013年9月までに発表されたレスポンシブWEBデザイン対応のCSSフレームワークをご
Unsemantic CSS Framework
What is it? Un•se•man•tic ['ənsə'mantik] adjective 1. A nonexistent word that developers use to critique the work of their peers. noun 2. Now, it's also a CSS framework. I mean hey… "If the shoe fits, wear it." ☺ Example Usage <div class="grid-container"> <div class="grid-25"> I am 25% wide. </div> <div class="grid-50"> I am 50% wide. </div> <div class="grid-25"> I am 25% wide. </div> </div> Succe
SkelJS Download | Sagapixel
Skel JS downloadSkel is a lightweight framework for building responsive sites and web apps. It was deprecated in 2018 and has been replaced with “Responsive Tools.” Click here to download the updated Skeljs, now known as “Responsive Tools” click here to download the legacy Skeljs When Sagapixel first started out and it was just Frank building websites, this framework was a lifesaver. He used it on
Twitter製フレームワーク「Flight」を試してみた！ | DevelopersIO
こんにちは。クラスメソッドの稲毛です。 前回のパッケージ管理ツール「Bower」インストールに続いて、いよいよ本編となります「Flight」フレームワークです。 通常なら「Flightとは？」から始める所ですが、今回はどんどんサンプルを作っていくことで理解を深めてみました。 Flightのインストール まずはBowerを利用してFlightを構成するスクリプトファイルをインストールする必要がありますので、アプリケーションを作成する場所に下記の内容で「component.json」というファイルを用意します。 component.json { "name": "Flight Sample", "version": "1.0.0", "dependencies": { "flight": "~1.0.0" } } 用意できたらコマンドプロンプトを起動し、component.jsonがあるディレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gumbyframework.com
Home Page | Cntlog
最近のレスポンシブ対応フロントエンドCSSフレームワークまとめ
Bootstrapだけじゃない！マッハでフラットや美しいデザインのUIが導入できそうなワイヤーフレームやUIキット等色々！ | バンクーバーのうぇぶ屋
yuguri.com
yuguri.com