カラフルなボタンからdisabled状態のものまで、様々なボタンがありました。 Webkitに対応しているとの事なので、iPhoneやAndoroid用サイトにうってつけですね。 使い方 使い方は簡単で、CSSを読み込み後にクラスを指定するだけになっています。 Title 個人および商用利用も可能との事。 覚えておいて損はなさそうです。
![CSS3で超クールなボタンを35個作れるCSSフレームワーク | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/da8521decc55382dab7f9e3d655c9f7d386b6118/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F01%2F20110105-02.jpg)
Less Framework is a cross-device CSS grid system based on using inline media queries. iPhone、iPad、PC、Androidベースのスマートフォンやタブレットデバイスなど、インターネットを利用するデバイスの多様化が進んでいる。スクリーンサイズの異なるデバイスで動作するブラウザ向けにそれぞれ最適化されたWebデザインを提供するテクニックのひとつに、CSS3で策定が進められているメディアクエリを使う方法がある。このテクニックをベースにして開発されたCSSフレームワークのひとつにLess Framework 3がある。 Less Framework 3は、言ってしまえばデバイスのスクリーンサイズや表示領域サイズに応じて幅を変更するシンプルなフレームワークだ。Less Framework 3のサイトにアクセ
まだまだ対応ブラウザの問題から、コーポレートサイトなどでは導入が難しいCSSですが、スマートフォンなど環境が整ってきたこともあり、利用し始めているという方も多いと思います。今日紹介するのは、角アール、シャドウなどCSS3を利用した表現を簡単に実装できるCSS UIフレームワーク「CSS3 Button UI」です。 予め、CSSが設定されており、簡単なクラスを割り当てるだけで、CSS3をのボタンを再現することができます。 詳しくは以下 コードの呼び出し例は以下のとおり。 上記は画像で貼り付けてありますが、マウスオーバーの処理もセットされていて、実用的に利用できそうです。その他にも角アールのものや文字の前に画像を表示させるものなどがセットされています。その他のデモは配布元の「CSS3 Button UI」からご覧ください。ボタンはCSS3でとお考えの方は是非どうぞ。 CSS3 Button
1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。 The 1140px Grid · Fluid down to mobile [ad#ad-2] 以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。 The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。 1140pxで12カラムを採用した理由 12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、
チャイルドセレクタ(Child Selector)を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。 Child Selector System [ad#ad-2] Child Selector Systemの主な特徴 超軽量サイズ(0.31KB) 使い方はとても簡単 余分なHTMLは最小限 コンテナはパーソナライズ可能(%, px, em) カラムのネストをサポート 条件付きコメントを使用すれば、IE5.5にも対応 Child Selector Systemのスタイルシート スタイルシートは超軽量で、下記のコードで全部です。 単位で使用している「%」は、「px, em」などに変更して使用することもできます。 div{float:left;width:100%} .right>div{float:right} .one>div{wid
iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。 Less Framework 2 ベースとなるカラムは下記のようになります。 iPhoneなどのモバイルデバイス 320px、2カラム iPadやネットブック 768px、5カラム デスクトップなどのブラウザ 1280px、8カラム 三種類のレイアウトは同じグリッドを使用しており、カラム幅:120px、溝幅:24pxとなっています。 異なる点はカラムとマージンの量です。 レイアウトの変更にはCSS3のMedia Queriesが使用されています。 body {width: 696px;} @media only screen and (max-width: 767px) { body
AtatonicはCSS製のオープンソース・ソフトウェア。HTMLのデザインにおける柔軟性は非常に高い。だが柔軟性はあっても見やすいデザインにできるかどうかと言うと話は別だ。読みやすさで言えばむしろ画一的なデザインの方が良かったりする。 罫線に沿った綺麗なデザイン 整ったデザインを各種ブラウザに合わせて作り込むというのは非常に手間のかかる作業だ。そのような時に使えるのがCSSフレームワークになる。読みやすさを重視したサイト構成を考えるならAtatonicを使ってみると良さそうだ。 Atatonicは2カラムで読みやすさを重視している。背景に罫線の入った画像を利用しており、行毎にきちんと文字が並んでいるのが分かるはずだ。英文らしく、最初の文字が大きくなる効果もある。カラムの中でさらに2カラムに分けたり、引用表示にも綺麗に対応している。 フォームにも対応 文字サイズが若干小さいように見えるが、
オープンソースフレームワーク色々 個人的なメモです。今まであまり 使っていなかったので少し使って いこうと思い、いくつか自分でも使 えそうなフレームワークを探しました。 個人的なメモです。今まであまり使って いなかったので少し使っていこうと思い、 いくつか自分でも使えそうなフレーム ワークを探しました。表題の通り、PHP、 CSS、HTMLやJS等しか僕は能力が 無いのでこの辺のフレームワークの まとめになります。 使いやすそう、使いにくそうというのは個人差が出そうだなぁと触ってみて思ったのですが、それぞれ良し悪しな感じもしたのでとりあえず気になったものだけメモしておきます。おそらく有名所ばかりだと思いますが個人的なメモなのでご了承下さい。 順不同です。 Blueprint CSSのフレームワークです。シンプルな設計ながら素敵なレイアウトが組まれている印象でした。 Blueprint Sa
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
TOP > WebDesign > WEBデザインに便利なCSSフレームワークのまとめ「Choosing The Best CSS Framework: A Complete Guide」 WEBデザインと言えば、HTML5やCSS3が最近では話題を集めていますが、まだまだ現場ではXHTML+CSSという形が主流だと思います。今回紹介するのは、WEBデザインに便利なCSSフレームワークのまとめたエントリー「Choosing The Best CSS Framework: A Complete Guide」です。 52framework 様々なるCSSフレームワークが集められていますが、今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■YAML スタンダードなカラムを簡単に実現するCSSフレームワーク。 ■960 Grid System かなり有名なCS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く