Adobe Edge Reflow CCとEdge Inspect CCでレスポンスが数分で。。。

Adobe Edge Inspect CC

Edge ReflowはPhotoshopでデザインをしてブラウザでのカンプが必要なときに役に立ちそうなソフトです。
Edge Inspect CCはライブビューができるソフトですがEdge Inspect CCについては長くなったのでこちらの記事にかきました。「Adobe Edge Inspect CCのスマホでライブプレビュー

ただ、プロが使えるか!?となるとさすがにこれでは納品できませんがカンプには最適だと思います。
Photoshopで作成したものを10分程度でレスポンス使用にしてクライアントさんへ見せることができます。「こんな感じ」程度に。
強いて言うなら、cssに特化したドリームウェーバー版みたいなソフトかな!?

さて最初に知りたいのは「どんなコードで出力されるの?」ですよね。なので文頭に書いておきます。このPhotoshopデータはこんな感じでコード変換出力されます。

使用したサンプルのサイトはこんなデザイン。
ブログのサンプル

サンプルのサイトをEdge Reflowで読み込みして出力したコードはこちら。

結果.Adobe Edge Reflow CCで出力したコード

HTMLファイル


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="boilerplate.css">
<link rel="stylesheet" href="page.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="header-box" class="clearfix">
<div id="header-line" class="clearfix">
<div id="background" class="clearfix">
<div id="header-box-left" class="clearfix">
<p id="header-p"> ブログメインタイトル </p>
<p id="header-h1"> ブログの説明文章 </p>
<div id="search-bg" class="clearfix">
<div id="長方形_1" class="clearfix"> <img id="searching" src="img/searching.png" class="image" /> </div>
</div>
</div>
<div id="header-box-right" class="clearfix">
<div id="header-main-img" class="clearfix"> </div>
</div>
<div id="nav-box" class="clearfix">
<div id="nav-ul" class="clearfix">
<div id="nav-ul-li-btn-menu2" class="clearfix"> </div>
<div id="nav-ul-li-btn-menu3" class="clearfix"> </div>
<div id="nav-ul-li-btn-menu4" class="clearfix"> </div>
<div id="nav-ul-li-btn-menu1" class="clearfix"> </div>
<div id="nav-ul-li-btn-menu5" class="clearfix"> </div>
</div>
</div>
<div id="main-box" class="clearfix">
<div id="main-box-left" class="clearfix">
<div id="ctg-box-bg" class="clearfix">
<div id="ctg-box" class="clearfix"> <img id="icon_clone_copy" src="img/icon_clone_copy.png" class="image" />
<p id="プロフィール"> プロフィール </p>
</div>
</div>
<div id="sidebar-box" class="clearfix">
<div id="sidebar-box-img" class="clearfix"> </div>
<p id="私のプロフィールをここに書きます。_写真も投稿できます。"> 私のプロフィールをここに書きます。<br />
写真も投稿できます。 </p>
</div>
<div id="ctg-box-bg1" class="clearfix">
<div id="ctg-box1" class="clearfix"> <img id="icon_clone_copy1" src="img/icon_clone_copy.png" class="image" />
<p id="メニュー"> メニュー </p>
</div>
</div>
<div id="post-loop-box" class="clearfix">
<div id="post-loop-box-line" class="clearfix"> <img id="icon-document" src="img/icon-document.png" class="image" />
<p id="ブログの記事のタイトルをここに_入力します。_のコピー"> ブログの記事のタイトルをここに<br />
入力します。 </p>
<div id="ctg-box-menu-post-line" class="clearfix"> </div>
<img id="icon_pin_attach_board" src="img/icon_pin_attach_board.png" class="image" />
<p id="ブログの記事のタイトルをここに_入力します。"> ブログの記事のタイトルをここに<br />
入力します。 </p>
<div id="ctg-box-menu-post-line1" class="clearfix"> </div>
<img id="icon_pin_attach_board1" src="img/icon_pin_attach_board.png" class="image" />
<div id="ctg-box-menu-post-line2" class="clearfix"> </div>
<img id="icon_pin_attach_board2" src="img/icon_pin_attach_board.png" class="image" />
<div id="ctg-box-menu-post-line3" class="clearfix"> </div>
<img id="icon_pin_attach_board3" src="img/icon_pin_attach_board.png" class="image" />
<div id="ctg-box-menu-post-line4" class="clearfix"> </div>
<img id="icon-pinboard" src="img/icon-pinboard.png" class="image" /> </div>
</div>
<div id="ctg-box-bg2" class="clearfix">
<div id="ctg-box2" class="clearfix"> <img id="icon_clone_copy2" src="img/icon_clone_copy.png" class="image" />
<p id="メニュー1"> メニュー </p>
</div>
</div>
</div>
<div id="main-box-right" class="clearfix">
<div id="contents-box-bg" class="clearfix">
<div id="contents-title-bg" class="clearfix">
<div id="icon" class="clearfix"> </div>
<p id="コンテンツのタイトルはここに入る。"> コンテンツのタイトルはここに入る。 </p>
</div>
</div>
</div>
<div id="post-loop-box1" class="clearfix">
<div id="post-loop-box-line1" class="clearfix"> <img id="icon-document1" src="img/icon-document.png" class="image" />
<p id="ブログの記事のタイトルをここに_入力します。_のコピー1"> ブログの記事のタイトルをここに<br />
入力します。 </p>
<div id="ctg-box-menu-post-line5" class="clearfix"> </div>
<img id="icon_pin_attach_board4" src="img/icon_pin_attach_board.png" class="image" />
<p id="ブログの記事のタイトルをここに_入力します。1"> ブログの記事のタイトルをここに<br />
入力します。 </p>
</div>
</div>
</div>
<div id="footer-line-bg" class="clearfix"> </div>
<div id="footer-area-bg" class="clearfix"> <img id="icon-footer-list" src="img/icon-footer-list.png" class="image" />
<p id="フッターメニュー"> フッターメニュー </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSSファイル

