カード型のUIはPinterestから人気が出始め、ここ1,2年の間に数多くのWebサイトで採用されるようになりました。レスポンシブデザインに相性が非常によいのも人気である原因の一つでしょう。 次のプロジェクトで使いたくなるような実装アイデアを備えたカード型レイアウトやカード型コンポーネントを紹介します。 まずは、アニメーションの動きが気持ちいいカード型UIから。

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ

Web制作のデザイン、ユーザエクスペリエンス、コンテンツ、制作・開発、そしてこれから必要もの、避けておきたいものをまとめた「69 Website Design Tips」を紹介します。 ターゲットとなるビジターを調査するのが重要 カラーは2, 3色をベースに、多色が必要なら明度に変化をつける ロゴは、デザインされた高品質なものを使う コンテンツが魅力的でも読めないテキストでは意味が無い 要素が減った時増えた時のことも考えてデザインする 既製のデザインを使うのではなく、ターゲットに適したデザインをする 構造化されたデザインにはグリッドが便利、汎用性の高い12カラムがお勧め 重要な要素を目立たせる時は、必要のない要素を取り除いてシンプルにする トレンドの使いすぎはよくないですが、10年前のデザインを使用するのはもっとよくないです デザインはオリジナル性を大切にします、既製をそのまま使うと他のサ

コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。

どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法［Infi

今回は、スマホのドロップダウンメニューの実装などに大変便利なjQueryプラグイン【SlickNav】の使い方のご紹介です。 実際に利用してみたら、とても便利でしたのでご紹介させて頂きます。 こちらのプラグインのとても便利な所が、既存のメニュー(ul要素でマークアップしている必要があります)をそのままコピーしてくれてモバイル用のスタイルで表示させてくれるんです。 なので、これからレスポンシブ化をするサイトなんかにこちらのjqueryプラグイン【SlickNav】利用したらとても作業も楽なんじゃないかなーと思います。 また、jQuery UIを読み込むとメニューをオープンとクローズ時のアニメーションをeasingのアニメーションを利用出来るようになっています。 レスポンシブに対応していますので、スマホのメニューだけではなく、ある要素をモバイルで、スペースを節約したい時に、こちらの【Slick

2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す

Sassの利点9：条件分岐や繰り返し処理ができる さらに条件分岐や繰り返し処理をすることもできる。これには頭に「@」を付けた命令文を記述して、JavaScriptなどのように比較演算子などを記述する。 特に繰り返し文は、メニューなどでそれぞれ違ったIDなどを持った要素にCSSを設定したいといったときに威力を発揮する。 @if $type: moge; p { @if $type == hoge{ color: blue; } @else if $type == huga{ color: red; } @else if $type == move{ color: green; } @else { color: black; } }

Making the web more beautiful, fast, and open through great typography

2012/09/11 かつてIllustratorやPhotoshopで作っていたテキストの装飾もCSS3のtext-shadowプロパティを使えばもはや不要になるのではと思ってしまうくらい多彩な表現が可能になってきました。 画像ではないのでクライアント環境に合わせた適切な出力が得られますし、一度に複数のスタイルをダイナミックに変更できます。画像ファイルを作成する工数もかかりませんし、テキストデータなのでコピー可能、SEOにも効果的でしょう。 いいことづくめのCSS3によるテキスト装飾。ここでは一例を見ていきます。 強調(その1) text decoration color: #444; text-shadow: 1px 1px 0px #eee, 2px 2px 0px #707070; 強調(その2) text decoration color: #fff; text-shadow:

.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79

今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。 こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。 また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。 僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。 色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。 下記にデモサイトもありますので、ご参考にどうぞ デモサイト 実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。 HORIZONTAL SLIDE OUT MENU レスポンシブに対応した

今回は、軽量のjQueryツールチッププラグインの使い方のご紹介です。 こちらのjQueryプラグインは、実装も簡単な上に軽量なツールチッププラグインとなっております。 最近では、よくツールチップがアイコンフォントなんかに使われているのを見ます。 ちょっとした文字をマウスホバーで表示させるのは、レイアウト/デザインの保持やスペースの節約になると思います。 また、以前にツールチップの記事を書きましたが、以前書いたツールチップは、マウスの動きに合わせてツールチップも表示されますが、こちらのツールチッププラグイン【Tipso】は、ご自身で上・右・下・左など指定した場所に表示されます。 下記に実際に【Tipso】を利用したデモサイトもありますので、ご確認頂ければと思います。 デモサイト 実装に必要なファイルなどもありますので、下記リンク先よりダウンロードして下さい。 【Tipso】 Tipso 実