イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ - Qiita
個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ
Color Hunt - Color Palettes for Designers and Artists
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Block Reveal Effects | Codrops
Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath. Today we’d like to share a couple of ideas for a kind of block reveal effect that has been used in some designs recently. The main idea is to reveal content in a schematic box look. T
【CSS3】JavaScriptを使用せずに『慣性スクロール付きカルーセル』を実装するテクニック
モバイルサイトでよく見かける、横にスライドするカルーセル・スライダー。 最近では単にスライドするだけでなく、フリックしたときに慣性スクロールで動くものが流行っています。 今日はこの『慣性スクロール付きカルーセル』を JavaScript 無しで実装する方法を紹介します。 HTML ここでは仮に、下記のようなHTMLを用意します。 <ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> キモとなるスタイルシートの記述です。 .carousel { width:100%; padding:12px 0; overflow-x:scroll; -webkit-overflow-scrolling:touch; over
オンズ
サンプルがうまく動かないときはページを再読み込みしてみてください。 また、エラーや間違い等を発見された方はぜひお知らせください。 オンズでは各スクリプトの実装のお手伝いも承っております。 比較的安価で最新・高機能なシステムを導入できますので、ご希望の方はお気軽にお問い合わせください。 お問い合わせはオンズのお問い合わせフォームからどうぞ。 記事に戻る © ONZE.
sumika | 住宅換気ならマーベックス
sumikaは床面から排気する24時間換気システム。 ハウスダストやアレルゲンが溜まりやすい床面から排気をすることで、 ご家族にとって理想的な空気環境をつくりだすことが可能です。 空気の通り道であるダクトがない換気システムのため、 ダクト内の掃除やメンテナンス性も非常に高くなっています。
CSSのfont-familyで明朝指定の基本セットはこれに決めた | 野良人（のらんど）
font-familyについて。 だいたいのサイトは見出しから本文から全部ゴシックなので、ゴシックは基本のお気に入りセットみたいのをつくって使っております。 しかし明朝指定はこれまではあんまり機会がなく、とくにそういうの持ってなかったのですが、 このところクライアントからの要望や自分で作ってたやつなどなどで明朝指定をすることが重なったので、この機に明朝の基本セットをつくっておこうということで以下に決めました。 font-family :"Times New Roman", "游明朝", YuMincho,"ヒラギノ明朝 Pr6 W6","Hiragino Mincho Pro", "HGS明朝E","メイリオ", "ＭＳ Ｐ明朝","MS PMincho",Meiryo, serif;
CSSだけでつくるメニュー集めました | 楽天ティップスRakutenTips
パーツをストックしておくと後で引き出して使えるので便利ですよね。悩んだら既存のパーツを使って作業効率を上げていきましょ♪ Pure CSS Transition Effects For Off-Canvas Views
Pure CSS transition effects for off-canvas views
Pure CSS transition effects for off-canvas views You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. Demo Download v1.0.2 Documentation
text-overflow - CSS: カスケーディングスタイルシート | MDN
CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基本CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線オーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメディアクエリーの基本課題: 基
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
CSS Peeper - Chrome Web Store
Inspect website styles in seconds. Supercharge your workflow, and save hours of work. CSS Peeper is the ultimate Chrome extension for designers and developers who want a seamless way to inspect and extract design properties from any website. Say goodbye to digging through complex code. CSS Peeper provides an intuitive, organized interface to access key design details. Professionals deserve tools t
AOS - Animate on scroll library
<div data-aos="fade-up" data-aos-duration="3000"> </div> <div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500"> </div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コピペで簡単！】CSSで作るアニメーション付き検索フォーム/検索ボックス17選【サーチボックス/検索ボタン/input】
Oops... sorry. This site is optimized to Safari | NIPPON COLORS - 日本の伝統色
カラーホイール、カラーパレットジェネレーター | Adobe Color
Pure-CSS Netflix Show Carousel
Bulma: Free, open source, and modern CSS framework based on Flexbox
UIkit
