Amazon.co.jpの商品画像は画像のURIを一部変更することで、サイズや影・回転など様々なカスタマイズが可能です。Amazonが標準で提供しているリンクでは満足できず自分でカスタマイズしたい方や、Amazon Webサービスを用いて画像を加工する場合に役立ちます。 「実践編」ではサイズの決定・サイズの調整を中心に、実際に利用するにあたって覚えておくと便利な知識を紹介・解説していきます。 Amazon商品画像のサイズ 実際にカスタマイズを始める前にAmazon商品画像のサイズについて。Amazonでは1商品に対して、「サムネイル」・「小」・「中」・「大」4種類の画像サイズを用意しています(4種類用意されていない場合もあります)。 そしてAmazonの商品画像にはサイズごとにルールがあります。それはサイズごとの最大幅です。横幅または縦幅がサイズごとの最大幅になります。具体的には下記のよう
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1: とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
Web Designer Wallのエントリーから、大きい画像を背景に使用する時のスタイルシートの3つの実装例を紹介します。 How to: CSS Large Background 一枚の画像を使用する方法 demo 実装のポイントは、使用する背景画像(background image)の端と背景色(background color)に同じ色(#f8f7e5)を使用します。 サンプルコード <textarea name="code" class="css" cols="60" rows="5"> body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table; } </textarea>
Design アイコンデザイナーになりたい人のためのPhotoshopチュートリアル15選『Want to be an Icon Designer? 15 Amazing Photoshop Icon Tutorials.』 アイコンをデザインしたい。 そんなあなたにおすすめなのが、『Want to be an Icon Designer? 15 Amazing Photoshop Icon Tutorials.』。アイコンデザイナーになりたい人のためのPhotoshopチュートリアル15選だ。 以下にご紹介。 » Traffic ConeアイコンをPhotoshopで描く方法 » 本のアイコンを作る方法 » Mac OS Xのメールアイコンのようなデザインをする方法 » Mac OS X用のアイコンを作る方法 » グラフのWebボタンを作る方法 » Photoshop CS3のアイコンを
どこかで「フォーム・ボタンのボーダーにdoubleを指定するとカッコイイぜ!」みたいなのを見つけて、1週間ほど前から使ってみてたりするわけですが、これはなかなか良い気がする。とりあえず憶えておくと即戦力になります。 doubleだとカッコイイとは言っても、実は単にdoubleにすれば良いわけではないようで、四辺のborderを別個に指定し、うまいことベベルっぽくしないとダメな感じ。 僕はシャイで口下手(エイプリルフールは過ぎたのにネタっぽい)なので、言葉では説明できないため、デフォルトのボタンからCSSのルールを増やしていってかっこよさげなボタンを作るプログレスをHTMLでまとめてみました。 borderのサイズはいろいろ試してみればわかりますが、3pxじゃないとうまいことまとまってくれません。 フォーム部品のスタイリングは困ったものなので、こういった即戦力なテクニックを憶えておくとなかな
cat888 live เว็บไซต์ของเราได้รับการรับรองว่าเป็นเว็บพนันที่มีคุณภาพเยี่ยมที่สุดในประเทศไทยสำหรับการพนันออนไลน์ เว็บพนันที่มั่นคงและปลอดภัยที่สุดสำหรับการเดิมพันออนไลน์ที่ทำการเงินอย่างมั่นคงและปลอดภัยและรับรองความเป็นส่วนตัวของคุณในการเล่นเกมพนันที่นี่. ทางเรามุ่งเน้นให้ประสบการณ์การพนันออนไลน์ที่ไม่ซ้ำซากและน่าสนุกที่สุดเลยค่ะ! cat888 หวย เมื่อคุณมีความระมัดระวังในการพนันออนไลน์ คุณจะมั่นใจได้ว่า
賢い発注はウェブサイト制作の正しい理解から こんなクライアントは嫌だ! 制作サイドのホンネから知る“成功する制作の進め方” ユーザーを引き付ける魅力ある企業サイト、思わずため息がでるキャンペーンサイトなど、ウェブでは多くの成功事例を見ることができる。しかし、外から見ると美しく見えるプロジェクトも、紆余曲折を経て達成されることがほとんどだ。スムーズに進む案件の方が少ないといってもいい。なぜこうもスムーズに進まないのか? ネットビジネスの基本であるウェブサイトの制作は、どのように進むのか、うまく進めるためにはどうしたらよいのかを、成功例と失敗例から理解していこう。 よくある4つの悩み事――制作現場には困った問題が山積みウェブサイトはメディアとしてかなり一般的になり、制作現場のコミュニケーションはスムーズになってきた感がある。しかし、それでも日々さまざまな問題に直面することが多い。ここではまず、
ソシオメディアは各種ビジネス向けデジタルプロダクトのデザイン支援を行うデザインコンサルティング会社です。業界をリードする OOUI(オブジェクト指向ユーザーインターフェース)設計、独自ガイドラインをもとにしたエクスパートレビュー、クリエイティブ組織を構築するデザインマネジメント支援など、様々な角度から御社のデザイン戦略をサポートし、デジタルトランスフォーメーションを実現します。 もっと読む 多くの方からご要望をいただいておりました OOUI メソッドの解説書『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』が、2020年6月5日、技術評論社より遂に出版されました。 オブジェクト指向ユーザーインターフェース(OOUI)とは、オブジェクト(もの、名詞)を起点としてUIを設計すること。タスク(やること、動詞)を起点としたUIに比べて劇的に使いやすくなり、開発効率も向上します。 ブ
Reuse, recycle, but don’t reinvent the wheel unless necessary. by Brian Christiansen at UI Engineering. Via. This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web. Please note that the content of these sets is not representative of all of the patterns I've captured. I tend to use tags more religiously and recommend that you look ther
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home|アバウト|イラスト|BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。(サンプルに寄ってid名とか変わりますが) <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home| About| Gallery| Blog 普通にhtmlに|を記述しているのでソースは当然下記のように。 <ul id="samp
Pulse Jam is a 16-bit styled rhythm based web game that ran as an expanding masthead on YouTube Players of Pulse Jam earn points and progress through different landscapes and levels by tapping the space bar in time to the synthesised soundtracks.
便乗質問いいですか? shotさんのやり方だと、 例挙されたページみたいにコンテンツが短ければ問題ないのですが、 もっとコンテンツが長く、スクロールバーが現れる大きさの場合、問題が出てきます。 最初に表示されたブラウザー画面の一番下にフッターが来てしまい、 スクロールすると、コンテンツと一緒にズリ上がって来ます。 「じゃあ短めのページと長いページで分けて書け」と言われるかも知れませんが、 縦600前後でスクロールバーが現れるかどうかビミョーな場合、 blogなど、includeを使ってフッターを全ページ一括挿入したい場合、 やっぱり2通り準備するのは現実的ではないです。 これを解消する、いいcssの書き方ってないでしょうか(frame、tableには頼らず)。 ちなみに、最初に白状すると、この質問はマルチです。 別BBSにて、現在も回答を募ってる最中です。2日経って
Web2.0的サイトのグラフィック表現 一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。 時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。 そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。 その昔、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く