その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。 薄い灰色の文字の問題点 文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。 また、薄い灰色の文字は読者の誘導
javascript-best-2016-may.html
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
jQueryで正規表現を学んでみる。【基礎編】
Posted: 2010.11.14 / Category: javascript / Tag: jQuery, 正規表現 正規表現といえばフォームチェックがぱっと思いつきますが、最近ではjQueryで外部APIで様々な情報を取得する機会が増え、それによって文字列の置き換えなどもできるようにならんとな、と思ったりしている人も増加しているはず！ ということでお手軽に使えるjQueryを使用して正規表現をちょこっと勉強してみようと思います。 文字列を置き換える基本の形 正規表現の前にjQueryで単純な文字列を取得して、置き換えて表示するということをしてみます。 html <p> 正規表現はjavascript以外のプログラムやテキストエディターなどの検索でも使えます。でもここではJavaScriptを使うんです。 </p> 例えばここにpタグでマークアップされた文字列があります。 「java
これからのWebデザインはIllustrator派が増えてくるのでは？ | 5 LOG
個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる
Appleとタイムトラベル！Apple公式サイトと振り返るWebデザインの18年間 - デザインメモ
URLを入力すると過去のWebサイトが見れる、Google Chormeの拡張子「ウェブタイムマシン」をご存知ですか？ メジャーなサイトをいろいろ見るのが面白くてやっていたところ、Appleの公式サイトが結構昔まで遡ることが出来たのでスクリーンショットを撮ってまとめてみました！※年月はおおよそです。 以下からどうそ。 2014年12月 まずは2014年12月現在のサイトです。クリスマス向けのメインビジュアルになっていますね。流行りの横幅いっぱいに画像を使っていてレスポンシブにしています。 2014年9月 iPhone6と6+が出た当初、一瞬だけ全画面スライドショーになっていたのを覚えていますか？あの、お馴染みの4つボックスが無くしてしまったんですが、評判やアクセスが悪かったのか、もともと短期的な計画だったのか、すぐにやめてしまいました。 ここで同時に今までやらなかったスマホ対応もしましたね
Apple.comのデザインの変遷を15年分140枚の画像を使ってまとめたスライド「15 Years of Apple’s Homepage」
スティーブ・ジョブズがAppleに復帰した1997年から2013年1月までの15年間にわたるApple.comのスクリーンショット約140枚をまとめたスライドが公開されました。 15 Years of Apple’s Homepage | Charlie Hoehn's Musings http://charliehoehn.com/2013/01/14/15-years-of-apple-dot-com-homepage/ まずは1997年のトップページデザイン。文字がぎっしり書き込まれ、余白は少なめ。写真は一枚も使われていません。 1998年、目玉であるキャンディカラーのiMacの写真がトップに大きく表示されています。その下に注目商品であるiBookなどが並び、さらにその下にAppleマークと共にアバウトやサポートといったボタンが表示。 写真の下にあったボタンが最上部に表示されるように
:before 疑似要素を使ってテキストを画像に置換 - lucky bag
Image Replacement （背景画像置換）ネタ再び。我ながらしつこいネタだけどキニシナーイ。とりあえず今回は、:before 疑似要素を使って、テキストを画像に置換してみるっす。 残念ながら、IE は:before 疑似要素をサポートしていないんだけど、この方法による利点は画像オフ CSS オンの状態でも問題なくテキストを表示してくれるってこと。おそらく IE7 ではサポートされると思うんで、IE7 がそこそこ広まったうえで、それ以前の IE をバッサリ切り捨てる潔さがあれば、意外と使える方法かもしれない。 :before 疑似要素によるImage Replacement の仕組み :before 疑似要素と content プロパティを使うことによって、当該要素の前に生成内容を挿入することが可能になる。今回のImage Replacement （背景画像置換）の仕組みとしては、
普通の縦メニューをレスポンシブデザインに対応させてみる｜Webpark
レスポンシブデザインに対応した縦メニューを作ってみました。できるだけ詳しく解説してみますので、これを参考にサイトに合わせて自由にカスタマイズしてもらえたらうれしいです。 まずは実際に見てください。ブラウザを伸縮させながら見ていただければと思います。レスポンシブウェブデザインの確認にはブックマークレットのViewport Resizerも便利です。 では解説していきます。 HTML <div id="navigation"> <div id="toggle"><a href="#">menu</a></div> <div id="menu"> <h3>Tittle1</h3> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
写真やベクトル無料でダウンロード| Freepik
すぐれたデザインを、より速く作成高品質の写真、動画、ベクトル、PSD、AI 画像、アイコンなどを使えば、アイデアを並外れたデザインに変換できます
Webデザイナー必読？！著作権について知っておくべき10のこと - kojika17
Webデザインに限らず、制作したものに発生する「著作権」を知っておかないと、トラブルの元になるかもしれません。 特にWebデザインの場合は写真、文章、素材。 場合により動画など多岐の著作物を扱う場合が多々あります。 自分の頭の整理のためにも、Webデザイナー、ディレクターが知っておくべき著作権のことについて、まとめてみました。 1、著作権の基礎知識 著作権とは、知的財産権の一つです。 日本の著作権は「無方式主義」と呼ばれる方式で、制作物を制作すると自動的に著作権が発生します。 この時、著作者人格権と**著作権(著作財産権)**に分かれます。 「著作者人格権」と「著作権(著作財産権)」について 著作者人格権 簡単に言えば「制作者」 公表の時の手段、方法を決定できる権利です。 法律上、制作者の同意がなければ公表できません。 著作権(著作財産権) Webデザイナーにとっては、Webサイトなど制作
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
MacRabbit was here
Here hopped MacRabbit. Makers of some damn good software. Apps that shone bright and some that never saw the light. Norbert the magical rabbit was never real, but the magic was. Espresso and CSSEdit acquired by, alive and kicking at Kangacode Fifteen Crazy Years: A Toast to Life What a wild space carrot ride... Thanks for all the memories, lovely people. Signing off, Jan (this guy, also on Twitter
Color Picker Tool | Free HEX Color Picker by WebFX
The Hex Color Picker Share Our Hex Color Picker: This free HTML color selector is the ultimate web design tool. You can easily generate cohesive, harmonious color schemes by using the complementary, triade, tetrade, and analogic options up top, or you can create your own color palette from scratch by using the RGB color picker functionality and saving your preferred colors to the palette on the ri
全標準フォント一覧 / もうパンツはかない
標準で入ってると思われるフォントのリストです。日本語・英語以外の言語用のフォントも混じってます(ただしきちんと英数字が含まれるもののみ)。 フォントのキャプチャ画像の下に、CSSでフォント指定をしています。インストールされていればそのフォントで表示されるはずですが、ブラウザや設定によっては指定が効かないフォントもあります。斜体以外の文字の太さ・幅のバリエーションも拾いだしてみました。ページデザインの参考にどうぞ。 各枠右上の三角印をクリックするとCSSを表示し、×印のクリックで閉じます。また右側のピンク色の枠へドラッグして取り置きすることができます。取り置きを捨てたり並べ替えたりもできます。(IE9以前とスマホ・タブレットでは取り置きできません) なお、Mac用で枠の右端が赤いものは、必要に応じてダウンロードできるフォントです。(言語を日本語としてmacOSをインストールした場合は下のフォ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flat UI - Free Bootstrap Framework and Theme
04
JavaScript + Ajax 実践サンプル集 - ホーム