新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」:phpspot開発日誌
jQuery Unveil - A very lightweight plugin to lazy load images LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 LazyLoadプラグインの余分な機能（エフェクト、イベント）を省いて軽量化したものです。 LazyLoadでページ表示速度をあげようとしてLazyLoadで遅くならないようにしたい場合に使えそう とにかく軽くしたい場合に検討してみてもよいプラグインですね 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 レスポンシブに加えスマホ用のメニュー実装もできる
[CSS] モジュール化についてしっくりと理解できないので、ちゃんと考えてみました - YoheiM .NET
こんにちは、@yoheiMuneです。 「CSSのモジュール化」という言葉を聞いたことありますでしょうか？CSSにプログラミングなどにあるモジュール化という概念を当てはめて、 より効率的に、より実装しやすいCSSにしようという考え方です。 この「CSSのモジュール化」について、「それってどーゆう意味？」ということを考えたいと思い、ブログを書きました。 モジュール化とはなに？ 「CSSのモジュール化」という単語を理解するためには、モジュールとは何かを把握する必要があるようです。 グーグル先生に聞くと色々とモジュールの定義が出てきます。以下にはwikipediaから引用した文言を記載します。 モジュール (Module)とは、工学などにおける設計上の概念で、システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。 引用元：Wikipediaより また
![[CSS] モジュール化についてしっくりと理解できないので、ちゃんと考えてみました - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/51b4c4398de410543919833f9af84b9a598d1410/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F244.jpg)
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
タブレット向けサイトの文字サイズは16pxがいいとの調査結果……イマドキの文字サイズの話 | 初代編集長ブログ―安田英久
今日は、タブレット端末でユーザーが好むWebサイトの調査結果を紹介しながら、昨今のユーザーがWebサイトを見るのに使っているデバイスにどう対応するかを少しだけ考えてみます。 タブレット端末で使いやすいサイトとは？「タブレット端末でのサイトユーザビリティ調査」というレポートを、IMJさんが発表していました。 ・ IMJ調査レポート「タブレット端末でのサイトユーザビリティ調査」 → http://www.imjp.co.jp/press/release/20130515_000959.html （リリース） → http://www.imjp.co.jp/press/assets/201305/imj20130515.pdf （調査データPDF） ざっくりその内容をまとめると、こんな感じです。 7インチタブレットユーザーの最大34％はスマートフォンサイトを支持 （でも大半がPC向け表示を支持）
デザインに迷ったときに相談する際のマイルール5つ | Webデザインのタネ
こっちの色でも、そっちの色でもどっちでもいい。でも、どちらも腑に落ちない。 僕にはこんな経験がよくあります。一人問答をしてそれでも納得できないとき、最終的には周りに相談します。その際に相談するときにはある程度自分のルールを持っています。今日はそのときのルールを紹介してきます。 自分は何に悩んでいるのか分類する バナーがしっくりこない トップページのメインビジュアルが周りから浮きすぎて見えてしまっている 全体的にのっぺりしてる感じになってしまう デザインをする上では山ほどの悩みを解決しながら制作をしますが、僕の場合はざっくり4つに分けて考えるようにしています。 人によっては違うかもしれませんが、問題がだいたいどこにあるのかを見当つけることで、相談するためのポイントがはっきりします。 相談相手に何をして欲しいのかゴールを決める ただ「わからない」というだけでは、相談相手も困ってしまいます。自分
Twitterのようなログインフォームを設置出来るjQueryプラグイン
Simple and Effective jQuery Dropdown Login Formは、軽量でお手軽にログインフォームを設置出来るプラグインです。 ちょっとしたサイトのアクセント、Twitterみたいなログインフォームを設置したーいという人が何人かいたので共有。 クリックから展開 イメージ的には以下の様な。 中々美しいでしょ？ 設置方法 はじめにjQueryをGoogle先生から呼び出し、CSS、login.jsを読み込みます。 <link rel="stylesheet" href="css/style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <script src="js/login.js"></scrip
CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。 実例 こんなグラデーションを実装します。 #rrggbbを使ったグラデーションの例 まずは#rrggbbで書いた例です。 background-image: linear-gradient( top, #ffffff 0%, #a3daf5 50%, #75c7f0 51%, #19a1e6 100% );
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
ゼブラ柄のテクスチャまとめ「30 Striking Zebra Print Texture for Free Download」
動物の毛並みや模様の柄を使ったテクスチャは、デザイン業界でも幅広く利用されており、使い方によってはさまざまな使い方ができると思います。そんな中今回紹介するのは、ゼブラ柄のテクスチャまとめ「30 Striking Zebra Print Texture for Free Download」です。 （zebra print texture by ~ghoulskout on deviantART） シマウマの皮膚の柄がいろんなテイストのテクスチャでまとめられています。気になったものをピックアップしてみましたので、以下よりご覧ください。 詳しくは以下 ■Zebra Love by ~Penny-Stock on deviantART ハート柄とコンビになったゼブラ柄は、女性ターゲットのデザインに。 ■Zebra Fabric Vampstock by *VAMPSTOCK on deviantA
レスポンシブ対応のナビゲーションメニューを実装するチュートリアル11選｜BLACKFLAG
レスポンシブ対応を求められるWebサイト制作では ナビゲーションメニューの構成について 何かと気を使わなくてはいけない点が出てきます。 ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが 便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルが そこそこ溜まっていたので11種類ほどまとめて紹介してみます。 Responsive Nav – Responsive Navigation Plugin Responsive Nav – Responsive Navigation Plugin jQueryなどライブラリファイルを使わずに 1.7KBという軽量スクリプトで構成された 「Responsive Nav – Responsive Navigation Plugin」。 PCサイズでは通常のボタンが並ぶメニュー、 幅の狭いスマホ・タブレット系の
[フロント] JPG,GIF,PNGの違いを比較＆それぞれのファイルフォーマットについて詳しく調べてみた - YoheiM .NET
以下の記事では、それぞれの画像フォーマット毎に詳しく内容を記載したいと思います。 JPG 非可逆圧縮について JGPは、他の画像フォーマットと異なり非可逆圧縮であるという点が、大きな違いです。 非可逆圧縮とは、「圧縮した物から表示した画像は、圧縮前の画像とは異なる」という圧縮フォーマットです。１回圧縮しちゃうと、まったく同じものは復元できないよー、という圧縮形式なのです。 「同じ物を復元できないなら使えないんじゃん？」と感じるかもしれませんが、それは使いどころによっては使えるのです。 JPG形式が良く利用される画像として写真（デジカメなどで撮影した場合は特に）が挙げられます。写真は撮影物によりけりですが、多くの場合、色の変化が多様です。例えば風景を撮影した場合、１枚の写真の中に緑や青色や色々な色が入っていたり、同じ緑でも彩度や明度が異なり多くの種類の緑が入っています。 このような画像を非可
![[フロント] JPG,GIF,PNGの違いを比較＆それぞれのファイルフォーマットについて詳しく調べてみた - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/374402c3678d1a35f14e120bfddee4b7e0828976/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F243.jpg)
フリーな1262種類のフラットアイコン「COSMO MINI」:phpspot開発日誌
Blog, Freebies | Icojam - sweetest free & premium royalty-free stock icons フリーな1262種類のフラットアイコン「COSMO MINI」 次のようなフラットアイコンが配布されていて、WEBの他、色々な場所で使えそうです 40x40サイズのPNG形式で配布されていて、ベクターではありませんが、十分使えそう。 関連エントリ フラットが美しすぎるアイコン24個セット 地図と共に使えそうな２００のフリーベクターアイコン集 シンプルで使えそうな５０のベクターアイコンセット 汎用で使えそうなフリーのアイコンフォント「Genericons」 ピクトグラムアイコンの検索に便利な「IconsDB」 iPhone用のアイコン３００個セット「ICON BEAST」 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを
スマフォアプリの操作が気持ちいいエフェクトがたくさん！タップ操作時のエフェクトのまとめ -Tapotype
Tapotype 掲載されている各エフェクトはタップやクリック操作で、実際にアニメーションで動作します。 サイト閲覧には、Safariをオススメします。 各エフェクトはカテゴリ別にまとめられており、それぞれ詳細ページも用意されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しくなったGoogle+をさらに使いやすくするユーザースクリプトまとめ | ライフハッカー［日本版］
PC
新着記事
