![http://exdroid.jp/d/47677/](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8c329c53a2806bea0f2d25b5648e5679acf39db/height=288;version=1;width=512/http%3A%2F%2Fexdroid.jp%2Fwp%2Fwp-content%2Fuploads%2F2012%2F11%2Fpost-47677_t-100x100.jpg)
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
Photoshopでのデザイン制作の参考に!テクスチャ制作チュートリアルまとめ「40 Great Photoshop Texture Tutorials」 画像加工やCG制作になくてはならないソフトとなっているPhotoshopは、非常にたくさんの機能が備わっており、さまざまなクリエイティブを生み出すことができます。そんな中今回紹介するのが、Photoshopの効果を有効活用したテクスチャの制作チュートリアルをまとめた「40 Great Photoshop Texture Tutorials」です。 Mix&Mash: Transform a boring piece of wood メタリックな表現や、チェックなどのファブリックを再現したテクスチャまで、さまざまなシーンを生み出すことができるチュートリアルが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記より
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ:スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
どうせ飲むなら美味しいところで飲みたい!g.O.R.i(@planetofgori)デス! 先日、鶏料理が美味しい居酒屋「ごち」に行ってきた!鶏も美味しいが、名物の卵焼きもかなりオススメ!! 場所は渋谷のちとせ会館の少し先。道路に向いているが入り口がひっそりとしていて店が地下にあるので、初めて行くと迷うかもしれない。 まずはお通しの自家製豆腐。塩で食べる!歯ごたえのある豆腐だ。 次に「とりササミとオクラの梅ユッケ」。これはかなり美味しかった。タタキ、好きなんだよね、多分。 アボカド好きなら大喜びであろう「アボカドととりササミの和えもの」。これはもう1皿いけるぐらい好きだった!アボカド、最高! 焼き鳥!色々注文したが、何を注文したか忘れたので割愛!全部美味! そしてこれが「ごち」自慢の名物卵焼き!ボリューム満点な上に程良い歯ごたえがたまらん! 一緒にいた友人が「確かすごい美味しかった!」とい
プロのデザイン制作にも使いやすいデザイン性の高いサンセリフフォントまとめ「10 Beautiful and Free Humanist Sans Serif Fonts」 デザイン制作の際になかなか気に入ったフォントが見つからず、特に予算がない時には、無料のデザインフォントを探すことも多いはず。そんな時に役立つ、プロのデザイン制作にも使いやすいデザイン性の高いサンセリフフォントをまとめた「10 Beautiful and Free Humanist Sans Serif Fonts」を紹介したいと思います。 Huerta Tipográfica | Download Telex ht アルファベット一つ一つの美しさを感じられるサンセリフフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Free Font Open
TOP > Design > 水のさまざまな表情が楽しめるウォーターテクスチャまとめ「50+ Beautiful Water Texture Collection」 水は一瞬たりとも同じ表情が見られないものであり、その瞬間瞬間に表現された表情にはいつも感動させられます。今回はそんな水のさまざまな表情が楽しめるウォーターテクスチャをまとめた「50+ Beautiful Water Texture Collection」を紹介したいと思います。 texture 11 by *Sirius-sdz on deviantART 海や川特有の水の動きや水滴など、さまざまなシーンのウォーターテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Water Texture 10 by ~GreenEyezz-stock on
【img via IRORIO】 小学生でのスカートめくりは文化だ、という話を聞いたことがある。 小学校1年からアメリカに行ってしまった僕は、5年後に帰国した時は時既に遅し。圧倒的な劣等感を感じずにはいられなかった。スカートめくりを経験せずに大人になってしまった僕は大丈夫なのだろうか。あーどうしよう。 どうやらその心配はもうしなくて良さそうだ。というのも、そのスカートめくりを毎月経験できるカレンダー「スカートめくりカレンダー」が最近登場して話題になっているらしい! カレンダーでは当たり前のように「めくる」ことが1年間めくり続けると僕が小学生時代に経験することができなかったスカートめくりを体験できるとのこと。素晴らしいじゃないか! 【img via IRORIO】 この「スカートめくりカレンダー」は広告会社勤務の社会人4年目が作ったものらしく、キャッチコピーが「ゆっくりあせらず1年かけて、あ
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル(リンクは2項) 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 1.はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
TOP > Design > さまざまな世界観が表現できる灰テクスチャまとめ「30 Attractive and Useful Ash Texture」 何枚かの写真を合成することで、表現の難しい世界観を完成させられることも多く、合成にぴったりのテクスチャをお探しの方も多いのではないでしょうか?そんな中今回紹介するのが、さまざまな世界観が表現できる灰テクスチャまとめ「30 Attractive and Useful Ash Texture」です。 Ashen Texture 1 by ~PariahRisingSTOCKS on deviantART まだ火種が残っているシーンから、地層のように固まっているシーンまで、さまざまな灰のテクスチャが紹介されています。中でも気になったものをいくつかピックアップしたので、下記よりご覧ください。 詳しくは以下 ■Ash Texture 2 b
開発者が知っておくべき、ドキュメント・データベースの基礎:特集:MongoDBで理解する「ドキュメント・データベース」の世界(前編)(1/3 ページ) ドキュメント・データベースの最大の特長は、「パフォーマンス、大量データ、スケーラブルといった課題を克服するためのシンプルなセットを提供している」という点だ。 もちろん既存の多くのリレーショナル・データベース(以下、RDB)でも、ドキュメント・データベースが備えている特徴的な各機能に類似することが実現可能だし、さらに広範な概念や機能性を提供している。例えばシャーディング(Sharding。詳細後述)についても、既存の多くのRDBでデータの分散化が可能だ。しかしドキュメント・データベースでは、「そもそもデータ構造がこうした構成に適している」という点と、「それに付随して、考え方もシンプルである」という点が優位な特徴である。 万人が、データベースが
かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵(とも)だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート
Photoshopをもっともっと好きになる、テキストをかっこよく魅せるチュートリアルのまとめ -2012年版
2012/11/07 iPadやiPad miniで体験できる本格派クリエイティブ系ツール30選 時刻: 11/07/2012 過去にこのブログで紹介したものを中心にiPadやiPad miniで使える本格的なクリエイティブツールをまとめてみました。デスクトップ版アプリに迫る高機能なものから、マルチタッチで楽しく操作できる手軽なツールまで30種類を選んでいます。 ベクターグラフィック iDraw (1.5) カテゴリー:仕事効率化 価格:800円 開発:Indeeo, Inc. Inkpad (1.4.1) カテゴリー:仕事効率化 価格:450円 開発:Taptrix, Inc. Freeform - The Vector Drawing App (1.1) カテゴリー:仕事効率化 価格:850円 開発:Stunt Software フォントデザイン iFontMake
さて、国際社会に於ける日本人のイメージはどういった感じなのでしょうか?少なくとも日本人はこういった感じで自分たちをイメージしていると思います。 「とても謙虚」で「すこぶる真面目」、「イノベーションが苦手」で「社会や組織の変革を恐れて」いる。「老成してアイデアが欠如」しており、「現状維持」で「内向き」な「保守主義」に固まっている。「冒険しない」主義で「起業家は日陰者」、、、、、多かれ少なかれ、今の日本の閉塞的な空気に対して多くの若手起業家は半ば諦め気味にそういった(自嘲的)気分に囚われているのではないでしょうか? でも、それは本当にリアルな日本人像なのでしょうか?日本人はもはや想像力を失った既得権益者に過ぎず、世界に衝撃をもたらすような開拓者魂を持ち様が無いのでしょうか?この社会は、ただ衰退して行くだけなのでしょうか?起業家はすぐさまここから脱出するべきなのでしょうか?否。今日は百年程遡って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く