kasumaniのブックマーク - はてなブックマーク

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストールグリッドシステムのアップデートリセットは、「normalize.css」から「reboot.css」に classの変更とアップデートタイポグラフィテー

kasumani 2016/03/18

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポー

リンク

正式版がリリースしたAvocodeの便利な使い方をご紹介（コリス限定の優待コードもあるよ） | コリス

制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！ Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。 Avocode Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プ

kasumani 2015/02/12

デザイン用簡単GitHubが便利すぎ！正式版がリリースしたAvocodeの便利な使い方をご紹介（コリス限定の優待コードもあるよ） Avocodeの画面 PSD上のエレメントを指定するだけで、画像やSVGやCSSにエクスポートできます。インタ

リンク

CSSの基礎知識から実践的なテクニックまで、しっかりと身につけたい人はチェックした方がいいサイト -CSS Reference

昨日ローンチされた、CSSをしっかりと学びたい・身につけたい人にオススメのコンテンツ「CSS Reference」を紹介します。作成は当ブログでもよく紹介するCodropsで、CSSのプロパティの基礎知識から、どのように使うべきか豊富なサンプルを備えたコーダー必読のリファレンスとなっています。

kasumani 2015/02/09

CSSの基礎知識から実践的なテクニックまで、しっかりと身につけたい人はチェックした方がいいサイト -CSS Reference Tags: feedly, ifttt, recently read, saved for later from Pocket February 09, 2015 at 03:18PM via IFTTT

リンク

Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns

29種類のレイアウト、30種類のナビゲーション、画像・動画・地図・テーブル・フォーム・タブ・カルーセルなど、Webページで使用するさまざまなレイアウトやコンポーネントのレスポンシブ対応のパターンをまとめたサイトを紹介します。デザイン的なアイデアにしてもよし、HTML/CSSの参考にしてもよし、です！

kasumani 2015/02/09

Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns 29種類のレイアウト、30種類のナビゲーション、画像・動画・地図・テーブル・フォーム・タブ・カルーセルなど、Webペー

リンク

商用利用無料！ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier

セマンティックな実装で、レスポンシブ対応のミニマルにデザインされたかわいいUIエレメントやコンポーネント、グリッドが利用できる超軽量（2.5KB）のCSSライブラリを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Papier Papier -GitHub グリッドやタイポグラフィをはじめ、ボタン、パネル、タブ、テーブル、フォームなどがカラフルなデザインで揃っています。 Material Designのシャドウのパターンも揃ってるので、いろいろ楽しめます。 Papierの対応ブラウザは、IE7+です。

kasumani 2015/01/09

商用利用無料！ミニマルにデザインされたUIエレメントやコンポーネントが揃ってるCSSのライブラリ -Papier Tags: feedly, ifttt, recently read, saved for later from Pocket January 09, 2015 at 06:55PM via IFTTT

リンク