.primaryContainer { height: auto; margin-left: auto; margin-right: auto; min-height: 100%; width: 100%; }

#icon-footer-list { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 8; margin-top: 26px; margin-left: 5.3125%; clear: none; }

#main-box-right { float: left; height: 1180px; width: 64.583333%; background-color: rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 4; margin-top: 10px; margin-left: 2.083333%; clear: none; }

#フッターメニュー { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(10, 124, 212); font-style: normal; letter-spacing: 0.04em; text-decoration: underline; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 9; margin-top: 24px; margin-left: 0.6233724%; clear: none; }

#main-box-left { float: left; height: 1180px; width: 31.25%; background-color: rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 3; margin-top: 10px; margin-left: 1.041667%; clear: none; }

#footer-area-bg { float: left; height: 150px; width: 100%; background-color: rgb(46, 151, 216); background-image:-webkit-linear-gradient(0deg, rgb(255, 255, 255) 19%, rgb(235, 235, 235) 100%); background-image: linear-gradient(90deg, rgb(255, 255, 255) 19%, rgb(235, 235, 235) 100%); position: relative; top: 0px; left: 0px; z-index: 7; }

#footer-line-bg { float: left; height: 5px; width: 100%; background-color: rgb(46, 151, 216); position: relative; top: 0px; left: 0px; z-index: 6; margin-top: 36px; margin-left: 0%; clear: both; }

#コンテンツのタイトルはここに入る。 { float: left; font-size: 1.375em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(255, 255, 255); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic Std'; text-shadow: rgba(0, 0, 0, 0.74902) 0px 2px 2px; position: relative; top: 0px; left: 0px; z-index: 81; margin-top: 24px; margin-left: 2.306034%; clear: none; }

#contents-box-bg { float: left; height: 800px; width: 100%; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; position: relative; top: 0px; left: 0px; z-index: 77; margin-top: 0px; margin-left: 0.00252016%; clear: none; }

#main-box { float: left; height: 1200px; width: 100%; background-color: rgb(229, 229, 229); position: relative; top: 0px; left: 0px; z-index: 2; margin-top: 8px; margin-left: 0%; clear: both; }

#icon { float: left; height: 28px; width: 4.827586%; background-color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 80; margin-top: 20.125px; margin-left: 2.351832%; clear: none; }

#contents-title-bg { float: left; height: 70px; width: 93.548387%; background-color: rgb(46, 151, 216); background-image:-webkit-linear-gradient(0deg, rgb(28, 112, 164) 0%, rgb(37, 146, 213) 80%); background-image: linear-gradient(90deg, rgb(28, 112, 164) 0%, rgb(37, 146, 213) 80%); position: relative; top: 0px; left: 0px; z-index: 79; margin-top: 20px; margin-left: 3.225806%; clear: none; }

