Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t

Trial And Error！やってみよう！の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。 2006年：Web制作に関する覚書きブログをはじめる。 2018年：Cocotiie（ココッティー）として運営開始。

こんにちは、Ryohei（@ityryohei）です！ Animate.css、便利ですよね。ふわっとしたり、ぼよんとしたり、横からスライドインしたり、多くのアニメーションが用意されています。 もちろん私もよく使用しています。 Animate.cssは動きを付けたい要素にclassを追加するだけで簡単にアニメーション表示することができるように設計されたスタイルシートです。下記のページにて公開、配布されています。 Animate.css Animate.cssは実装が簡単で、アニメーションの種類が豊富です。時間等はスタイルシートの一部書き換える（もしくは追加する）だけで好みの設定に変更することができるため、多くのウェブサイトで使用されています。 さて、そんな便利なAnimate.cssですが、内容はスタイルシートですので、単体で動的なアニメーションを実装することはできません。例えば、スクロー

リッチなUIのWEBサイトを簡単に実装できるCSSライブラリ「Animate.css」の実装手順、実現できるアニメーションの種類、テクニックを整理しました。Pure CSSだけでも充分に動きのあるサイトを作ることができる時代になり、素敵なデザインのサイトやサービスが増えました。 ただし、自分でCSSを書くのは大変。便利なライブラリがあれば使いたいところです。本記事ではCSS3アニメーションのライブラリとしては最も有名だと思われる「Animate.css」について、利用手順・アニメーション種類・実装テクニックを整理しました。 例えば、このような動きを簡単に実現することができます。 ↓ちなみにこのアニメーションが突然動かなくなって困っているケースが多いようです。詳細は後述しますが、もしアニメーションが動かない場合は視差効果の設定を見直してください。 サンプル Animate.cssのダウンロー

マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。 CSS box-shadow examples は、どんなウェブサイトやスマホアプリなどで利用できる、美しいリアル感たっぷりなCSSドロップシャドウ82種類を揃えた、無料のCSS便利ツールです。ボタンをクリックするだけで、Internet Explorer や Chrome などクロスブラウザ対応のCSSソースコードをコピペできます。使い勝手もよいので、ワークフローに加えたいサービスのひとつです。 詳細は以下から。 コピペ自由！美しいCSSドロップシャドウを82種類揃えたCSS box-shadow examples CSS box-shadow examples では、リアルな影エフェクトの参考にしたい美しいCSSドロップシャドウが一覧で揃っており、使い方もとてもシンプ

今回は文字にさまざまなデザインの下線を引き方をまとめます。おしゃれで文章の強調に使えるような下線も紹介していくので、気に入ったものがあれば是非コピペして使ってみてください。 1.【初心者向け】下線を引く手順 はじめにCSSの指定方法を解説するので、すでにご存知の方は読み飛ばして頂ければと思います。 スキップ 文字に下線を引く方法は大きく分けて、以下の2パターンがあります。 1つずつ解説していきます。 方法1: HTMLに直接書く（インライン） いちばん簡単な方法です。以下のように指定します。 <span style=”下線のCSSコード”>下線を引きたい文字</span> ①下線を引きたい部分をspanタグで囲って ②style=””の中にCSSコードを書けば良いわけですね。後ほど各下線のCSSコードを紹介していきますので気に入ったものをコピペして入れましょう。たとえば、いちばん無難な下線

こんにちは！あらあらまぁまぁ、ogaRia中村です。 インラインでしかCSS記述できないYahoo!ストアマネージャー… Yahoo!ストアマネージャー内のフリースペースでは、<style>～</style>の記述ができません(困)。その為、CSSはHTMLの中にインラインで記述する必要があります。 例えば楽天ショップで作ったCSSをYahoo!ストアで使う場合… ▼楽天ショップで作成したCSS <style type="text/css"> <!-- img {　border:none;　} a {　color:#f60;　text-decoration:none;　font-size:120%;　} --> </style> <a href="1.html" target="_blank"><img src="#.jpg" alt="**" /></a> <a href="2.html

最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section

はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ 仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 コード <a href="#" class="button change-bord

メディアクエリを使ってコーディングをしていたのですが、iPhoneで見ると一部のフォントサイズが拡大されてしまう現象に遭遇。（SafariもChromeも） しかも、画面が縦位置の時は何ともないのに、横位置で見たときだけ。 CSSをどういじってもダメで半べそになりながらも無事に解決したので、よろこびのエントリー。 目次 CSSにコードを追加で解決！なぜ-webkit-text-size-adjust: 100%;なのか？実機確認て、やっぱり大事可読性かデザイン性か… CSSにコードを追加で解決！ はじめに結果だけ書いてしまうと、CSSに body { -webkit-text-size-adjust: 100%; } と記述することで解決しました。 なぜ-webkit-text-size-adjust: 100%;なのか？ -webkit-text-size-adjustは文字通り、テキス

【CSS3】CSSだけで実現！背景画像を固定＆スクロールで切り替えるパララックス風効果 背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、実装もシンプルで簡単です。 まずは、デモをご覧下さい。 http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html 解説ページはこちら。 ■使い方 背景画像のあるコンテンツと、それに続く背景画像のないコンテンツを一つのグループとして タグで囲みます。 コンテンツを下に増やしていくには、グループ部分を繰り返します。 cd-bg-1というクラスは、cd-bg-2、cd-bg-3と増やしていき、それぞれCSSで背景画像を指定します。 [HTML] CSSもシンプルです。 [CSS] b

width の既定値は、ブラウザにより異なる場合があるようです。 複数のプロパティを指定する場合は、カンマ（ , ）で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width （端末画面の幅に合わせる）を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。（

また、他にもslick.jsを使ったサンプルということで、楽天のイベントバナーを例にslick.jsとjavascriptを組み合わせてバナーの掲載期間を指定する方法を紹介したこともあります。 サンプルソース <link rel="stylesheet" type="text/css" href="slick.css"> <link rel="stylesheet" type="text/css" href="slick-theme.css"> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="slick.min.js"></script> <script> $("document").ready(function(){ $('.mypatter

仕事でハマったのでメモ。 やりたいこと webページの一部で、iframeを使用して外部ページを埋め込む。 このとき、スクロールを表示せず、埋め込んでない風に（いかにもページの一部ですよ風に）表示する。 対応案１：そもそも、、 できるならiframe使わないで。。。 別サイトは別ウィンドウで開くのが自然な気がします。 対応案２：css ほとんどのブラウザで以下で上手くできました。 index.html <iframe id="myFrame" class="frame" src="http://www.xxx.com" frameborder="0" height="100%" width="100%" scrolling="no"> </iframe> index.css .frame { overflow:hidden; overflow-x:hidden; overflow-y:hi

jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、8種類実装しました。 クリックしたときに開いたままにしておくものや、マウスオーバー時にスタイルを変える、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール＆該当アコーディオンメニューの開閉などのサンプルです。 ナビゲーションメニュー関連記事cssで要素を上下左右に中央寄せするサンプル スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】 スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】 jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる cssで作る、横並

JavaScriptを使用してUAでiPhoneやAndroidのスマホを判定したり、増加傾向にあるタブレットを判別する方法メモ。 UAの法則性を覚えておけば、ある程度アクセスを判別して振り分けられるので重宝します。 今回はJavascriptに絞っていろいろな判別をしてみたいと思います。 JavascriptでUA判別してリダイレクト <script type="text/javascript"> var ua = navigator.userAgent; if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) { location.href

jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です CSSだけでアコーディオンを作成 HTML コード <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> <label for="Panel12">ボタン2</label> <input type="checkbox" id="