とあるサイトでXPERIA, Galaxy SIIともにフォームに文字を入力しようとすると画面が上下にグニャグニャとスクロールして、何を入力してるのか確認できないような状態。。 * { -webkit-backface-visibility: hidden; } この1行を消すことで問題は解消できました... 続きを読む
Editable, runnable javascript code blocks Download .zip Download .tar.gz View on GitHub Why? Humans learn better when they can play with what they're working with, when they can poke at it and understand what happens to B when you change A. T... 続きを読む
README.md Clown Car Technique for Responsive Images We can use media queries within SVG to serve up the right image. The beauty of the "Clown Car" technique is that all the logic remains in the SVG file. I've called it the "Clown Car" techniq... 続きを読む
README.md SCSS Blend Modes CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending.... 続きを読む
Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2013年5月16日 カテゴリー : アクセシビリティ このサイトでは以前に、「音声読み上げ支援技術 (スクリーンリーダー) 利用に関するトレンド」という記事を過去3回にわたり書きましたが (... 続きを読む
README.md Tappable Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers. Currently it's only tested on iOS Mobile Safari as I don't have any other smartphones to test with. The codebase is heavily i... 続きを読む
SassやCompassをChrome Developer ToolsでデバッグしたいのにCSSしか参照できなくて困ったり、編集したコードをコピペするのが面倒、エディタに即時反映できたらいいのにって思ったことはありませんか? この悩みを、Source MapsとChrome拡張「Tincr」を使って... 続きを読む
ComicAlarmは購読中の漫画の発売日を教えてくれるアプリケーションです。※現在HTC製の端末からだとカレンダーに発売日を追加できない不具合があります。今、原因を調査中です。申し訳ございません。長い間発売されない漫画があって、うっかり新刊の発売日をチ... 続きを読む
¶ April 8, 2013 by found_drama While hacking on a personal project recently, I noticed that WebStorm asked me if I wanted it to watch my SCSS files and automatically recompile them. I knew immediately what this must be (“file watchers!”) an... 続きを読む
You want X lines of text. Anything after that, gracefully cut off. That's You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire. When you can count on text being a certain... 続きを読む
viewport How to get the viewport size: jQuery's $(window).width() is highly regarded as cross-broswer compatible. JavaScript's document.documentElement.clientWidth is faster and nearly as cross-broswer compatible. Consider using document.docu... 続きを読む
みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3|画像形式の基礎知識では、画像の品質を保ち... 続きを読む
This week’s freebie is also our first Photoshop plug-in! The plug-in allow you to create a halftone effect using any image in a single click. Installation is simple, and we have included a quick video demo in the download. This halftone patt... 続きを読む
They call him the James Dean of sticky footers, the Sexy Kind, the Genghis Khan footer. Clean, modern, simple, no hacks needed. Works for IE8+, Chrome,...They call him the James Dean of sticky footers, the Sexy Kind, the Genghis Khan footer. ... 続きを読む
JavaScript patterns and antipatterns collectionA JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, objec... 続きを読む
Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2013年5月5日 (2013年5月6日 更新) カテゴリー : アクセシビリティ , ユーザビリティ , ユーザーインターフェース (UI) 先の記事「フォームの入力要素には <label> 要素でラベルを付ける... 続きを読む
Sponsored by Evil Martians. Translations Документация на русском: habrahabr.ru/company/evilmartians/blog/176909 Features You write normal CSS (or use Autoprefixer after Sass, Stylus or another preprocessor). You write normal properties (not s... 続きを読む
A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, a... 続きを読む
Readme.md SVG to webfont converter for Grunt Generate custom icon webfonts from SVG/EPS files via Grunt. Based on Font Custom. This task will make all you need to use font-face icon on your website: font in all needed formats, CSS and HTML de... 続きを読む
Attribute selectors element[attribute] Select elements containing the named attribute img[alt] {} <img src="image.jpg" alt="accessible"> <img src="image.jpg" title="inaccessible"> form [type] {} <input type=date> <select> IE6 sucks IE7 suppo... 続きを読む
As a developer and also a consultant advising developers on how to develop accessible content, it is important to have and provide up to date and practical knowledge about robust development techniques. A recent question on Stack Overflow got... 続きを読む
Introduction The use of JavaScript has exploded over time. Now it is practically unheard of for a website not to utilize JavaScript to some extent. As a web developer who has concentrated on back-end coding in C# and front-end look and feel v... 続きを読む
(A collaboration with Rodney Rehm) Rodney Rehm made tests to check the browser support of all the CSS animatable properties as part of his epic article CSS Transitions — Thank God We Have A Specification! This is a summary of the test result... 続きを読む
I gave this talk: I know jQuery. What now? at jQuery UK 2013, but instead of my usual approach of post-it explosion on my desk, I wrote a post first, and created the slides from the post. So here is my (fairly unedited) quasi-ramble on how I ... 続きを読む
This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Alex MacCaw has... 続きを読む
An ongoing expolration of icons in relation to timeIcons by Hour is an ongoing project exploring iconography in relation to time. Each set focuses around a different hour of the day, and visualises objects or actions which might occur during ... 続きを読む
CSSLisible va réindenter vos blocks de code, ordonner vos propriétés, afin de fournir un code CSS Lisible et plus maintenable. Attention, les commentaires internes aux sélecteurs sont retirés ! Formulaire Fichier URL 続きを読む
It’s done, It’s finished, It’s designed, It’s kerned and I have 380 glyphs that supports 80 languages, packaged up as a lovely little .otf file ready to go. If you’re interested in getting your hands on knubi regular click on the downloa... 続きを読む
レビュー さまざまなフィルターを組み合わせておしゃれな“レトロ風写真”を作成「XnRetro」 人気の画像ビューワー「XnView」の開発者が作成、共有機能も充実 (2013/4/22 16:03) 「XnRetro」v1.26 「XnRetro」は、画像ビューワー「XnView」の開発者・Gougelet... 続きを読む
Eldorado mini is a free version of Eldorado icons and includes 40×40 sized pixel-perfect PNGs. License: These icons are free to use in any kind of commercial or non-commercial project unlimited times. Ammount of icons: 1262 Sizes: 40×40 File ... 続きを読む
super customized checkboxes and radio buttons with jQuery iCheck @Damir Foy Plugin features Identical inputs across different browsers and devices — both desktop and mobile Touch devices support — iOS, Android, BlackBerry, Windows Phone Key... 続きを読む
A touchable jQuery lightbox plugin for desktop, mobile and tabletWhat is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Features Swipe gestures for mobile Keyboard Navigation for desktop CSS transitions with... 続きを読む
PhpStormで自分がよく使うショートカットです。PhpStormでまず覚えるべきショートカット とかぶっているのは書いてないのでお先にどうぞ。 IntelliJ IDEA でもわりと共通しています。面倒なので表記がMac専用ですがWindowsでもたぶん同じ機能が使えますよ、きっ... 続きを読む
jquery.transform.js cross-browser 2d transform plugin Basic usage $(elem).animate({ transform: 'translateX(50px)' }); $(elem).animate({ transform: 'rotate(135deg)' }); $(elem).animate({ transform: 'scale(2,.5)' }); $(elem).animate({ transform... 続きを読む
Glue¶ Glue is a simple command line tool to generate CSS sprites: Automatic Sprite (PNG+CSS) creation. Automatic multi-dpi (retina) sprite creation. Support for multi-sprite projects. Multiple algorithms available. Automatic crop of unnecessa... 続きを読む
2013.04.08 ハイブリッドアプリの開発中に、長押しで要素が選択されて困ったことはありませんか? iPhoneならCSSだけで対応できるのですが、Androidでは端末に寄っては選択対処し切れません。 (むしろ選択できる端末しか知りません。) そんなときはタッチイベ... 続きを読む
Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly ... 続きを読む
Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2013年4月16日 カテゴリー : アクセシビリティ Web サイトのフォームの中には、入力要素 (<input> 要素、<textarea> 要素、<select> 要素) のすぐ上か下に、注釈を付け加える場合があり... 続きを読む
With PLTTS [/ˈpælɨts/] it's easy as hell to find the matching color-palette for an upcoming project you are working on. Just type in a hex-code in the field above and search for a palette with a specific color. Sign up to save palettes or you... 続きを読む
CSS で角度を扱う機会が増えてきたので、三角関数を中心にいくつかの数学関数を Sass 関数として実装してみてる。「三角関数を中心に」とかさらっと書いてるけど、書いてる本人はタンジェントとか高校で習ってないと言い張る程度の理解なので注意。書いてるうち... 続きを読む
CLI You can also build a custom version of jQuery using the node.js cli tool. Install npm install -g jquery-builder Usage jquery-builder --exclude ajax,css -m Usage Options jquery-builder --help Todo Show filesize for each module. Choose vers... 続きを読む
公開日 : 2013年4月12日 カテゴリー : アクセシビリティ , ユーザビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 上記のように、<label>... 続きを読む
By Chris Mills Introduction The CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rap... 続きを読む
After four years in the safe arms of Telenor, what once was MORE Sweden is now Portably. A mobile agency with a brand new name, but with years of solid experience and loads of ambition when it comes to the mobile channel and its possibilities... 続きを読む
"Moral indignation is jealousy with a halo." - H. G. Wells (1866-1946) "Glory is fleeting, but obscurity is forever." - Napoleon Bonaparte (1769-1821) "The fundamental cause of trouble in the world is that the stupid are cocksure while the in... 続きを読む
H1 Title H2 Title H3 Title H4 Title H5 Title H6 Title Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Paragraph. Blockquote. Blockquote.... 続きを読む
jQuery .customSelect()The ridiculously lightweight, semi-native select box styling plugin What it be This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element i... 続きを読む
Metrize Icons is a Free Collection of 300 Metro-Style Icons for Designers and Developers.Free Collection of 300 Metro-Style Icons for Designers and Developers. Metrize Icons is a free icon set, it works perfectly for your apps or web projects... 続きを読む
Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2013年4月7日 カテゴリー : アクセシビリティ , ユーザビリティ 先の記事「プレースホルダーについて考える」をまとめる中で再認識したのですが、Web サイトのフォームの各入力要素 (<in... 続きを読む