![http://www.designwalker.com/2009/01/web-layout.html](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcdb3d70ddb52956d540e8d4a4cc84442284dade/height=288;version=1;width=512/https%3A%2F%2Fwww.designwalker.com%2Fwp-content%2Fuploads%2F2017%2F12%2F01-1.gif)
生活チェックサービス「ChanTo.me」を開始しましたが、こういうサービスはモバイル端末への対応が必要という事で、iPhoneとAndroidへの対応を行いました。 さて、対応サイトを作るにはサイトの幅を狭くしてもデザインを崩れないようにすればいいかと思ったのですが、それだけではありませんでした。 AndroidとiPhoneのそれぞれのブラウザの特徴を書いておきます。 Androidの場合 縦の横幅は320pxだが、スクロールバーが出ていると幅が狭くなる。(314pxだったかな。) 最初のアクセスした段階では、サイトのサイズをそのまま表示する。 縦と横を切り替えても、幅が広がるだけ。 iPhoneの場合 縦の横幅は320pxで、スクロールバーには影響されない。 最初のアクセスした段階では、勝手に縮小して表示するが、METAタグの指定で設定可能。 縦と横を切り替えた場合の表示サイズの操作
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう?ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は?って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容(だと良いな)! じゃあまずは最初に確認しておきたい基本的なことか
プラットフォームが多様化し、設計に求められるレベルが上がる中、特にWebで重要になってくるものの1つが「インタラクション設計」 従来のHTML+CSS主体の画面から、振る舞い(Behavior)を含む設計へとレベルアッップすることで、様々な表現が可能になります。また、ブラウザー等の進化もそれを後押ししています。 その時に非常に役に立つ、”インビテーション”という考え方を少々書いてみたいと思います。 インビテーションを、意識的に仕掛ける 最初に、デザイニング・ウェブインターフェースに定義があるので引用、と。 インビテーションとは、ユーザをインタラクションへと誘導するためのプロンプト・合図のことだ。 そのインターフェースで次に起こることをさりげなく示す、状況に応じたツールチップや視覚的アフォーダンスが用いられることが多い。 判りやすいところで言うと、クリックできるところに矢印がパカパカ点滅して
25 Adobe Photoshop actions for a graphic designer toolbox | reADactor 高度な画像編集が一瞬でできてしまうPhotoshopアクションが25種類紹介されてます。 アクションでここまで出来ちゃうのかというアクション集で、覚えておくと結構楽が出来そうです。 複数のレイヤーをカバーフローみたいに並べて次のように加工してくれるアクション CDカバーを立体的にしてくれるアクション ペーパーバック風にしてくれるアクション DVDケースにしてくれるアクション 2Dのパッケージ画像を立体的でリフレクションのかかった3D画像にしてくれるアクション 虫眼鏡で拡大する効果を得られるアクション 立体的なパネルに加工してくれるアクション キャンバスから飛び出した風の画像を作成できるアクション すべて無料というわけではありませんが、安価に高度な加工が
Adobeさんが、クロスブラウザ表示テストサービス BrowserLabを開始したので使ってみました。 https://browserlab.adobe.com/index.html このサービスを使うと、以下のブラウザでの表示テストが可能です。 Windows XP Firefox 2.0(2.0.0.18) Firefox 3.0(3.0.13) Firefox 3.05(3.5.3) Internet Explorer 6.0(6.0.3790.3959) Internet Explorer 7.0(7.0.5730) Internet Explorer 8.0(8.0.6001.18702) Chrome 3.0(3.0.195.27) Mac OS X Safari 3.0(3.2.3) Safari 4.0(4.0.3) Firefox 2.0(2.0.0.18) Firefo
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能(Commercial use)なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約(Terms of Use等)をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真 商用サイトでも利用できるロイヤリティフリー、パブリッ
いまからでも遅くない! ケータイデザインの基礎固め:一撃デザインの種明かし(6)(1/2 ページ) 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった! ケータイデザインの基礎の基礎 ケータイの画面サイズを考える! 一般的な画面サイズはQVGA(縦320px×横240px)ですが、最近ではQVGAワイド(
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
Application (11) Art & Culture (250) Art Gallery (133) Big Background Image (60) Big Image (43) Big Text (20) Bold (40) Bootstrap (4) Colorful (86) Company (25) Corporate (8) Creative Agency (100) Dark (21) Design Gallery (175) Design Studio (34) Ecommerce (26) Flat UI (17) Ghost (1) Graphic Design (70) Grid (62) Hero Video (1) HTML (13) Illustration (8) Image Gallery (9) Journals / Blogs (143) La
◆ セッション管理 PHP4.0 から標準でサポートされているセッション管理機能の目的は、多数のユーザがアクセスする Webアプリケーションで、1人1人のユーザを区別することにあります。 クッキーを利用する方法もありますが、セッション管理を使うほうが、はるかに楽な開発が可能になります。 セッション管理の仕組みは、各ユーザの固有の IDをクッキーや URI への埋め込みで保存し、セッションIDを各ページで共有することによって、ユーザを判別することができるようになっています。この節では、セッション管理の仕組みについて解説します。 ■ セッション管理の必要性 Webデータのやり取りは、クライアント側のユーザエージェントと HTTPプロトコルが使われます。HTTPは、1回のリクエスト(要求)とレスポンス(応答)の間に、「接続→通信→切断」という一連の処理が行われます。 つまり、ページを移動するたび
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト/リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
Howdy! Welcome to our vaping tribe. We are a group of American Indians who take a keek interest in vaping. For many years, our people have suffered under the harmful health effects of tobacco cigarettes. We are now pushing for everyone to start vaping, as some studies have shown that it is slightly less dangerous than tobacco itself. Our tribe recognizes that not all vaping manufacturers are creat
Webサイトのロゴをカッコよく作りたい。そんなときにはやはり、ロゴデザインのベースとなるフォントが重要だ。個性豊かな質の高いフォントを使えば、その分、ロゴやWebサイトのクオリティも大きくアップする。ただひとつ困るのは、星の数ほどあるフォントをどう選べばいいか、ということだろう。そこで今回は、“ロゴに使えるフォント”をテーマに、効率よくフォントを探せるツールやサイトをまとめて紹介しよう。 約1万種類のフォントをダウンロードできる「FontSpace」 とにかく1ヵ所でなるべくたくさんのフォントを見てみたいときには、フォント制作者のコミュニティサイト「FontSpace」がオススメだ。フリーフォントを中心に、約1万種類の欧文フォントが公開されている。登録数は毎日どんどん増加しており、訪れてみるたびに新しいフォントとの出会いが期待できる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く