#ブログの記事のタイトルをここに_入力します。1 { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 22px; color: rgb(67, 67, 67); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 17; margin-top: 14.5px; margin-left: 4.545455%; clear: none; }

#メニュー1 { float: left; font-size: 1.5em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(255, 255, 255); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 29; margin-top: 19px; margin-left: 5.21291%; clear: none; }

#nav-ul-li-btn-menu5 { float: left; height: 52px; width: 18.75%; background-color: rgb(240, 237, 220); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border: 1px solid rgb(215, 201, 175); -webkit-box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); background-image: linear-gradient(90deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); position: relative; top: 0px; left: 0px; z-index: 91; margin-top: 0px; margin-left: 1.145833%; clear: none; }

#icon_pin_attach_board4 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 18; margin-top: 11.5px; margin-left: 3.846154%; clear: both; }

#ブログの記事のタイトルをここに_入力します。_のコピー1 { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 22px; color: rgb(67, 67, 67); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 21; margin-top: 20px; margin-left: 3.846154%; clear: none; }

#post-loop-box-line1 { float: left; height: 150px; width: 96.969697%; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; border: 1px dashed rgb(149, 194, 222); position: relative; top: 0px; left: 0px; z-index: 14; margin-top: 5px; margin-left: 1.683502%; clear: none; }

#icon_clone_copy2 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 28; margin-top: 18px; margin-left: 5.554651%; clear: none; }

#nav-ul-li-btn-menu1 { float: left; height: 52px; width: 18.75%; background-color: rgb(240, 237, 220); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border: 1px solid rgb(215, 201, 175); -webkit-box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); background-image: linear-gradient(90deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); position: relative; top: 0px; left: 0px; z-index: 87; margin-top: 0px; margin-left: 1.041667%; clear: none; }

#ctg-box-menu-post-line5 { float: left; height: 1px; width: 90.996503%; border: 1px dashed rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 16; margin-top: 10.5px; margin-left: 4.501748%; clear: both; }

#icon-document1 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 22; margin-top: 12px; margin-left: 2.797203%; clear: none; }

#post-loop-box1 { float: left; height: 160px; width: 30.9375%; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; position: relative; top: 0px; left: 0px; z-index: 13; margin-top: 1035px; margin-left: -97.915039%; clear: none; }

#ctg-box2 { float: left; height: 60px; width: 96.015625%; background-color: rgb(46, 151, 216); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px, rgba(255, 255, 255, 0.74902) 1px 1px inset; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px, rgba(255, 255, 255, 0.74902) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(24, 116, 167) 0%, rgb(83, 172, 216) 100%); background-image: linear-gradient(90deg, rgb(24, 116, 167) 0%, rgb(83, 172, 216) 100%); position: relative; top: 0px; left: 0px; z-index: 27; margin-top: 5px; margin-left: 2%; clear: none; }

#icon-pinboard { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 36; margin-top: 11.484375px; margin-left: 3.846154%; clear: both; }

#メニュー { float: left; font-size: 1.5em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(255, 255, 255); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 64; margin-top: 19px; margin-left: 5.21291%; clear: none; }

#私のプロフィールをここに書きます。_写真も投稿できます。 { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 22px; color: rgb(67, 67, 67); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 67; margin-top: 10px; margin-left: 6.666667%; clear: both; }

#nav-ul-li-btn-menu4 { float: left; height: 52px; width: 18.75%; background-color: rgb(240, 237, 220); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border: 1px solid rgb(215, 201, 175); -webkit-box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); background-image: linear-gradient(90deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); position: relative; top: 0px; left: 0px; z-index: 90; margin-top: 0px; margin-left: 1.044922%; clear: none; }

#background { float: left; width: 100%; height: 5000px; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 1; background-image:url("img/background.png"); -webkit-background-size: 100%; background-size: 100%; }

#ctg-box-bg2 { float: left; height: 70px; width: 100%; background-color: rgb(255, 255, 255); border-top-left-radius: 1.98675px; border-top-right-radius: 1.98675px; border-bottom-right-radius: 1.98675px; border-bottom-left-radius: 1.98675px; position: relative; top: 0px; left: 0px; z-index: 26; margin-top: 25px; margin-left: 0%; clear: both; }

