手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
<input type=
どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。 本日は<input type="file">の装飾を行っていきます。 方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。 失敗例 $('input:file').css({ //元々のファイルフォームを隠す。 'opacity':0, 'display':'none' }); $('a').on('click', function(e) { //装飾用のリンクをクリックしたタイミング $('input:file').click(); //ファイルフォームをクリック e.preventDefault(); }); 実はこのままだと
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
各ブラウザに対応するCSSハックやJavaScriptによるハックをまとめているWebサイト・Browserhacks - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 各ブラウザのバージョンごとのCSSハックやJavaScriptによるハック方法をまとめているWebサイト・Browserhacksをご紹介します。CSSハックという言葉自体ちょっと懐かしい気がします・・・ CSSハックやJavaScriptによるハック方法をまとめたサイトです。IEはともかく、OperaやSafariのハックはちょっと助かるかも。 ブラウザ名で検索も出来る様になっています。IE、Firefox、Chrome、Safari、OperaなどのCSSハックやJavaScriptによるハック方法が掲載されています。 試してないけどMedia QueriesでIEのCSSハックという方法は思いつかなかったです。 デモページもあるのでハックが効いてるか確認する事
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。
ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8
Enhancing IE's selector engine Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations. JavaScript-knowledge: none Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start
Googleからのお願い、「CSS・JavascriptをGooglebotがクロールするのをブロックしないで」
[対象: 初級] CSSファイルやJavascriptファイルへのGooglebotのクロールをrobots.txtでブロックしないようにしてほしいと、GoogleのMatt Cutts(マット・カッツ)氏が“公共メッセージ”を流しました。 もし、JavascriptやCSSにGooglebotがクロールするのをブロックしているとしたら、少しだけ時間を取ってその記述をrobots.txtから削除してほしい。 JavascriptやCSSをクロールさせてもらえればそのページでどんなことが起こっているかをより適切に理解できる。 帯域幅のようなリソースを浪費しないようにとブロックする人がたくさんいるけれど、Googlebotはかなり高性能なのでそういったものを速すぎるくらいにクロールしたりはしない。 ほかにもFlashがJavascriptを含んでいるのを知らなくてJavascriptをブロック
Codepad - Share Code Snippets, HTML5, CSS3, JS Demos
ActionScript Ajax AngularJS Apache AppleScript ASP.NET Bash C C# C++ Coffee CoffeeScript ColdFusion Command CSS Delphi Django ES6 GLSL Grunt Gulp HAML Haskell HTML iOS Jade Java JavaScript jQuery JSX Less LUA MDX MySQL Objective Other Pascal Perl PHP Plain text PowerShell Processing Progress Prolog Pseudocode Python Rails RegExr Ruby SASS Scala Scheme SCSS SmallBASIC Smarty SQL Stylus SVG Swift Ty
少しのコードで実装可能な15のスマートフォンサイト用小技集
少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォンサイト用小技集 目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック（タップ
JavaScriptやCSSをURLで読み込む際の「http:」は省略できる - F.Ko-Jiの「一秒後は未来」
JavaScriptやCSSで外部ファイルをURLで読み込む時に書く「src=”http://…”」や「href=”http://…”」の「http:」の部分は省略できるらしいです。 Twitterのツイートボタン用の貼付けコードの JavaScript の書き方が以下のように変わっていて気づきました。 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);} }(document,"script","twitter-wjs");</scri
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
定番機能をまとめて提供してくれるjQueryプラグインまとめ | バシャログ。
ゲームボーイアドバンスの名作「カルチョビット」が3DSで出ると聞いてテンションあがってきたminamiです。 jQuery便利ですよね。さらにその便利なjQueryを使ってコーディング時の定番機能を提供してくれているライブラリがたくさんあるので集めてみました。 Laquu.js http://laquu.com/ 注目の最新プラグインです。「HTMLコーディング作業量を極力減らすためのjQueryプラグイン」ということで、 基本的な機能もさることながら、ピックメニュー、タブ、ツールチップ、ティッカーといった、よく使うけど意外と手間のかかるUIが一つのプラグインでまかなえてしまうのがポイント高いです。個人的にはコナミコマンドが実装されてるのが熱いです！ 対応するjQueryのバージョンは1.5以上です。 simplelib.js http://lab.starryworks.jp/js/si
今から始めるiPhoneコーディング｜クロノドライブ
何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。 iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つ iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。 HTMLやCSSの実装状況はパソコンと同様 iPhone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssrefresh.frebsite.nl/
Optimizing JavaScript for Better Web Performance
stroll.js - CSS3 Scroll Effects