レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

2012/11/01 877 users レスポンシブWebデザイン テーブル 小技 table 具合

レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。 tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist... 続きを読む

Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice

2012/09/04 1012 users 解像度 ppi Webサイト制作 dpi ビットマップ画像

スマホやRetinaディスプレイが出てきてから、サイト制作の時に解像度に関することで時々混乱することがあるので整理してみました。 解像度とppiとdpi 解像度はビットマップ画像における画像密度のことで、一般に1インチ(25.4mm)をいくつに分けるかによって数字で表します。 単位はdpi、またはppiを用いられることが多いです。 よくディスプレイの解像度を1024×768ピクセルという総画素数で... 続きを読む

私がWebサイトの配色を決める時の流れ │ Design Spice

2012/07/20 864 users 配色 形容詞 誤差 Webサイト 高級

ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です... 続きを読む

» レスポンシブWebデザインの画像問題の解決法5種│Design Spice

2012/06/13 974 users レスポンシブWebデザイン jQuery 画像問題 回線速度

レスポンシブWebデザインの問題の一つに、PCと同じ画像を回線速度の低いモバイルデバイスでも表示させるのか、といった点が挙げられます。そこでこの問題に対する解決策を調べてみました。 Javascriptを使う Javascript（jQuery）を使う方法です。 幾つもの手法が発表されてますが動作も様々です。 Responsive-Images Responsive Images 最初に小さい画像... 続きを読む

無料のベクター素材を提供しているサイト40選 | Design Spice

2012/02/24 561 users ベクター素材 Photoshop 無料 手間 整理

先日の無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45に続き、 ベクター素材を提供しているサイトのまとめです。 やはり個人的な整理のためのまとめですが共有します。 はじめに 全てを網羅するのは逆に手間だと思うので、 この中から自分のお気に入りや使いやすいサイトを選んでそれを中心に利用することになると思います。 また、サイトによってはphotoshopの素材とベ... 続きを読む

知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト | Design Spice

2011/11/02 758 users jQuery Mobile 知識 本家本元 サイト制作 制作

このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ... 続きを読む

レスポンシブwebデザインで制作する時のポイント | Design Spice

2011/09/22 917 users レスポンシブWebデザイン Dreamweaver 復習

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つ... 続きを読む

Web制作者は知っておきたいwebサイトのレイアウト7選 | Design Spice

2011/08/31 1751 users Webサイト WEB制作者

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを... 続きを読む

私がwebサイトのラフデザインを制作する時の流れ | Design Spice

2011/06/23 1592 users ラフデザイン 独学 ターゲット Webサイト コンセプト

私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デ... 続きを読む