[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック

ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Serviсes</a> <a href="#">Contacts</a> </nav> CSS ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransf ormで設定します。 body { font-family: "Open Sans Condensed" sans-serif; display: -webkit-flex; display: -ms-fle

kasumani 2015/01/08

水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック Tags: feedly, ifttt, recently read, saved for later from Pocket January 08, 2015 at 10:53AM via IFTTT

CSS

リンク

角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法

角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。

kasumani 2015/01/08

デザインTips: 角丸パネルに角丸パネルを重ねた時、それぞれの角丸をバランスよくデザインする方法 Tags: feedly, ifttt, recently read, saved for later from Pocket January 08, 2015 at 10:53AM via IFTTT

リンク

Webデザインで魅力的なビジュアルを作りだすパステルカラーの効果的な使い方

Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイナーがマスターしておきたいパステルカラーの効果的な使い方を紹介します。「パステル」と聞くと、淡いピンクやイエローを思い浮かべる人が多いかもしれません。ここで紹介するパステルにはもっと多くのカラーがあります。 Solasie パステル調の写真やパステルをオーバーレイさせた写真をWebページに使うと、繊細で素晴らしいキャンバスになります。写真のトーンを少し控えめにすることで、要素を配置してもしっくりきます。ロゴやボタンなどの要素とコントラストを使って配置するのもよいでしょう。「Solasie」のロゴはパステルトーンの写真とうまくフィットしています。このやり方はソリッドなラインでデザインされたゴーストボタンにも使えます。パステルの背景 Dear Mum パステ

kasumani 2014/12/24

Webデザインで魅力的なビジュアルを作りだすパステルカラーの効果的な使い方 Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイ

リンク

CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。今年もCSSの進化がすごかったですね。

kasumani 2014/12/22

CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ Tags: feedly, ifttt, recently read, saved for later from Pocket December 22, 2014 at 01:52PM via IFTTT

リンク

デザインの参考になるUIエレメントが揃ってる！次のプロジェクトに役立つユーザインターフェイス用の無料素材 -Elixir

さまざまなバリエーションが揃っており、デザインのクオリティも素晴らしく、商用サイトにもそのまますぐに利用できるUIエレメントが揃ったPhotoshopのPSD素材を紹介します。単に使用するだけでなく、レイアウトのバリエーション、エレメントの展開など、デザインの勉強にも役立ちます。 Elixir -PSD UI Kit デモ版と有料版があり、デモ版でもその充実度はかなりのものです。ダウンロードできる素材は幅1920pxの高解像度で、UIエレメントのセットが一つ、さまざまなコンポーネントを使ったページのテンプレートが10種類揃っています。まずは、UIエレメントのセット。

kasumani 2014/12/22

デザインの参考になるUIエレメントが揃ってる！次のプロジェクトに役立つユーザインターフェイス用の無料素材 -Elixir さまざまなバリエーションが揃っており、デザインのクオリティも素晴らしく、商用サイトにもそのま

リンク

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.google apis.com/ajax/libs/jquery/2.1.1/jquery.min.js

kasumani 2014/12/20

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるように

リンク

フォントの選び方の参考になる！世界で活躍している有名デザイナーたちが選んだフォントのランキング -Typographer’s Typefaces | コリス

8 Faces magazineで特集されたリードデザイナー8人、世界で活躍している有名なデザイナー64人に4年に渡りアンケートを実施。「もしも8つしか書体を使えないなら、どれを選びますか？」で選ばれたTop25、27書体をランキング形式で紹介します。正しい書体を選ぶことは、デザインとコミュニケーションにおいて非常に重要な役割となります。タイポグラフィのデザイナーが厳選した書体のリストから選ぶのも素晴らしい一つの方法です。ランキングも面白いですが、タイプフェイスを使ったグラフィックもかっこいい！

kasumani 2014/12/18

フォント選びの参考になる！世界で活躍している有名デザイナーたちが選んだフォントのランキング -Typographer's Typefaces 8 Faces magazineで特集されたリードデザイナー8人、世界で活躍している有名なデザイナー64人に4年に渡り

リンク

[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe

サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。  <link rel="stylesheet" href="path/to/photoswipe.css">  <link rel="stylesheet" href="path/to/default-skin/default-skin.css">  <script src="path/to/photoswipe.min.js"></script>  <script src="path/to/photoswipe-ui-default.min.j

kasumani 2014/12/16

スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe スマホやタブレットだけでなく、デスクトップでのクリックやドラッグ、そしてキーボード操作にも対応している優れ物

JS

リンク

よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements

ボタンがぷるるんと弾けたり、サイドバーがゴムのようにびよ～んとスライドしたり、フォームがぶるったりと、Webページのさまざまな要素に柔軟性を加え、操作が楽しくなる「Elastic SVG Elements」を紹介します。

kasumani 2014/12/16

よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements Tags: feedly, ifttt, recently read, saved for later from Pocket December 16, 2014 at 08:22PM via IFTTT

リンク

[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems

タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI

kasumani 2014/12/10

縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems 最近どんどん増えてきた縦長ページ用でデザインの邪魔をせずに、使い勝手を向上させるかっこいいアニメー

JS

リンク

2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ

Webデザイナーはコードを学ぶべき？コーダーはデザインを学ぶべき？両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19

kasumani 2014/12/08

2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ Webデザイナーはコードを学ぶべき？コーダーはデザインを学ぶべき？ Tags: feedly, ifttt, recently read, saved for later from Po

リンク

iOS8のデザインに役立つ！iPhone 5s/6/6Plusでの主要なエレメントが揃ったPSDとSketchの無料素材 -iOS8 UI Design Kit

スマホやWebなどのUXデザイナーのためのプロフェッショナルツールを数多くリリースしている「UX Pin」の中の人から、「iOS 8のUIキットをリリースしたよ」と連絡を受けたのでご紹介。 UI/UXを研究している彼らならではの、高品質な無料素材です。

kasumani 2014/12/05

iOS8のデザインに役立つ！iPhone 5s/6/6Plusでの主要なエレメントが揃ったPSDとSketchの無料素材 -iOS8 UI Design Kit スマホやWebなどのUXデザイナーのためのプロフェッショナルツールを数多くリリースしている「UX Pin」の中の人から、

リンク

2014年総まとめ、jQueryのプラグインとスクリプト100選

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。背景関連 SVG関連縦長ページ関連スクロール連動・パララックス関連その他スクロール操作・補助関連レスポンシブ関連ナビゲーション関連レイアウト関連コンテンツ生成関連コンテンツ紹介・ツアー関連スライダー・カルーセル関連画像拡大・配置・キャプション関連アニメーション関連エフェ

kasumani 2014/12/05

2014年総まとめ、jQueryのプラグインとスクリプト100選 Tags: from Pocket December 05, 2014 at 01:44PM via IFTTT

リンク

本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale

本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか？一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。 Type Scale 左の各項目は、下記のようになっています。 Base Size ベースにするフォントサイズを入力します。 Scale 比率を選択します。 1.2, 1.414, 1.618などよく使う比率だけでなく、カスタムで数値を入れることもできます。 Preview Text 表示するテキストを入力します、日本語でも可。 Google Fonts 日本語で利用する場合は、特に変更はいりません。 Font Family 明朝体の時は「serif」、ゴシック体の時は「sans-serif」を入力。 Weig