選択したテキストにスタイルに適用する「::selection」
選択したテキストにスタイルを適用しているサイトを最近ちょくちょく見かけるので、このブログでもやってみました。ということでその方法を簡単に説明してみます。 「::selection」というセレクタを使うことで選択したテキストにスタイルを適用することができます。 以前は現在策定中のCSS3セレクタの1つとして載せられていましたが、いつの間にか仕様から外れました。ですがIE以外でしたらちゃんと使えます。 基本的な使い方は以下のとおりです。 ::selection { background:#ff0000; color:#ffffff; } ::-moz-selection { background:#ff0000; color:#ffffff; } Firefox用に「-moz」のベンダープレフィックスをつけたものも必要となります。セレクタにベンダープレフィックスというのも珍しいですね。 あとフ
「CSS3でできること」を知るために見ておきたい42のサイト
CSS3を使って作ったメニュー、ボタン、スライドショーなど、「CSS3でこんなことができるのか」と感心したサイトを集めてみました。 jQueryと組み合わせたものもよく見かけますが、今回はCSSのみで実装しているものを集めています。 目次 メニューいろいろ （12個） テキストに関すること （5個） CSSだけで作ったボタン （8個） 画像に関すること （7個） あのロゴやあのキャラクター （10個） メニューいろいろ 普通のメニュー、ドロップダウンメニュー、アコーディオンメニューなど色々あります。 Creative CSS3 Animation Menus | Codrops マウスを乗せたときの動きがダイナミックなメニューです。 Animated Navigation Menu with CSS3 | Web Designers Desk マウスを乗せると文字が一周まわります。jQue
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
プレゼンテーション・パターン (Presentation Patterns)
本サイトから生まれた書籍『プレゼンテーション・パターン：創造を誘発する表現のヒント』（井庭崇＋井庭研究室, 慶應義塾大学出版会, 2013年2月出版）が、2013年度グッドデザイン賞を受賞しました！ 審査員の評価では、「コミュニケーションをとることが重視される現代社会においては、プレゼンテーションする機会も多くなる。最近では若い人のプレゼンテーション機会も多く、前世代を生きた人間にはうまく伝えられないこともある。本書籍はプレゼンテーションの本質的な理解を促すための秘訣（視点や考え方など）がわかりやすく整理され、ウィットの利いたイラストやコピーを用いて学生でも読みやすいように仕上げており編集デザインの観点から評価した。また相手の存在を理解しなくてはならないデザイン意識の指南書としても期待したい。」というコメントを頂いています。 なお本書は、2013年10月30日〜11月4日に東京ミッドタウン
Selfkleptomaniac — Titaniumでリジェクト・iCloud関連
Blogging is a disease: selfkleptomania, your normal condition. About GPG Public Key Titanium Mobileで作ったアプリがリジェクトされたので記念に。 今回リジェクトされた理由は、iCloud対応でデータの格納場所が厳密に定められ、チェック内容が変更になったからです。これからのアプリは生成されたデータを格納する際には以下のルールに従う必要があります。 (1) アプリが再生成できないファイルは/Documentsに保存 例えば、メモ帳アプリでユーザが書いたメモなんかはこちらに保存しないといけません。iCloudで自動的にバックアップされます。 (2) 再生成可能なファイルは/Library/Cachesに データベースのキャッシュも含む、とありますが、ダウンロードされたファイルなどもここに置くのが正し
Best jQuery Plugins of 2011
Resources Best jQuery Plugins of 2011 Henry JonesNovember 23, 201126 Comments03.4k jQuery was first released in 2006. Nearly 5 years later, it’s still going strong – due largely in part to the community that’s been built up around it. This community of developers constantly releases plugins that allow web developers to easily add amazing functionality to their projects. Continuing our “Best of 201
レスポンシブなWEB制作のためのCSSフレームワークのまとめ
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
あなたは何点？Webデザイナーのためのクイズサイト12
2014年9月29日 便利ツール Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ！Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :) ↑私が10年以上利用している会計ソフト！ 休憩時間にサクッと挑戦！ 選択問題やドラッグ＆ドロップでできるゲーム感覚な問題いろいろ！ 1. HTML/CSS HTML5実力テスト HTML/CSSコース 「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか？」「smallタグは何を意味するか？」などなど、問題を解きながら勉強になります！
Maka-Veli.com / 作業工数を見積る、という事。
たまには企業ディレクターっぽい記事を書いてみようかと・・・見積作業がたぶん一番多いです。失敗すれば、お客さんにも会社にもデザイナーにも迷惑がかかってしまう重要なタスク。お金に関する問題なので、全工程を把握し、リスクヘッジも含みつつボッタクリなんて思われないようにし、きちんと作業工数分ご請求させて頂く為にミスのないよう心がけています。今回はそんな御見積時に関する、僕が気をつけている点。ディレクターってなんだよ、何してんの偉そうに、って疑問視される方も、少しは身近に感じてもらえるでしょうか？※画像のネコさんは内容と全く関係無いです、申し訳ございません。 個人的に重要だと思うポイントは以下です。 作業の終わりはどこかを決める 「見えない工数」が見えていないと、終わりが無いです。 ラインはきっちり引きましょう。 なぜかというと、 もちろんこちら側の作業が終わらないのを防ぐ理由も大きいです
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。（これらも引き続き使用できます。） →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
iOSのフォームで label要素をタップできるようにするJavaScript
H2O Space. のたにぐちまことが、H2O Blog.に投稿するまでもないようなちょっとした話題やサイトクリップを投稿する、つぶやきブログ。 お仕事のご依頼などは、こちらへどうぞ iOSおよび iPhone OSでは、最新版の iOS 5であっても label要素をタップすることができません。そのため、ラジオボタンやチェックボックスなどは、パーツ自体をタップしなければならず、かなり細かな操作を要求されます。 そこで、次のようなスクリプトを書いて書籍「iPhone+Android スマートフォンサイト制作入門」にも収録しました。 $(‘label’).click(function() { var t = ’#’ + $(this).attr('for’); $(t).attr('checked’, !$(t).attr('checked’)); });
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
スクロール位置を維持しつつ web ページ全体のスクロールをできないようにする方法 (web ページのスクロール位置固定) - vivid memo
最近は Ajax などによって web ページを動的に変更するという手法も一般的になって、ページの中にさらにサブページのようなものをポップアップする、ということがしばしば行われます。 例えば Facebook の Theater mode のようなものです。 さて、「ページの中にサブページのようなものをポップアップして表示する」 場合、サブページがスクロール可能であれば、もともとのページ全体はスクロール不可能にしておく方がユーザーにとっては使いやすいデザインであると思います。 実際、Facebook でも Theater mode の際には Theater 側にスクロールバーがあるのみで、ページ全体はスクロール不可になります。 本記事では、そのような用途に用いるための 「スクロール位置を維持しつつ web ページ全体のスクロール可否性を変更する関数」 を紹介します。 ページ全体をスクロール
jQuery Mobileのビジュアルデザインが自由に！ Theme Rollerついにリリース
Announcing ThemeRoller for jQuery Mobile! Learn more: http://t.co/LvFkbfwp or try it now: http://t.co/AeDhxKnbFri Oct 28 12:29:55 via Twitter for Macjquerymobile jquerymobile 正直なところ，正式版のリリースまで出る出る詐欺で進行するかと思っていたのですが，jQuery MobileのTheme Rollerがついにリリースされました． ThemeRoller | jQuery Mobile Announcing ThemeRoller for Mobile (beta) | jQuery Mobile 普通にカスタマイズしようと思うと，何かと面倒くさいオリジナルのカラーテーマの作成を，Webインターフェースで簡単に作れ
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
なぜ「DNSの浸透」は問題視されるのか:Geekなぺーじ
「DNSの浸透」という表現が結構よく使われています。 DNSに設定された情報を更新したけれど、その結果がなかなか反映されずに誰かに相談すると「DNSの浸透には時間がかかります」と説明されて納得してしまうという事例が多いようです。 しかし、うまく準備を行えば、実際の切り替え処理は、いつ完了するのかが不明な「DNSの浸透」を待つのではなく、事前に計画した時間通りに完了させることが可能です。 さらに、本来であればDNS情報の設定者(ゾーン情報の設定者)は、いつまでに世界中のキャッシュが更新されるかを知ることができる環境にあり、それ以降も更新がされていなければ「何かがおかしい」とわかるはずです。 DNSにおける設定内容(DNSのリソースレコード)には、その情報をキャッシュとして保持し続けても良い期間であるTTL(Time To Live)という要素がありますが、TTLはDNS情報設定者が自分で設定
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
変形 - Akiba Hideki
今回は、「設計変更」が発生したときの設計者とクライアント間のコミュニケーションを考慮しました。 あなたは、あなたのために仕事を注文するクライアントやディレクターとどのような意識を持っていますか？ たとえば、少し大規模なシステム開発の場合、「このように動くものを作る」と言った直後にプログラムを作成する開発者などはいないようです。 実際、システム開発の予算の大部分は非常に重要であるため、「設計（要件定義を含む）」に充てられています。 つまり、この「設計」フローがなければ、手を動かすことで作業することはできません（大まかに言えば）。 一般的なデザイナーの仕事には大きな懸念があります。 つまり、「要件を設計および定義するためのフローなしで設計を行う設計者が多すぎます」。 現在、特にWeb制作では、「デザイナーと開発者」は異なる次元の人種のように切り離されていますが、それは本当ですか？ 私はデザイナ
独立を考えているWebデザイナーのための、フリーランスになって気がついたこと、学んだこと - DESIGNMAP
独学でWebデザイナーを目指している方で、将来はフリーランスになって独立を考えているかたもいらっしゃる方もいらっしゃるとおもいます。以下、実際にフリーランスを考えている方、躊躇している方へのメモです。 会社や組織のありがたみ 独立してスタートして売上がそれほどない状態だと、最初は営業や経理の役割を一人でこなします。見込み客の開拓、打ち合わせ、提案書、見積書、請求書、会計ソフトへの入力（仕訳→総勘定元帳への転記）作業などです。取り急ぎ紹介だけでも食える人でも、長くやるには顧客の開拓が必要になります。見込み客の開拓はまず自分の存在をしってもらうことです。具体的には、役に立つブログを書く、プラグインの配布、無料Webサービスなどの施策をおこないます。 デザイナーの人はこのあたりの分野が苦手な人が多いです。会社員の一員でデザイナーをやっているとこのあたりの面倒なことは、ディレクター、営業、経理の人
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3 - Information and samples - robertnyman.com
HTMLMEETING