レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
レスポンシブWebデザインのテストに使えるツール
Webサービス Screenqueri.es ブラウザ上で各デバイスのシミュレーションができる。 Responsive Web Design Test Tool ブラウザ上で各デバイスのシミュレーションができる。 responsivepx ブラウザ上でサイズを変更して表示確認ができる。 ish. ブラウザ上で各サイズの表示を確認できる。 Responsive Tools For Web Designer & Developers 各デバイスの表示が確認できる。操作も可能。 Responsive Roulette ブラウザ上で各サイズの表示を確認できる。 The Responsinator 各デバイスの表示が確認できる。 Juice’r 各デバイスの表示が確認できる。操作も可能。 Screenfly 各デバイスの表示が確認できる。操作も可能。 Responsive Design Testin
Facebook・Twitterなどソーシャルボタン設置方法まとめ │ Design Spice
twitter、facebook、google+1、evernote、tumblr、はてブ、mixiなど、各ソーシャルメディアやブックマークに共有するボタン設置方法をまとめてみました。 このブログはwordpressで構築しているのでプラグインを使用すれば簡単なのですが、他サイトなどにも使うことを想定した設置方法です。 備忘録エントリー。 twitter ツイートボタン facebook いいねボタン google+1ボタン evernote サイトメモリーボタン tumblr 共有ボタン はてなブックマーク mixiチェックボタン twitter ツイートボタン 1.コード取得 下記リンク先でツイートボタンのソースコードが取得できます。 Twitter / ツイートボタン ボタン ボタンの種類を選びます。 ツイート内テキスト ツイートに含まれるテキストを選択します。 ボタンが表示されるペ
DreamweaverとWordPressを連携させてテーマを編集する方法
dreamweaverCS5からはWordPress（他にも一部のCMS）との連携が更に強化されました。今までは特に連携させずテーマ編集をしてたのですが、作業効率が上がるかもと試しで設定をしてみました。 dreamweaverCS5からはWordPress（他にも一部のCMS）との連携が更に強化されました。 今までは特に連携させずテーマ編集をしてたのですが、 作業効率が上がるかもと試しで設定をしてみました。 MAMPインストール WordPressインストール DreamweaverとWordPressの連携 WordPressテーマの編集 WordPressのコードヒント はじめに 私の環境はMacで、DreamweaverCS5を使用してます。 ただしwindows環境でもファイルのパス等が変わるくらいで設定方法は変わらないと思います。 また私はMAMPの環境設定でDocument R
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
Evernoteのクリエイティブディレクターが語るブランドとデザイン・UI・UX
Evernote クリエイティブディレクター Gabe氏によるデザイントーク「シリコンバレー流UI/UX/Brand Development」に参加してきました。非常に面白い話しが聞けましたのでその内容をまとめました。 先日Evernote クリエイティブディレクター Gabe氏によるデザイントーク「シリコンバレー流UI/UX/Brand Development」に参加してきました。 普段聞くことのできない貴重な話が聞けました。 始めに このエントリーはセミナーで取ったメモを元に僕なりにまとめています。 Gabe Campodonico氏の発言の詳細は安藤日記さんがまとめられてたのでそちらをご覧ください。 安藤日記 Gabe Campodonico氏 Gabe Campodonico氏は、現在Evernoteのクリエイティブディレクターです。 その経歴はポスターや本などのグラフィックデザイ
「Webデザイン」とはなにか？じっくり考えてみた（2012年）
年末年始は何かと振り返ったり考えたりするものです。 昨年後半から「webデザイン」について考えており、自分なりに出した考えを書いてみます。 タイトルに2012年を入れたのは時間と共にwebのあり方や自分の考えも変わってくることが予想されるからです。 年末年始は何かと振り返ったり考えたりするものです。 昨年後半から「webデザイン」について考えており、 自分なりに出した考えを書いてみます。 またタイトルに2012年を入れたのは 時間と共にwebのあり方や自分の考えも変わってくるので、 "今現在の考え"であることを示すために入れてます。 はじめに この記事は僕の考え方であって、それが正解とは思いませんし異なる意見があって当然だと思います。 そのくらいwebデザインという言葉の持つ意味は多様化してると思います。 読んでくれた方が「webデザイン」について考える一つのきっかけになったら良いなと、
「Webクリエイターの誇り」CSS Nite in Vol.60のまとめと雑感
先日CSS Nite in Ginza, Vol.60「Web Creators Pride2011」に参加してきました。 webのセミナーというと技術や制作などの話が多いのですが、 今回はwebクリエイターのあり方や志など内面的な内容でした。 この様な話を聞ける機会は滅多にないので貴重な話を聞けました。 先日CSS Nite in Ginza, Vol.60「Web Creators Pride2011」に参加してきました。 webのセミナーというと技術や制作などの話が多いのですが、 今回はwebクリエイターのあり方や志など内面的な内容でした。 この様な話を聞ける機会は滅多にないので 貴重な体験でした。 内容をざっとまとめましたが、 僕の主観が入ってる部分もあることを予め断っておきます。 Web Creators Pride2011 CSS Nite in Ginza, Vol.60 今
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/