実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
カンプがなくなったときのデザイナーの役割
手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination（再想像する） 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や Fireworks
レスポンシブWebデザインは臨機応変に使うのが良い
「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。 そう考えると、なんでもかんでも安易にRWDで良いかというと、そうでもないように思います。長期的な視野で考えるとRWDのような手法が良いと考えていますが、だからといって現段階でそれが唯一の方法だとは考えていません。ゼロか百かの選択肢だけじゃなく、必要な場合は、ちょっとレスポンシブという臨機応変な対応もありですし、プロジェクトによっては個別スマホサイトを作ったほうが良いケースもあるかもしれません。 では、ウェブサイトの制作
レスポンシブWebデザインに無意味なアニメーションを付けるのはやめろ
最近ホットエントリー入りした http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-dylay.html とか（あと何個かホットエントリー入りした同系列のものあったと思うけど探すのメンドイ） 1000ブックマーク以上集めた http://b.hatena.ne.jp/entry/gori.me/it/21341 とか ブラウザのサイズ変えたら中身がアニメーションするよーってやつだけど。 アニメーションする必要全くないですよね。 意味ないどころか無駄蛇足ゴミクズボケカス ブラウザの大きさ変えたフィードバック？ 普段ブラウザの大きさ変えねーだろ。 一番ありうるのはスマートフォンやタブレットの向き変える時とかぐらいか。 「バッテリーすぐなくなる死ね」 言われるデバイス上でわざわざ負荷増やすな。 意
フォントブログ
フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ
[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである | Unformed Building
この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。 画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照してください。 翻訳部分は次のセクションとなります。 CSS Media Query for Mobile is Fool’s Gold Ethan Marcotte の記事「Responsive Web Design」はウェブ開発者たちの想像力を刺激し、いくつかの後続の記事はモバイルに最適化されたウェブサイトを構築する方法として、CSS Media Queries をもてはやしました。 私もまた「iPad Orientation CSS」という記事でこの流行に貢献した罪があります。 残念な
壊れたデザインプロセス（「The Broken Design Process」日本語訳）
2012年8月12日 著 以下の文章は、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳したものです。レスポンシブWebデザイン関連の記事をこの数ヶ月、いろいろ斜め読みしてきましたが、これは是非とも翻訳しておきたいと思ってZastrow氏にコンタクト、翻訳と掲載につき了解を得ました。ただし、この翻訳には誤りが含まれている可能性があります。英語が読めるなら、原文のほうを是非お読みください。 Webデザインのプロセスは壊れており、レスポンシブWebデザイン（訳者注：以後「RWD」と表記）の推進によって、モダンなアプローチを余儀なくされつつある。 典型的なデザインプロセスでは、理想化されたWebサイトのコンセプトイメージが写真編集アプリを用いて制作される。そして、コンセプトイメージを顧客または承認する立場にある権威に渡し、フィードバックや批判を
暑さでやる気がでないWebデザイナーにおくるHTML5表現まとめ
仲夏。HTMLファイ部の本多です。 jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。 QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう！ 募集中のテーマはズバリ、 ＼ 夏を涼しくする表現 ／ 暑い夏をひんやり涼しくしてくれる作品をお待ちしています！ 本記事では、続々と集まっている投稿作品の一部をご紹介します。 夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ！ ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。 夏を涼しくするコードまとめ！ ripple sound 音と波紋を合わせた表現が爽やかで良いですね...！ A～Zのキーを押すと自分で波紋を出せます。
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
Dev.Opera — Responsive Images: What’s the Problem, and How Do We Fix It?
Responsive Images: What’s the Problem, and How Do We Fix It? IntroductionResponsive images is a surprisingly complicated topic, and one that's been steadily gaining attention over the last year as more developers discover they need them and then discover there's no good solution yet. This article aims to give an overview of the problem itself, and show the different proposals in the works to addre
Sassの存在意義
SassはCSSの貧弱さを補うような便利機能について取り上げられることが多い。そのためその機能の奥に隠れているものについて触れられることはあまりない。例えば変数や四則演算、関数によって値に論理的な意味を持たせることができることとか。そういうCSSに足りない概念の導入できることとかももちろん周知させたいけど、それ以上にHTMLとCSSによるWebサイトの作成に新たなアプローチが加わることを周知させられればいいなぁと最近思う。Sassの存在意義というのはその辺りに見いだせるんじゃないかと考えているので。もう「CSSグラデーションのミックスイン！」とかスニペットでやれるようなことを推すのはやめたい(やめてほしい)。 現状ではWebサイトは以下の2つのアプローチでしか作成(更新)できない。 HTMLで文書をマークアップして、それに合わせてCSSにセレクターを書く CSSでデザインを定義して、それに
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
CSS-3D ~ animating the style
Welcome to CSS-3D Flight of the Venturer - Using CSS3 animation and 3D transforms Enter the Matrix - Using CSS3 animation and 3D transforms Rotating color cube with CSS3 animation and 3D transforms - move inside the box Spinning spiraling space cube (demo 1) using CSS3 3D animation and 3D transforms Spinning space cube (demo 2) using CSS3 3D animation and 3D transforms This website was made by Ora
Opera Logo with CSS · David DeSandro
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」
designers-hack.net
円（サークル）を使ったCSSの次世代表現チュートリアル
Bourbon - A Lightweight Sass Tool Set
https://css1k.com/