#ctg-box-menu-post-line4 { float: left; height: 2px; width: 90.996503%; border: 1px dashed rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 35; margin-top: 51.515625px; margin-left: 4.501748%; clear: both; }

#icon_pin_attach_board3 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 40; margin-top: 10.984375px; margin-left: 3.846154%; clear: both; }

#icon_clone_copy1 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 63; margin-top: 18px; margin-left: 5.554651%; clear: none; }

#sidebar-box-img { float: left; height: 129px; width: 90%; background-color: rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 68; margin-top: 15px; margin-left: 5%; clear: none; }

#nav-ul-li-btn-menu3 { float: left; height: 52px; width: 18.75%; background-color: rgb(240, 237, 220); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border: 1px solid rgb(215, 201, 175); -webkit-box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); background-image: linear-gradient(90deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); position: relative; top: 0px; left: 0px; z-index: 89; margin-top: 0px; margin-left: 1.040039%; clear: none; }

#searching { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 103; margin-top: 7px; margin-left: 83.214286%; clear: none; }

#header-h1 { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(81, 81, 81); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 99; margin-top: 14px; margin-left: 11.304348%; clear: both; }

#ctg-box-menu-post-line3 { float: left; height: 1px; width: 90.996503%; border: 1px dashed rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 39; margin-top: 51.015625px; margin-left: 4.501748%; clear: both; }

#icon_pin_attach_board2 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 44; margin-top: 11.484375px; margin-left: 3.846154%; clear: both; }

#ctg-box1 { float: left; height: 60px; width: 96.015625%; background-color: rgb(46, 151, 216); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px, rgba(255, 255, 255, 0.74902) 1px 1px inset; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px, rgba(255, 255, 255, 0.74902) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(24, 116, 167) 0%, rgb(83, 172, 216) 100%); background-image: linear-gradient(90deg, rgb(24, 116, 167) 0%, rgb(83, 172, 216) 100%); position: relative; top: 0px; left: 0px; z-index: 62; margin-top: 5px; margin-left: 2%; clear: none; }

#sidebar-box { float: left; height: 250px; width: 100%; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; position: relative; top: 0px; left: 0px; z-index: 66; margin-top: 10px; margin-left: 0%; clear: both; }

#nav-ul-li-btn-menu2 { float: left; height: 52px; width: 18.75%; background-color: rgb(240, 237, 220); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border: 1px solid rgb(215, 201, 175); -webkit-box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; box-shadow: rgba(255, 255, 255, 0.6) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); background-image: linear-gradient(90deg, rgb(223, 217, 195) 0%, rgb(244, 241, 224) 100%); position: relative; top: 0px; left: 0px; z-index: 88; margin-top: 0px; margin-left: 1.041667%; clear: none; }

#長方形_1 { float: left; height: 40px; width: 93.333333%; background-color: rgb(255, 255, 255); position: relative; top: 0px; left: 0px; z-index: 102; margin-top: 9px; margin-left: 3.328125%; clear: none; }

#header-p { float: left; font-size: 1.5em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(80, 80, 80); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 98; margin-top: 29px; margin-left: 6.735734%; clear: none; }

#ctg-box-menu-post-line2 { float: left; height: 0.9690000000000509px; width: 90.996503%; border: 1px dashed rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 43; margin-top: 51.515625px; margin-left: 4.501748%; clear: both; }

#icon_pin_attach_board1 { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 48; margin-top: 11px; margin-left: 3.846154%; clear: both; }

#ctg-box-bg1 { float: left; height: 70px; width: 100%; background-color: rgb(255, 255, 255); border-top-left-radius: 1.98675px; border-top-right-radius: 1.98675px; border-bottom-right-radius: 1.98675px; border-bottom-left-radius: 1.98675px; position: relative; top: 0px; left: 0px; z-index: 61; margin-top: 25px; margin-left: 0%; clear: both; }

#nav-ul { float: left; height: 52px; width: 100%; background-color: rgb(229, 229, 229); position: relative; top: 0px; left: 0px; z-index: 86; margin-top: 10px; margin-left: 0%; clear: none; }

