外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
<iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600"></iframe> <iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600" style="zoom:0.55"></iframe> 通常 zoom:0.55 悲しいことに、iframeの横幅・縦幅が0.55倍になるだけで、 iframe内のコンテンツが縮小されるわけではないのです。 Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。 また、iOSではそもそもiframeの幅指定を無視します。 ではどうすればよいのでしょうか？ 答えとしては、CSS3が解釈できるブラウザ限定にはなりますが、 CSS3のtr
Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ
ハイブリッドアプリ開発でも利用出来る、JavaScript＆CSSのアニメーションライブラリを集めてみました。 最近ではCanvasやWebGLを利用したアプローチもあると思いますが、ちょっとしたUXを作るにはライブラリが大きすぎます。開発にインパクトを与えず、既存の技術で対応でき、さらにネイティブライクである点をポイントにまとめてみました。 jQueryのanimation代替え系 Velocity.js jQueryの$.animate()と同等のAPIを持ちながらjQueryには依存しない、高速アニメーションライブラリです。既存コードの「$.animate」を「$.velocity」とするだけでも運用が可能とあるので、いま速度に悩まされている方は、一度こちらを試してみてはいかがでしょうか。
A personal exploration of design, technology, & rebellion.
A personal exploration of design, technology, & rebellion. Design by undesign. Simplicity is polarizing. Simple is hard. Resisting the urge to add more. How to stand out online. The cost of overwhelming uniformity in web design. Back to basics. Going “build–step free” for a handcrafted experience. Portfolio Most recent work. Thanks for visiting, – joshua
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ
ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。 解除して散っていくのも！ 実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。 デモページ これをベースにいろいろなアイデアが膨らんできますね。 参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。 <!-- start header --> <header id="head"> <div class="container"> <
CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル
CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。 デモページ：サムネイルのホバー時 サムネイルのホバー時だけでもキャプションの表示だけでなく、画像などのサイズ変更、テキストの表示、各アイテムの可視化、配置変更などもアニメーションで行われています。 実装 実装はポイントをまとめて紹介します、Stepは3つです。 元記事では詳細に書かれているので、参考にしてください。 Step 1: HTML 画像、2つのパラグラフ、タグが一つのセットになっており、それぞれをリスト要素で実装します。 <ul class="portfolio-items"> <li class="item"> <figure> <div class="view"> <img src="images/1.jpg"> </div>
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
Putting CSS Clip to Work: Expanding Overlay Effect | Codrops
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some e
ファビコンに動的な円グラフを実装できるJSライブラリ・Piecon - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ファビコンに動的な円グラフを実装 するJavaScriptライブラリ・Piecon のご紹介。ユニークなライブラリで すね。以前、ファビコンでテトリス を実装するライブラリを見かけまし たけど、今後増えるのかな。 なかなか面白い。ファビコンに動的な円グラフを表示させるスクリプトです。非依存型なのでPiecon単体で動作します。 ファビコンとして表示された円グラフは時間と共に変化させる事が出来ます。 Sample コード Piecon.setOptions({ color: '#ff0084', // グラフの色 background: '#bbb', // グラフの空部分(empty)の色 shadow: '#fff', // 外側の円のボーダー色 fallback
[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
CSSの変化をアニメーションさせるtransitionについてまとめたよ。（CSS おれおれ Advent Calendar 2012 – 22日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 22日目 (ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 ) 前提：CSSにおけるアニメーションは以下の二種類あります。 Transitions … 変化するもの Animations … 動き続けるもの 今回は前者について取り上げます。後者もいずれ。 概要 transitionは値の変化をアニメーションさせる、という事を指定するものです。 例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。 常に動き続けているようなアニメーションは、animateの方の領分です。 使える場面 あくまで「変化」を対象にしているため、何らかの（主に利用者の）操作が必要です。 なので、変化する状態を示す擬似クラス（:hoverとか）や、JavaScrip
css3とjavascriptを利用する際に頻繁使用 webkitAnimationEndとwebkitTransitionEnd
css3ではアニメーションを設定することが可能となっております。 アニメーションの設定の方法はkeyframeを設定したアニメ、transitionを設定したアニメなどがございます。 transitionアニメーションに関しては以下の記事を参照してください。 css3 transitionアニメーション https://www.webcyou.com/?p=1937 これらをJavascriptと連携させることによって様々な表現をすることが可能になってきます。 その際、良く利用するのが、webkitAnimationEndとwebkitTransitionEndのイベントとなっております。 webkitAnimationEndとwebkitTransitionEndは、それぞれアニメーションとトランジションが終わった時に起きるイベントで 以下の様にして取得することができます。 elemen
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Building A Relationship Between CSS & JavaScript — Smashing Magazine
Even though we keep JavaScript, CSS and HTML in different files, the concepts behind progressive enhancement are getting all knotted up with every jQuery plugin we use and with every weird technique that crops up. In this post, Tim Wright offers a little perspective as to where we are and how we can realign our goals. jQuery, Prototype, Node.js, Backbone.js, Mustache and thousands of JavaScript mi
Stairway Hover Nav
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
[JS]ずっーとホバーしていたい、階段状に浮き上がるアニメーションがかなり気持ちいいナビゲーション -Stairway Navigation
ホバーすると、アニメーションで階段状に次々にアイテムが浮き上がるナビゲーションを実装するjQueryのプラグインを紹介します。 一応プラグインですが、エフェクトの要はCSS3です。 階段の反応する数が三つと四つ 実装 HTML HTMLはシンプルで、a要素でアイテムを実装しnav要素で内包します。 <div> <h2>One Step</h2> <nav id="example-one"> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Navigation</a> <a href="#">Na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載インデックス「HTML5“とか”アプリ開発入門」 - ＠IT
IEをHTML5やCSS3に対応させるJSライブラリーまとめ | A!@attrip