スマホサイトのモックアップ用ソース

お客様にスマートフォン対応サイトを、モックアップ(まだ静止画)の状態で、デザインや文章の確認していただく

データの作り方。

まず、

完成psdを画像としてjpgかpngで書き出す。

ホームページ制作をしている都合で、途中で掲載内容が削られたりしてタテの長さが余ることがあるが、

そんな時にできた余分はカットする。

photoshopで高さpixel数を図る。

画像を貼り付けるためのhtmlファイルを新規作成し、以下のように書く。

<–

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=640, intial-scale=1.0, minimum-scale=0.25,maximum-scale=10.0,user-scalable=yes”
<title>sample</title>
</head>

<body>
<img src=”ここに書き出した画像の名前.png” width=”640″ height=”測った高さ” alt=”#”>
</body>
</html>

 

–>

これで画像とhtmlファイルをサーバーにアップして、

URLをお客様にお知らせするなり、自分で確認するなり、が快適にできる。スマホで変に画像の比率がゆがんだりせず、

キチンと横幅が100%の状態にフィット。

Post Comment