Nifty Modal Window Effects
This is a modal window. You can do the following things with it: Read: modal windows will probably tell you something important so don't forget to read what they say. Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence. Close: click on the button below to close the modal. Close me! This is a modal window. You can do the following things with it: Rea
セレクタ Level 3
この文書は「Selectors Level 3 (W3C Recommendation 29 September 2011)」の日本語訳である。日本語訳は参考情報であり、公式な文書ではない。また、翻訳に誤りがある可能性にも注意されたい。 原文の最新版 は、この日本語訳が参照した版から更新された可能性がある。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照されたい。 更新日: 2017-03-23 公開日: 2011-09-29 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> セレクタ Level 3 2011年9月29日付 W3C 勧告 (Recommendation) この版: http://www.w3.org/TR/2011/REC-css3-selectors-20110929/ 最新版: http://www.w3.org/TR/
[CSS]ぼよよーんと気持ちいいアニメーションでエレメントをページに表示させるスタイルシートのテクニック
パネルを構成する画像、ラベル、見出し、テキスト、そして全体をそれぞれ個別のタイミングでぼよよーんと気持ちよく弾むアニメーションで表示するスタイルシートのテクニックを紹介します。 使いどころは限られるけど、こういうの好き。 bounceIn animated 実装はこんな感じになります。 HTML HTMLは、画像、ラベル、見出し、テキスト、ラッパーの5つで構成されています。 <div class="cu-card animated bounceIn"> <div class="cu-card-image animated second bounceIn"> <img src="http://placehold.it/640x360/99ff99/ffffff" /> <div class="cu-card-label-group animated third bounceIn"> ラベル
CSSの基本から理解を深め一つ上のスキルを身につける、他書とはひと味もふた味も異なるオススメの本 -CSS設計の教科書
その場限りのCSSを使うのではなく、CSSの基本からしっかりと理解を深め、運用期間が長くても安心して使えるCSS、大規模なサイトでも管理できるCSSを身につけたい人に役立つ一冊を紹介します。 単にコードを書くだけではなく、設計・管理・運用を考えた『ちゃんとしたCSS』が徹底的に解説された良書です。 GoogleエンジニアのPhilip Walton氏によると、より良いCSSのゴールとして次の4つのポイントが重要です。 予測しやすい 記述したスタイルが他のスタイルに影響されず、期待通りの見栄えになる。 再利用しやすい スタイルの定義が機能ごとに管理されており、似たUIの別のプロジェクトにも利用できる。 保守しやすい スタイルを追加・修正した際に、既存のものに影響を与えない。 拡張しやすい サイトの規模が大きく複雑になっても、対応できる。 参考：CSS Architecture（翻訳版） これ
[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+になります。
SEOに役立つCSSテクニック～画像置き換え～ | 無料SEO対策のススメ
SEOを考える上で必要となるCSSテクニックはいくつかありますが、その中から今回は画像置き換えについてご説明いたします。テクニックと呼べるレベルのものではありませんが、実行していないサイトも多いので一応紹介しておきます。 CSSの画像置き換えはスパムになるのでは？とお考えの方は、まずは「display:none」や「visibility: hidden」や「text-indent」はスパム？をご覧ください。 ただ、絶対にペナルティは受けないとは言い切れませんので、気になる方はやめておきましょう。 画像置換とは CSSの画像置き換えとは、ユーザにはイメージを見せてHTMLソース上はテキストにしたい場合などに使用するテクニックです。検索エンジンはイメージリンク（alt）よりもテキストリンクを評価するため、SEOの観点から使用機会は必然的に増えます。 CSSでaタグの背景としてイメージを読み込ま
スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
スクロールするとfixedで途中から固定する | Regista20
2013年04月26日 jQuery スクロールすると途中から固定したメニューを作ります。はじめからメニューが最上部にあるものだと最初から「position:fixed」でスクロールした際に、メニューを上部に固定するできます。しかし、メニューが最上部にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとjQueryを利用する必要がなります。 コードサンプル HTML <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"> <div id="nav">ここを固定する</div> </div> </div> CSS #main { float: left; margin-right: 20px;
bootstrap並にイケてたCSSフレームワーク[Gumby]※サンプル有り | Cntlog
新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。 Gumby Gumbyで作られたサイト 作成したサンプル CSSフレームワークって？ CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単にカッコイイWebサイトが作成できるツールです。 最近ではレスポンシブデザインが流行しているので、PC用スマホ用の画面をイメージさせるためにモックアップ用に使われたりもします。 0からでレスポンシブデザイン開発するのはスキルと労力が必要なのでモックアップといわず、そのまま開発に使われることもあります。 有名ところはBootstrapやFoundationですね。 触ってみた印象と特徴 Gumbyはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広く対応しています。 触っていて気に入ったのが画像読み込みを端末毎に設定できるので
![bootstrap並にイケてたCSSフレームワーク[Gumby]※サンプル有り | Cntlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/331a84b9cdd0da5d8c9ac8b91c52c69e3c729a6c/height=288;version=1;width=512/https%3A%2F%2Fblog.cntlog.net%2Fwordpress%2Fwp-content%2Fuploads%2FGumby-A-Flexible-Responsive-CSS-Framework-Powered-by-Sass.png)
知らなきゃ損！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
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
coolwebwindow.com
gumbyframework.com
Layouts - Pure