画像の縦横比（アスペクト比）を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。
【怖くないJavaScript + jQuery】画像の縦横比を保ったままサイズを変更する処理
画像の縦横比（アスペクト比）を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。
【商用利用OK】フリー写真素材サイト20選
こんにちは、工藤です。 いつもの自分用では若干ありますが、商用利用OKでフリー写真を提供してくださっているサイトをまとめました。（一部有料有） ご利用ガイドや写真ごとにある使用許諾などとあわせてご利用ください。 2015年11月13日現在の情報になります。 ぱくたそ サイトへ 利用規約 高品質・高解像度な写真がたくさんあります。 個人的には綺麗な風景写真が揃っているのがありがたいです。 人物は結構アクが強め…ですが広告などではインパクトがでますね。 写真AC サイトへ ご利用ガイド クリエイターさんが多いからか、幅広いジャンルの写真が揃っています。 人物写真が使いやすいものが多い印象です。 元々は無料ですべて提供してくださっていましたが、今年から一部プレミアム会員のみダウンロード可になったようです。 ただ、それでも月額はだいぶ安いので登録しても損ではないと思います。 Pixabay サイト
イラストが魅力的なサイトのまとめ
STAY HOT いいぞ、もっとやれ。 – 日清カップヌードル サイトへ かなり濃いめのイラストとイラスト風に加工された写真のインパクトがすごいです。 フォトハウス ハピスタ サイトへ 手書きの感じと水彩やクレヨン風の効果がとても素敵です。 旅もじゃ サイトへ さりげなく下の方で船が動いたり電車が走っていたりします。 What is JUNIOR RESIDENT？-日本医科大学千葉北総病 サイトへ 人がずらーっと並んでいるのがなかなかインパクトがあります。 クリックして表示されるウィンドウの中にもイラストがたくさん使われています。 アルファデンタルオフィス サイトへ 背景からイラストに至るまですべて水彩画風で、やさしい印象を受けます。 La Maison des Carrés Hermès サイトへ とにかく絵の密度がすごいです。 販売されているスカーフもとてもおしゃれですね。 Kyot
非デザイナーから見たデザイナーが制作現場で求められていること
最近ネットをみていると、時々「デザイナーはオペレーターではない」論が話題になっているのを見かけます。 確かに制作現場ではよく話題になる話ではあります。 デザイナーは、ただ作業するだけではなく、アイデアや独創性がないとデザイナーとは言えん！みたいな話です。個人的にこの話は、Webディレクターが窓口に立って、話を進める進行体制をもう少し何とかしないと、オペレーションにしかならざるを得ないことも多いのではないかと思っています。
【怖くないJavaScript + jQuery】マウスオーバーで注釈を表示させる
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、マウスオーバーで注釈を表示させるjsを作ります。 デモ 実際に動かしてみるとこんな感じになります。 ボタンにマウスを載せてみてください。 デモを別ページで開く ファイル一式ダウンロード Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は tips.js とします）を読み込みます。 <head> <script src=”common/js/jquery.js” type=”text/javascript”></script> <script src=”common/js/tips.js” type=”text/javascript”></script> </head>
【jQuery】「.animate」で「border-radius」の値を変更すると変な動きをする
ある正円形の要素にマウスオーバーをすると、角丸四角になるような効果をつけたくて、jQueryの.hover()使用してborder-radiusが変化するアニメーションを設定した所、一旦正方形に戻ったうえで角丸にアニメーションしていくという動きをして調査したので記事に。（正しい動きと言えば正しいのでしょうが…） ▽やりたい動き ▽現実 まずマウスオーバーして実際の動きをご確認ください。 デモを別窓で開く 対策しても、ページ表示後の初回のアニメーションのみ未対策の時と同じ動きをするという…2回目以降は大丈夫なのですが…。要検討です。 （firefoxで確認） ▽未対策の場合 .hover()の書き方を単純に行うとこうなるのですが、border-radiusでは思ったような動きにはできないみたいです。
【怖くないJavaScript + jQuery】スクロールの位置によってついてくるメインメニュー
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、スクロールに合わせてついてくるメニューを作ります。 デモ 実際に動かしてみるとこんな感じになります。 フレーム内を縦にスクロールすると、ナビゲーションが途中から上部に固定になります。 デモを別ページで開く ファイル一式ダウンロード ナビゲーション要素のid、切り替えるスクロール位置の高さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は stalker.js とします）を読み込みます。 <head> <script src="common/js/jquery.js" type="text/ja
印象に残った学校サイトを集めました
こんにちは。 今回は学校サイトを集めました。 ここ最近は学校の特色を出すためか様々なこだわりを感じるものがたくさんありますね。 ただその中でも学生さんや親御さんに情報をしっかり見せないといけないと思うので整理するのがなかなか難しそうです。 早稲田大学 サイトへ TOPの背景に動画を使用しているのでちょっと不思議な印象を受けますね。 三田国際学園 サイトへ 三角の要素が印象的です。あまりごちゃごちゃした感じはなく、情報が見やすいです。 大竹学園 大竹高等専修学校 サイトへ すごくかわいらしくて若い子に向けたデザイン！という感じです。 グラフィックの1つ1つにこだわりを感じます。 女子美術大学 デザイン・工芸学科 環境デザイン専攻 サイトへ 学校のサイトには珍しく、TOPに人物の写真などをのせていません。 どちらかというと建築系の落ち着いた印象を受けますね。 相模女子大学 サイトへ 特集ページ
【バナーデザイン】Yahoo! JAPANの広告バナー
おはようございます。皆様梅雨のしっとりした季節、如何お過ごしでしょうか。 私は雨女のせいもあり、外出する時には何故か雨がぱらついてしまうので、私生活までしっとりと過ごしております… カラッとした季節が待ち遠しいですね。 — さて、本日の本題ですが、今日はYahoo!JAPANのバナー広告を集めてみました。 老若男女、たくさんの人が閲覧する検索エンジンのトップページに掲載されるので、種類も豊富で華やかな内容の物が多く、見ていて楽しいです。参考になれば幸いです。 ※画像はクリックで拡大します。 他にも、Yahoo！のバナーでご紹介したいのが、サイドに大ぶりな縦バナーを埋め込んで画面全体でプロモーションするインパクトのある手法です。バナー自体がドンと飛び出していたり、大胆な構成で作られていてワクワクしますね。
スマホサイト作成時に役立つプラグイン集
こんにちは。 今回はスマホサイト作成の時に使えそうなjqueryやJS、CSS3で作成されたプラグインを集めました。 jquery Slidebars サイトへ 設置がかなり簡単にできます。 ドロワーメニューはAndroidで不具合が起きることが多い印象なのですがこのプラグインはそういったことはあまり聞かないですね。 Drawer サイトへ よく使いそうなオプションが豊富で便利。 SlickNav サイトへ こちらも簡単に設置できるのが良いですね。 Off-Canvas Menu Effects サイトへ 動きがユニークで面白いです。 ブラウザやデバイスの不具合を考えるとちょっと正直躊躇ってしまいますが、1回使ってみたくなってしまいますね。 PhotoSwipe サイトへ レスポンシブ対応している画像ギャラリー系のプラグインの中で一番使いやすいと思いました。 タップやスワイプの動きなどにも
WordPressのスライダープラグイン10選
Meta Slider Meta Slider こちらのプラグインだけで4種類のスライダーを用意してくれています。 Easing Slider “Lite” Easing Slider “Lite” 矢印画像など、かなり細かいところまで設定することが出来ます。 Master Slider – Responsive Touch Slider Master Slider – Responsive Touch Slider 他のスライダーもレスポンシブ対応しているところは多いですがこれは特に変わった形のものもレスポンシブにしてくださっています。 設定方法の動画も用意してあり、使いやすいです。 Smooth Slider Smooth Slider こちらは画像だけでなく『最新記事』などのコンテンツもスライドしてくれるプラグインです。 コンテンツの高さを抑えたいときにいいですね。 Smart Sl
個人クリエイターに朗報！PRやプレスリリースを無料で出来るサービス「ツクログ」をリニューアルしました。
個人クリエイターに朗報！PRやプレスリリースを無料で出来るサービス「ツクログ」をリニューアルしました。 当社で運営している個人クリエイター向けプレスリリース・PRサービス「ツクログ」を本日リニューアルいたしました。 ツクログは個人で開発したWebサービスやスマートフォンアプリを無料で宣伝できるサービスとしてリリースしました。 今回のリニューアルではLINEスタンプのPRと大幅なインターフェイスの変更を行っております。 ツクログサイトURL： http://creators.eightbit.jp/ ツクログAndroidアプリ： https://play.google.com/store/apps/details?id=jp.co.eightbit.labo201405 プレスリリースはこちら http://www.atpress.ne.jp/view/61518 個人で制作・開発した制作
便利なCSS3ジェネレーターのまとめ
こんにちは。 またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。 うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。 グラデーション Ultimate CSS Gradient Generator サイトへ 以前からこちらを使用させていただいています。 使い勝手のいいサンプルが揃っています。 CSS Gradient Generator サイトへ 操作性がだいぶシンプルで使いやすいです。 CSS Sample サイトへ グラデーションだけでなくボーダーやチェックなども用意してあります。 CSS3だけでここまで表現できるんですね。 Gradient Generator サイトへ こちらもシンプルで使いやすいです。保存機能があるのがいいです。 ボタン Grad3 サイトへ 各ブラウザ用のcssを右上のアイコンでいるか/いらないかなど選択できます。
【デザイン】アイコン・イラストをあしらったメインナビゲーション30選
01.倉敷芸術科学大学情報発信サイト「つなぐ」 倉敷芸術科学大学情報発信サイト「つなぐ」 アイコンがテキストより大きめです。 マウスオーバーをするとまたちょっと雰囲気の違った画像を見ることができます。 02.渋谷再開発と東急建設 渋谷再開発と東急建設 03.Joha Joha デンマーク発の子供服などを扱うサイト。イラストからマウスオーバー・クリックした際の動きもかわいいです。 04.淡路交通株式会社 淡路交通株式会社 05.JA共済RECRUIT2016 JA共済RECRUIT2016 メインナビが下にあって、マウスオーバーをすると入れ子になった項目が上にのびていきます。 06.流山中央病院 流山中央病院 07.Lidea(リディア) Lidea(リディア) アイコンにそれぞれ色がついているのが分かりやすいです。 08.HEP FIVE（ヘップファイブ） HEP FIVE（ヘップファイブ
【怖くないJavaScript + jQuery】折りたためるサイドメニュー
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は画面サイドにくっついてくる、折りたためるサイドメニューを作りました。 デモ 実際に動かしてみるとこんな感じになります。 デモを別ページで開く ファイル一式ダウンロード 各要素のid、メニューの横幅、ボタンの中身、アニメーションの速さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は sidemenu.js とします）を読み込みます。 <head> <script src="common/js/jquery.js" type="text/javascript"></script> <script
[スマホ版]ログイン画面のデザインまとめ
こんにちは、工藤です。 前回が探していて楽しかったので今回はスマホサイトのログイン画面を色々見てみました。 スマホサイトではプレースホルダに注目しながら集めてみました。 プレースホルダを使用していない例 プレースホルダを紹介していない例です。 スマホサイトだと情報量が多い場合に高さを少しでもとってしまうことが難点ですが、ユーザーの立場からすると入力後の確認で正しい情報を入力できているかわかりやすいですよね。 ウィメンズパーク 会員IDのみの保存・両方の保存どちらか選ぶことができるんですね。便利です。 goo hotpepparbeauty プレースホルダを使用はしていますがあくまで例として入れています。個人的にはこれが正しい使い方かなと思います。 スマホはタップミスしてしまうこともあるのでパスワード表示をしてくれるのは個人的にはありがたいです。 JINS piviv Uber こちらはテキ
![[スマホ版]ログイン画面のデザインまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7bea6d73e22ca08fefb108b74404f292fbf658ad/height=288;version=1;width=512/https%3A%2F%2Fblog.8bit.co.jp%2Fwp-content%2Fuploads%2F2015%2F03%2Fbenesse.jpg)
2016年採用サイトを集めてみました
こんにちは、工藤です。 気付けばもう3月でした。今年度の就職活動は3月1日解禁だったり私が学生だった数年前とまた変わってるんですね。 とてもこだわりのあるものがあって見ていて楽しいので今回は気になった採用サイトを集めてみました。 ※2016年3月10日時点の情報です。 ARDEN HOUS [サイトへ] イラストが効果的に使われていてとてもかわいらしいです。 電通 [サイトへ] 電通の採用サイト。気になるカードをめくっていきます。おしゃれ・・。 フジフーズ [サイトへ] ピンクを基調にかわいらしい感じなのですが食品を扱っているからか清潔感のある印象もあります。 JAL [サイトへ] TOPに動画を使用しています。全体的に信頼感のある印象。 JA共済 [サイトへ] JA共済の採用サイト。ナビゲーションの動きやなどにさりげないこだわりを感じます。 アマゾンジャパン [サイトへ] TOPのスライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone/Android端末の解像度についてのまとめ（スマートフォン版）
Androidでつまずいたバグについて 2
【デザインの意味】都道府県の標章
