イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
ベンダープレフィックスの整理整頓｜Web制作 W3G
Updated 2014.03.23 / Published 2013.10.25 2013年はGoogleがApple主導で開発していたWebkitから分離し、ChromeとOperaがレンダリングエンジンをBlinkへと切り替える大きな出来事がありましたので、ブラウザベンダーが勧告予定のCSS仕様の先攻実装を示すベンダープレフィックス（接頭辞）の整理整頓についてまとめてみましょう。 各情報の出典としてはCan I useを利用しており、各UA名称部分はIEはデスクトップ版Microsoft Internet Explorer, Chromeはデスクトップ版Google Chrome, Firefoxはデスクトップ版Mozilla Firefox, Safariはデスクトップ版Safari, Operaはデスクトップ版Opera, iOSはiOS Safari, AndroidはAndr
Vendor-prefixed CSS Property Overview « Peter Beverloo
Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties. Blink (list) Google Chrome, Opera WebKit (list) Apple Safari Gecko (list) Mozilla Firefox Trident (list) Internet Explorer Please note that WebKit supports all these properties using the "-apple-" and "-khtml-" prefixes as well.
W3CのCSS3に関する仕様書を全部読んでリファレンスとしてまとめてみた フラップイズム
どうも、くーへいです。 この記事は、CSS3のモジュールをW3Cの仕様書に基づいてまとめています。 CSS2までは1つの仕様書になっていたのですが、CSS3からは個々の機能ごとにモジュール化され、ブラウザはそれぞれのモジュール機能を搭載するかしないかを選べるようになっています。 そんな状況ですので、CSS3とは何かがいまいち明確になっていませんし、各仕様書も10年前に作業終了したものから未だに作業中のものまで多岐にわたっています。 そこで、この記事でまとめてしまおうというわけです。 詳細については各記事を公開次第、この記事にもリンクを作成します。 この記事も随時更新しますので、お楽しみに。 ※各タイトルの日本語名は筆者によるもの。カッコ内の英語名は仕様書のまま。 ※各仕様書の策定状況は記事公開時点（2014年7月◯日）とします。状況確認次第、お知らせします。 ※ブラウザ対応状況は「Can
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
【CSS3】最新の単位［vw］［vh］［vmin］［vmax］の解説。
基準となる値は「100vw ・ 100vh」で、それぞれビューポート 100% と同等の値になります。 例として以下の様な構造の HTML マークアップがあったとします。 <body> <img src="images/thumbnail.gng" width="100px" height="100px" /> </body> img { display:inline-block; margin:auto; width:10vw; } 元の画像のサイズは 100px × 100px ですが、CSS 側で「10vw」と指定しています。 ここでは仮に iPhone 5S でレンダリングするとして、ビューポート幅をピクセルで表すと 320px になりますが、10vw はその 1/10 ということで、「32px」が img の幅となります。 つまり 1vw、1vh はそれぞれ 1% と同じ長さにな
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
WEB上でドット絵を拡大表示する
WEB上でドット絵を拡大表示する この記事は 2020年2月3日に最終更新されています。 設定なし 設定あり サンプルはAppleのマスコット、Dogcow の Clarus君です。Moof! ドット絵を拡大表示したい…ただそれだけのことなのに、このページを書き始めたとき(2013年)には確実な方法がありませんでした。 しかし、2020年 2月 3日現在、方法は統一目前です。近いうちに統一されるでしょう。 このページが役割を終えるのであれば、とても喜ばしいことです。 目次 設定方法 CSS Javascript CSS の記述方法について optimizeSpeed optimize-contrast crisp-edges そして姿を消した pixelated 復活 JavaScript について 設置方法 技術解説 ライセンス 設定方法 方法は「統一目前」と書きましたが、2020年 2
【CSS設計】拡張や修正に強いコンポーネントをマークアップする6つのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選 Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。 JSFiddle 多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。 Create a new fiddle – JSFiddle CodePen グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。 CodePen – Front End Developer Playground &
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
The CSS3 Test
Your browser scores 0% Determined by passing tests out of total for features
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ceaser - CSS Easing Animation Tool - Matthew Lein
cubic-bezier.com
3streamer.net
Pingendo
横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！
CSS3の制作をぐっと楽にする厳選20のオンラインツール