#search-bg { float: left; height: 60px; width: 65.217391%; background-color: rgb(240, 237, 220); position: relative; top: 0px; left: 0px; z-index: 101; margin-top: 48px; margin-left: 7.387908%; clear: both; }

#header-main-img { float: left; height: 182px; width: 87.8%; background-color: rgb(220, 220, 220); border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; position: relative; top: 0px; left: 0px; z-index: 105; margin-top: 16px; margin-left: 10.2%; clear: none; }

#ctg-box-menu-post-line1 { float: left; height: 1px; width: 90.996503%; border: 1px dashed rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 47; margin-top: 20px; margin-left: 4.501748%; clear: both; }

#ブログの記事のタイトルをここに_入力します。 { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 22px; color: rgb(67, 67, 67); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 52; margin-top: 14.5px; margin-left: 4.545455%; clear: none; }

#プロフィール { float: left; font-size: 1.5em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 1em; color: rgb(255, 255, 255); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 73; margin-top: 18px; margin-left: 5.21291%; clear: none; }

#nav-box { float: left; height: 72px; width: 100%; background-color: rgba(229, 229, 229, 0.498039); position: relative; top: 0px; left: 0px; z-index: 85; margin-top: 10px; margin-left: 0%; clear: both; }

#header-box-right { float: left; height: 215px; width: 52.083333%; background-color: rgb(229, 229, 229); position: relative; top: 0px; left: 0px; z-index: 96; margin-top: 5px; margin-left: 0%; clear: none; }

#icon_pin_attach_board { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 53; margin-top: 11.5px; margin-left: 3.846154%; clear: both; }

#ブログの記事のタイトルをここに_入力します。_のコピー { float: left; font-size: 0.875em; width: auto; height: auto; text-align: left; font-weight: normal; line-height: 22px; color: rgb(67, 67, 67); font-style: normal; letter-spacing: 0.04em; text-decoration: none; font-family: 'Hiragino Kaku Gothic ProN'; position: relative; top: 0px; left: 0px; z-index: 56; margin-top: 20px; margin-left: 3.846154%; clear: none; }

#post-loop-box-line { float: left; height: 475px; width: 96.969697%; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; border: 1px dashed rgb(149, 194, 222); position: relative; top: 0px; left: 0px; z-index: 33; margin-top: 5px; margin-left: 1.683502%; clear: none; }

#icon_clone_copy { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 72; margin-top: 18px; margin-left: 5.554651%; clear: none; }

#header-box-left { float: left; height: 215px; width: 47.916667%; background-color: rgb(229, 229, 229); position: relative; top: 0px; left: 0px; z-index: 95; margin-top: 5px; margin-left: 0%; clear: none; }

#ctg-box-menu-post-line { float: left; height: 1px; width: 90.996503%; border: 1px dashed rgb(220, 220, 220); position: relative; top: 0px; left: 0px; z-index: 51; margin-top: 10.5px; margin-left: 4.501748%; clear: both; }

#icon-document { float: left; width: auto; max-width: 100%; height: auto; color: rgb(0, 0, 0); position: relative; top: 0px; left: 0px; z-index: 57; margin-top: 12px; margin-left: 2.797203%; clear: none; }

#post-loop-box { float: left; height: 485px; width: 99%; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; position: relative; top: 0px; left: 0px; z-index: 32; margin-top: 10px; margin-left: 0%; clear: both; }

#ctg-box { float: left; height: 60px; width: 96.015625%; background-color: rgb(46, 151, 216); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px, rgba(255, 255, 255, 0.74902) 1px 1px inset; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px, rgba(255, 255, 255, 0.74902) 1px 1px inset; background-image:-webkit-linear-gradient(0deg, rgb(24, 116, 167) 0%, rgb(83, 172, 216) 100%); background-image: linear-gradient(90deg, rgb(24, 116, 167) 0%, rgb(83, 172, 216) 100%); position: relative; top: 0px; left: 0px; z-index: 71; margin-top: 5px; margin-left: 2%; clear: none; }

#header-line { float: left; height: 5px; width: 100%; background-color: rgb(46, 151, 216); position: relative; top: 0px; left: 0px; z-index: 97; }

#ctg-box-bg { float: left; height: 70px; width: 100%; background-color: rgb(255, 255, 255); border-top-left-radius: 1.98675px; border-top-right-radius: 1.98675px; border-bottom-right-radius: 1.98675px; border-bottom-left-radius: 1.98675px; position: relative; top: 0px; left: 0px; z-index: 70; }

