こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビゲ... 続きを読む

• blog.asial.co.jp
• テクノロジー

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみまし... 続きを読む

• parashuto.com
• テクノロジー

スマートフォンブラウザ不具合特集 — Presentation Transcript スマートフォンブラウザ不具合特集 若松 浩昭（株式会社ジークス） 自己紹介若松 浩昭（Hiroaki Wakamatsu） iPhone 3G・Webサイトの設計・フロントエンド周りの実装 003SH・スマートフォン案件が... 続きを読む

• www.slideshare.net
• テクノロジー

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions. 続きを読む

• screenqueri.es
• テクノロジー

A tool where you can customize css button and get html and css code.CSS GRADIENT BUTTON beta SELECT A GRADIENT TO CREATE A BUTTON OR EDIT BUTTON DIRECTLY 続きを読む

• cssgradientbutton.com
• テクノロジー

Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can... 続きを読む

• google-styleguide.goog...
• テクノロジー

2012/04/12 Morisawa TypeSquare Tie-up Seminor on Pasona Tech. 続きを読む

• speakerdeck.com
• テクノロジー

There is also an accent class. If you're compiling from Less, open up variables.less and change @accent to your desired accent colour - this will save a whole lot of search/replace! Controls Reusable components are built to provide the comple... 続きを読む

• code52.org
• テクノロジー

I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxe... 続きを読む

• trentwalton.com
• テクノロジー

こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。そ... 続きを読む

• developer.hatenastaff.com
• テクノロジー

Responsive web design term is related to the concept of developing a website design in a manner, that helps the lay out to get changed according to the user’s computer screen resolution. To say more precisely, the designing the concepts enab... 続きを読む

• designmodo.com
• テクノロジー

こんにちは、開発の林です。 スマートフォン向けウェブページを作るする際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違う... 続きを読む

• blog.fenrir-inc.com
• テクノロジー

Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip but seven. This imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selector, etc. I created this tooltip ... 続きを読む

• www.webstuffshare.com
• テクノロジー

久々にこの手のネタ書いた気がしますけども... ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS... 続きを読む

• hyper-text.org
• テクノロジー

Hello! I’m Doctor Peter and I’m here to treat you with a dose of complementary CSS3. Don’t worry, this won’t hurt a bit. Contrary to what HTML5 Please and the W3C would have you believe, CSS3 is not part of HTML5. “But this is HTML5 Doct... 続きを読む

• html5doctor.com
• テクノロジー

Get things done, quicklyChico UI is a free and open source collection of easy-to-use web tools for developers and designers. UI WidgetsBuilt on top of jQuery, these tools brings known interaction patterns for your website taking advantage of ... 続きを読む

• chico-ui.com.ar
• テクノロジー

The clearfix hack is a popular way to clear floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known suppo... 続きを読む

• nicolasgallagher.com
• テクノロジー

Bourbon – Sass Mixin Library View on Github The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax. T... 続きを読む

• thoughtbot.com
• テクノロジー

In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all... 続きを読む

• www.paulund.co.uk
• テクノロジー

steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “ty... 続きを読む

• lea.verou.me
• テクノロジー

需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1... 続きを読む

• css-happylife.com
• テクノロジー

Dismiss Octotip: You've activated the file finder by pressing t Start typing to filter the file list. Use ↑ and ↓ to navigate, enter to view files. 続きを読む

• github.com
• テクノロジー

In Responsive Web Design we’re working with different states, widths, and viewport sizes. Fluidity and adaptive behavior is a hot subject nowadays, and it’s perfectly justified when looking at today’s mobile browser landscape. We achieve t... 続きを読む

• johanbrook.com
• テクノロジー

この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。 さて... 続きを読む

• terkel.jp
• テクノロジー

Sass の @import ルール は CSS ファイルだけではなく Sass ファイルもインポートできる。この機能は地味に見えるが、実際に使ってみるとものすごく便利。とくに、ミックスインをモジュールとしてファイルに分割しておき、必要に応じて呼び出すような場面でその... 続きを読む

• terkel.jp
• テクノロジー

この投稿はLess & Sass Advent calendar 2011の５日目の投稿です。このポストでLess & Sass Advent calendar 2011を知ったという方は一日目の投稿から読むことをお勧めします。 ここまでの４日間のAdvent calendarでSassに興味を持ち、導入意欲も湧いてきたかと... 続きを読む

• mattari-panda.tumblr.com
• テクノロジー

2011年12月1日から25日まで、毎日違う人がLessかSassについてブログ記事を書く企画です。 参加表明した順番が日付（12月◯日）となります。 http://lesscss.org/ http://sass-lang.com/ 続きを読む

• atnd.org
• テクノロジー

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features t... 続きを読む

• sass-lang.com
• テクノロジー

CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 c... 続きを読む

• hail2u.net
• テクノロジー

Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語（って言い方でいいのかな）であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。 Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC（XPとV... 続きを読む

• www.hamashun.me
• テクノロジー