タグ

ブックマーク / www.u-ziq.com (6)

  • スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック

    スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 2011年8月31日 スマートフォンでは機種によって解像度がことなるのは周知のとおり。 100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。 スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。 /* devicePixelRatio=1(iPhone3~3GS、低解像度Android端末)とdevicePixelRatio未対応ブラウザ */ .className { width: 100px; height: 100px; backgr

    スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック
  • スマートフォン向けサイトの作り方 | ユージック

    スマートフォン向けサイトの作り方 2011年1月22日 iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn

    スマートフォン向けサイトの作り方 | ユージック
    kiyokichi
    kiyokichi 2012/03/01
    シミュレーターの紹介あり。特にiPhone・Android両方に対応させるためのハック的な記載はなし。
  • MT5で中・大規模サイト開発するためのシステム設計図 | ユージック

    MT5で中・大規模サイト開発するためのシステム設計図 2010年2月4日 MT5の機能をフルに活用して100ページ以上、4階層以上のサイト構築の際のシステム設計図をまとめてみました。 要件定義 100ページ以上 サイト構造は4階層まである 各階層にインデックスページを用意する インデックスページも含めて出来る範囲クライアントが編集できるようにする カテゴリーやフォルダ、ページを後からでも追加できるようにする PCサイトと連動したモバイルサイトも自動構築で作成する 「サイト」だけで構築する際のハードルが高い MT5からは大元である「サイト」を作ってから「サイト」と連動した「ブログ」を作るという手順になります。 「サイト」だけでもMTIfのような分岐をたくみに使うことで4階層まで対応したサイト設計は可能になりますが、多々問題点が発生してしまいます。 問題点 テンプレートの設計が複雑になってしま

    MT5で中・大規模サイト開発するためのシステム設計図 | ユージック
    kiyokichi
    kiyokichi 2010/07/29
     ディレクトリマップ簡易図がすてき
  • FireFoxのスクロールバー分のズレをとるCSS

    FireFoxのスクロールバー分のズレをとるCSS 2006年9月26日 FireFoxで表示したときページが縦方向にきっちり収まっているとき、スクロールバーの分だけスクロール時で表示されている時と比べてズレてしまいます。 デザイン自体には問題はありませんが、コンテンツが縦にきっちり収まっているページからコンテンツの長いページにページ移動する際にカクっとズレの動きが生じてしまいます。 な~んか気持ち悪いなぁと思ったときは body { overflow-y:scroll; } とするとページ移動の際のズレの動きがなくなります。 しかし、IE6、IE7ではブラウザ自体のスクロールバーとは別にもうひとつ内側にスクロールバーができてしまいます。 そこで対処法としてIE6用CSSハックの*htmlとIE7用CSSハックの*+htmlを利用して *html body {      /*IE6だけに適

    FireFoxのスクロールバー分のズレをとるCSS
    kiyokichi
    kiyokichi 2009/10/15
     コンテンツの高さ<ウィンドウズの高さの場合はスクロールなし、コンテンツの高さ>ウィンドウサイズの場合はスクロール出現、を「ズレ」という方がいるという真実。
  • WEBディレクションで使うIAツール | ユージック

    WEBディレクションで使うIAツール 2007年10月15日 WEBディレクションで使うマーケティング戦略や情報整理でのフェーズにあたるIA(インフォメーションアーキテクツ)で僕が使うツールをご紹介します。 WEB制作でのマーケティング戦略や情報整理といっても、そんなに特別なものは使用しておらず、僕は従来からのマーケティングツールを使用しています。 SWOT分析 これは企業の内部的要因である強み、弱みと企業の周囲を取り巻く外部的要因である機会、脅威などをまとめるマーケティングツールです。僕が使用しているのはこのSWOT分析の拡張版で、各変数のリストからそれぞれの戦略を立てる項目を作るものを使用しています。このツールはマクロ的な視点からその企業の現状を把握する際に使えます。 ポジショニング分析 企業が業界や市場においてどのような立ち位置に立っているのか(現状分析)に使えるマーケティングツール

    WEBディレクションで使うIAツール | ユージック
    kiyokichi
    kiyokichi 2008/06/04
     *ディレクション 分析 情報の整理
  • オープンソースのライセンスは商用利用できるのか? : WEBデザイン&AJAX

    オープンソースのライセンスは商用利用できるのか? 2006年8月1日 このブログでもオープンソースのAJAXライブラリをいくつか使用していますが、著作権だとかライセンスのことに関してまったくわかってない状態で使用していました。 実際、仕事で使うときになってから商用利用ができるのか、できないのかの知識が必要になって調べていました。 そこで実務で使うかもしれない主要なAJAXライブラリであるprototype.jsやMoo.fx、script.aculo.us、dojoなどのライセンス形態を調べると共に、オープンソースにありがちなライセンスの種類を調べてみました。 商用利用が可能なライセンス GPLライセンス:Linax BSDライセンス:Spry MITライセンス:Script.aculo.us、Moo.fx、Prototype Academic Free License:Dojo GPLは

    オープンソースのライセンスは商用利用できるのか? : WEBデザイン&AJAX
    kiyokichi
    kiyokichi 2008/03/06
     *ライセンス GPL 商用利用可
  • 1