#header-box { float: left; height: 220px; width: 50%; background-color: rgb(229, 229, 229); position: relative; top: 0px; left: 0px; z-index: 94; }

出力されるコードはこんな感じです。ねっ笑
では最初からやってみますね。

1.Photoshopでカンプデータを作成します。

Photoshopで作成する際に気をつけてほしいのはレイヤー名がid属性名になりますので英語表記にしておくことです。

レイヤー名の書き方

1.とりあえず「Template-960-1.psd」の名前にして保存します。
*

2.Photoshopの「ファイル」>「生成」>「Edge Reflow プロジェクト」をクリック
Photoshopカンプデータ

そうすると同じディレクトリの中に「ファイル名+-reflow」というフォルダーが作られてその中に「.rflw」の拡張子のあるEdge Reflowのファイルが生成されます。
Edge Reflowのファイル

2.Photoshopでカンプデータを作成します。

生成されたTemplate-960-1.rflwをAdobe Edge Reflow CCで開いてみましょう。そうするとこんな感じなります。グラデーションなどもcssで変換されますが少しデザインが変わってしまいます。これはしょうがないでしょう。こういう箇所は画像にして貼り付けたほうがよさそうです。
Edge Reflow CCで開いた感じ

Adobe Edge Reflow CCでではレスポンシブにかかせないグリットがここで作れます。

私の場合は960pxで12グリットで作成しているので、Colummsには11、グリット幅は10px(2.4%)にします。左右の余白にも10pxを付けるようにします。
グリットの設定

次にレスポンシブにはかかせないブレークポイントを作成します。ここでは分かりやすくスマートフォンとパソコンだけにしておきますね。
ここではスマートフォンは640px、タブレット768px、あとはPCとした設定をしていきます。

1.まず最初にPSDファイルを開いたばかりだとwithの設定が「100%」のままなのでこのままブレークポイントを設定すると全体が縮小してしまいます。最初に全体のレイヤーのクリックして「px」に設定してください。
「px」に設定

2.画面の右側に「+」プラスのボタンがあるのでそこをクリック。
右側の「+」プラス

3.そうすると、カラーバーが表示されて横幅の数値が書かれています。バーを左右に操作できますので数値を合わせます。それを繰り返してタブレットを作成していきます。
ブレークポイントの仕方

■ 1から3までの動作がこちらです。
[fvplayer src=”http://www.yoshidablog.com/wp-content/uploads/2015/09/How-to-break-point.mov”]

3.スマホ用レスポンシブに仕上げていく。

最初にスマホからいじっていきます。Adobe Edge Reflow CCがモバイルファーストの概念をもっているのかわかりませんが最小単位からいじっていきましょう。

1.紫色のバーのスマホのブレークポイントをクリックします。
紫色のブレークポイントをクリック

2.レイアウトのsizeを「640px」にする。
「size」を640pxに編集
このままでは縮小された感じなのでここからレイヤーを操作していきます。

3.紫色のバーのスマホのブレークポイントをクリックした状態で、レイヤーを動かしていきます。Photoshopのレイヤーと同じ感じに自由に動かせますので好きな配置をして完成です。こんな感じにしました。
注意点は不要なレイヤーは削除しないでください。あくまでもCSSに書き出すので不要なレイヤは「Display:none」にして消してください。
Display:none

以上でスマホ用に完成したものはこんな感じに。
完成したもの

4.タブレット用レスポンシブに仕上げていく。

あとは残りのタブレットを仕上げて終わりです。これは簡単です。

1.青いバーの768pxに設定したタブレットのブレークポイントをクリックします。
青いブレークポイントをクリック2.レイアウトのsizeを「768px」にする。
「size」を768pxに編集

はい。これで完成です。

スマホのブレークポイントとタブレットまでの完成動作(動画)

最後にブレークポイントの箇所だけ動画にしてみました。最初に書いたようにAdobe Edge Reflowはcssのドリームウェーバー版のようなものなので、基本的なcssのことがわかれば使いこなせると思います。
[fvplayer src=”http://www.yoshidablog.com/wp-content/uploads/2015/09/How-to-break-point-of-the-smartphone.mov”]

タイトルとURLをコピーしました