レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
Appleが推奨するSkeuomorphic Designとそのメリットデメリット | Design Spice
最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Designと呼ぶそうです。このSkeuomorphic Designについて書いてみました。 最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI)と呼ぶそうです。 このSkeuomorphic Designについて書いてみました。 Skeuomorphic Designとは まずskeuomorphという言葉から。 skeuomorph 語源：ギリシャ語のskeuos（容器、実装）morph（フォーム）から。 skeuomorphは、様々な目的のために用いることができます。 デ
viewportの動作検証（iPhoneのみ）
描写のプロセス initial-scaleを指定した場合 初期値補充：viewport width = 0（viewport height = 0）（それぞれ指定がない場合） 表示域を算出：表示域 = ウィンドウサイズ / initial-scale ドキュメントサイズ決定：表示域・コンテンツサイズ・viewportの中で最大の値 描写：決定したドキュメントサイズとinitial-scaleで描写 initial-scaleを指定しない場合 初期値補充：viewport width = 980px, viewport height = 1091px（それぞれ指定がない場合） ドキュメントサイズ決定：コンテンツとviewportで大きい方の値 倍率算出：ドキュメントがウィンドウ内にぴったり収まるようにinitial-scaleを計算（縦と横で大きい方のinitial-scaleを適用） 描写
viewport test
Notice: Undefined index: width in /home/users/1/tsukurito/web/design-spice.com/sample/viewport/index.php on line 191 checked="checked" />デフォルト Notice: Undefined index: width in /home/users/1/tsukurito/web/design-spice.com/sample/viewport/index.php on line 192 />device-width Notice: Undefined index: width in /home/users/1/tsukurito/web/design-spice.com/sample/viewport/index.php on line 193 />指定 (20
無料のベクター素材を提供しているサイト40選
先日の「無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45選」に続き、ベクター素材を提供しているサイトのまとめです。やはり個人的な整理のためのまとめですが共有します。 先日の無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45に続き、 ベクター素材を提供しているサイトのまとめです。 やはり個人的な整理のためのまとめですが共有します。 はじめに 全てを網羅するのは逆に手間だと思うので、 この中から自分のお気に入りや使いやすいサイトを選んでそれを中心に利用することになると思います。 また、サイトによってはphotoshopの素材とベクター素材を扱ってるサイトもあり、 無料でphotoshopのファイル・ブラシ・シェイプなどの素材を提供しているサイト45で取り上げたサイトはこちらには載せてません。 上記エントリーのサイト説明に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
