タグ

ブックマーク / design-spice.com (4)

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

    アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考:Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 (※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか? 情報が見つからなかったので知ってる方は教えてください) また、viewportの数値はサイト側で指定できます。 スマホ

    Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
    maekoya
    maekoya 2012/09/05
  • twitter APIとjQueryでtwitter widgetを作成する

    twitterのwidgetのデザインをカスタマイズしたいのと、リプライを表示させたくないと言う理由からtwitter APIとjQueryを使ってオリジナルのwidegetを作成しました。 当ブログでは殆どデザインしてませんが、公式のwidgetに近いデザインで作成する場合の記事にしました。 twitterのwidgetのデザインをカスタマイズしたいのと、 リプライを表示させたくないと言う理由から twitter APIとjQueryを使ってオリジナルのwidegetを 作成しました。 当ブログでは殆どデザインしてませんが、 公式のwidgetに近いデザインにする場合の制作方法を書きました。 サンプル ベースはA jQuery Twitter Ticker | Tutorialzineを参考にしてます。 また複数ユーザーのツイートを表示したい場合は上記サイトが参考になります。 ソース <

    twitter APIとjQueryでtwitter widgetを作成する
  • https://design-spice.com/2012/06/13/responsive-web-design-image/

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

    先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 (一部の図はセミナーの資料を元に作成してます。) 始めに:スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ(0からスマートフォンサイト用に構築) jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ

    レスポンシブwebデザインで制作する時のポイント
    maekoya
    maekoya 2012/05/06
  • 1