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; }
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
テキストのサイズを調整し、両端をピッタリと揃えて表示するスクリプト・slabTextをWPプラグインとして日本語環境に対応・WP slabText
ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは
すごく印象的でお役立ちなPhotoshopチュートリアル50本 - GIGAZINE
毎日様々なインスピレーションを求めているデザイナーたちによって作られているサイト「The Design Inspiration」が選んだ2011年に最も印象的だったPhotoshopのチュートリアル50本がかなり有用です。 50 Most Impressive Photoshop Tutorials of 2011 | The Design Inspiration http://thedesigninspiration.com/articles/50-most-impressive-photoshop-tutorials-of-2011/ ◆1：全速力で走っているモーションを効果的に加える方法 ◆2：バットマンのシンボルマークがよく見ると浮かび上がっている ◆3：SF映画のようなポスターに仕上げる ◆4：左右対称のライトニングエフェクト ◆5：マンガ風・カートゥーン風に塗る方法 ◆6：ファ
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
最近リリースされた高品質なフリーのデザインフォント -2011年7月
最近リリースされたものを中心に、高品質なフリーのデザインフォントを紹介します。 Collator 個人・商用利用無料。 Fabrica 個人・商用利用無料。 Mimic Roman 個人・商用利用無料
WEB屋が行き詰まった時、参考にすると何かが舞い降りるかもしれないサイト色々（主にデザイン系） | バンクーバーのうぇぶ屋
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい＞＜ 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
うまいなあ、とそのクリエイティブさに感心してしまうロゴのまとめ
ネガティブスペースを活用したり、二つのオブジェクトを合体させたり、そのクリエイティブさに感心してしまうロゴデザインをBored Pandaから紹介します。
GIMPでミニチュア風写真を作ってみる
はてブでちょっと話題になっていたので。 それGIMPでも余裕じゃないかしら？ということでやってみた。 ネタ元はこちら。 http://www.designwalker.com/2007/06/tilt_shift.html で、ちょっと調べたらもうちょっとハイレベルなチュートリアルがあった。これも参考に。 http://aska-sg.net/pstips/tips/pages/sentakuhanni-quickmask-01.html 素材元はFlickrにて拝借。エッフェル塔からの眺め。 元の著作権はこちらの方に帰属します。 http://www.flickr.com/photos/alvan/105202547/ レイヤーは一枚のまま進めます。 1.明度・コントラストの設定 道具(T)→色ツール(C)→カーブ(C)を選択。 チャンネルが明度となっているのを確認してから S字を書くよ
50 High Quality Fonts Every Designer Must Download | Creative Nerds
August 16th, 2010 Freebies There are so many free fonts all around the web these days and sometimes it makes me think is their any really point purchasing fonts. I’ve decide to collect 50 fonts which are suitable for web, print, etc just overall high fonts which can be used in design projects. This is just personal collection of our free fonts to date, i hope you enjoy and free to leave a comment
Inset Border Effect
Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco
荷物を受け取った人がびっくりする、一風変わった梱包テープ | 情報屋さん。
23件のコメント 欲しい 買う と思ってリンクみたけど日本じゃ売ってないのね Posted by 匿名 at 2010/07/29 15:10 返信 こりゃおもしろい 欲しいな Posted by 匿名 at 2010/07/29 15:22 返信 いいなこれ その辺でもし売ってたら多分買ってる Posted by 匿名 at 2010/07/29 16:07 返信 ちょっくら買ってくるわ Posted by そおおそ at 2010/07/29 16:11 返信 ビックリマンシール（懐かしい・・・） Posted by 匿名 at 2010/07/29 16:29 返信 でも蝶番なら箱の角にないとおかしくないか？ Posted by 匿名 at 2010/07/29 16:55 返信 はいはいおかしいおかしい Posted by 匿名 at 2010/07/29 17:53 返信 ビック
かわいい上にハイクオリティなフリーのアイコン集
ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon（有償のアイコンページ）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
色彩センスのいらない配色講座
Photoshop VIP ☞ 新しく公開された真似したくなるすごいPhotoshopチュートリアルまとめ 2011年5月度
2010年総まとめ：商用利用も無料、日本語・英語の高品質なフリーフォント集
新着記事
Photoshop Vip » 誰もが欲しがる、極上テクスチャ40セット集めました。
