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 プロジェクト」をクリック
そうすると同じディレクトリの中に「ファイル名+-reflow」というフォルダーが作られてその中に「.rflw」の拡張子のあるEdge Reflowのファイルが生成されます。
2.Photoshopでカンプデータを作成します。
Adobe Edge Reflow CCでではレスポンシブにかかせないグリットがここで作れます。
私の場合は960pxで12グリットで作成しているので、Colummsには11、グリット幅は10px(2.4%)にします。左右の余白にも10pxを付けるようにします。
次にレスポンシブにはかかせないブレークポイントを作成します。ここでは分かりやすくスマートフォンとパソコンだけにしておきますね。
ここではスマートフォンは640px、タブレット768px、あとはPCとした設定をしていきます。
1.まず最初にPSDファイルを開いたばかりだとwithの設定が「100%」のままなのでこのままブレークポイントを設定すると全体が縮小してしまいます。最初に全体のレイヤーのクリックして「px」に設定してください。
2.画面の右側に「+」プラスのボタンがあるのでそこをクリック。
3.そうすると、カラーバーが表示されて横幅の数値が書かれています。バーを左右に操作できますので数値を合わせます。それを繰り返してタブレットを作成していきます。
■ 1から3までの動作がこちらです。
[fvplayer src=”http://www.yoshidablog.com/wp-content/uploads/2015/09/How-to-break-point.mov”]
3.スマホ用レスポンシブに仕上げていく。
2.レイアウトのsizeを「640px」にする。
このままでは縮小された感じなのでここからレイヤーを操作していきます。
3.紫色のバーのスマホのブレークポイントをクリックした状態で、レイヤーを動かしていきます。Photoshopのレイヤーと同じ感じに自由に動かせますので好きな配置をして完成です。こんな感じにしました。
注意点は不要なレイヤーは削除しないでください。あくまでもCSSに書き出すので不要なレイヤは「Display:none」にして消してください。
以上でスマホ用に完成したものはこんな感じに。
4.タブレット用レスポンシブに仕上げていく。
2.レイアウトの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”]