無限スクロールで探しやすいWebデザインギャラリーサイト10 - Design Color
個人的に「探しやすい」と思うギャラリーサイトの特徴 ギャラリーサイトでWebデザインを探していた時、「次へ」ボタンを何回もクリックするのが面倒で、スクロールするだけでページが次々と読み込まれる「無限スクロール」の存在にとても助けられました。 個人的に、以下の3ステップのみで素早く目的のサイトに到達できる構造が好みです。 スクロールする サムネイルをクリックする 新しいウィンドウで該当ページが開く 次からは上記をすべて満たした私のおすすめギャラリーサイト10選をご紹介！ straightline bookmark ダークなデザインがかっこいい「straightline bookmark」。ここが１番お世話になっているかもしれません。「tags list」からすぐにお目当てのデザインを検索できます。１番のお気に入りは「レイアウト」で絞り込めること。サムネイルの表示サイズを変更できるのも便利。
3月は大好きなゴッホの記事を書く月！ゴッホ関連ニュースまとめ2014 - Design Color
長年贋作だと思われていた絵が本物のゴッホ作「モンマジュールの夕暮れ」だと判明！ なんと！長年「贋作だ」と思われていた絵が実は本物のゴッホ作「モンマジュールの夕暮れ」だったことが発覚したそうです！1906年に贋作だと判断され以降ずっと屋根裏部屋に眠り続けていたそうなので、かれこれ100年以上眠り続けていたことになりますね。うわあああ！ しかも、描かれた時期はあの有名な「ひまわり」と同時期とのこと。「ひまわり」はゴーギャンと一緒に暮らした「黄色い家」に飾る目的で制作された絵です。アルルで芸術家共同体を作ろうと燃えていた頃ですね。ゴッホの制作活動が最も充実していた時期ではないでしょうか。その時期の作品が新たに発見されるなんて、とても嬉しいニュースです！
PNG画像の軽量化に活躍！Photoshop拡張機能「PNG Hat」をレビュー - Design Color
「PNG Hat」導入まで プロダクトの有効化 拡張機能の配布サイト「madeby source」から「プロダクトの有効化」を行います。「madeby source」のアカウントが必要なようですね。 新たにアカウントを作成することもできますが、「Facebook」「Twitter」「GitHub」のうちどれかのアカウントを持っていればそのままログイン出来ます。 その後、自分のメールアドレスを入力すると、プロダクトを有効化することができます。 ダウンロード・インストール 下記のボタンをクリックして拡張機能をダウンロードしたら、ダブルクリックしてインストーラを立ち上げます。 インストーラが起動したら、もう一度ダブルクリックしてPhotoshopにプラグインをインストール。その後、Photoshopを再起動したら、準備完了です！ Photoshopで拡張機能「Png Hat」を使ってみよう！ P
自分のデザインをチェック！色覚シミュレーションの方法いろいろ - Design Color
もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型：赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型：緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型：青い光を主に感じる錐体が無いため、青色付近の識
Googleマップをスマートフォンでも最適な大きさで表示しよう！ - Design Color
ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。 @media (max-width: 767px) { iframe { width: 100% !important; } } とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。 何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。 .google-maps { position: relative; padding-bottom: 75%; /*これが縦横比*/ height: 0; overflow: hidden; }
Ajaxで遷移するページのPVをGoogleアナリティクスでカウントしてみよう - Design Color
「Ajaxでページ遷移する」ってどういうこと？ そもそも「Ajax」とは？ Ajaxとは以下のように定義づけられています。 Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。 引用：Ajaxとは – 意味/解説/説明/定義 ： IT用語辞典 つまりはブラウザをリロードせずに、サーバとのデータのやりとりを可能にすることなのですね！「オートページャー」にはこのAjaxの技術が使われています。 Ajaxでページ遷移する「オートページャー」の仕組み オートページャーとは、分割されている「次のページ」を今みているページ内にAjaxで継ぎ足して読み込んでくれるものです。以下の図のような形となります。 普通のページ遷移であれば、1ページ目、2ペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
