Tqoon web style

IMAGE

Image Resolution

固定サイズ画像

  • - ポップアップウィンドウのように大きさが変わらない画像は、Pixel値を使用します。
  • - 画像の解像度は、出力される領域と同等に製作する。例)解像度(イメージサイズ)= ポップアップウィンドウサイズ

変形(拡大・縮小)する画像

  • - レスポンシブ型のように、端末・画面サイズによって表示する大きさが変わる画像は「%値」を使用します(100%を基本)。
  • - 画像を内包する領域がCSSで幅100%の設定がされている場合、画像は実寸サイズの2倍を超えないようにします。
  • - 画像は「1024px~1280px(PC表示)」「768px(タブレット表示)」「425px~(モバイル表示)」に最適化します。
기기별 이미지 최적화 해상도
Image Extensions
  • - 拡張子(ファイル形式)は JPG / JPEG / PNG を推奨します。
  • - PNGファイル基準で、画像1枚当たり300KB未満 を推奨します。
Image Property
  • - htmlでイメージを挿入する場合、srcとaltは必ず入力します。
  • - "style"で入力するインライン属性は、メンテナンス性が損なわれるため使用しないことを推奨します。

CSSを使用して「background属性」を設定する場合は、次のような統合コードを使用する。

  • - backgrdound-image / background-color / background-size などの詳細属性を使用してもよいが、二つ以上の属性を適用する場合は「background属性」を使用して必要な値だけを入力します。
Image Arrayal
  • - 2つ以上の画像をリスト形式で表現する時は、「ul li」タグを使用します。
  • - 画像を一行に表現するときは、「li」タグに "inline-block" を指定する事を基本に記述します。
  • - PC表示基準で横一列に画像を並べる場合は、画像数は「最大5個」を基準とします。