body{margin:0;font-size:16px;font-family:Verdana,sans-serif;color:#333;}header{background:#f59a00;color:#fff;text-align:center;padding-top:64px;}headerh1,headerp{margin:0;}headerimg{width:280px;vertical-align:bottom;}.btn{text-decoration:none;background:#fff;color:#f59a00;display:block;width:140px;line-height:44px;margin:40pxauto48px;font-size:14px;font-weight:bold;border-radius:4px;}.btn:hover{opacity:0.9;}.featuresimg{width:100%;}.features>h1{text-align:center;padding:64px0;font-weight:normal;}.features.container{margin:032px;}.featuresp{line-height:1.8;}.featuressection{padding-bottom:64px;}.members{background:#f2f2f3;}.members>h1{text-align:center;padding:64px0;font-weight:normal;}.membersul{list-style:none;text-align:center;margin:0;padding:0;}.membersimg{width:160px;border-radius:50%;}.membersh2{font-size:20px;}.membersli{padding-bottom:64px;}.call-to-action{background:#f59a00;color:#fff;text-align:center;padding:64px0;}.call-to-actionh1{font-weight:normal;}.call-to-action.btn{margin:0auto;}footer{padding:64px0;background:#323135;color:#98969c;text-align:center;}@media(min-width:900px){header.container{display:flex;width:800px;margin:0auto;}header.info{width:60%;align-self:center;}header.pic{width:40%;}.features.container{width:800px;margin:0auto;}.featuressection{display:flex;justify-content:space-between;}.featuressection:nth-child(even){flex-direction:row-reverse;}.features.pic{width:50%;}.features.info{width:calc(50%-32px);}.membersul{width:800px;margin:0auto;display:flex;justify-content:space-between;}.membersli{width:250px;}}<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>すごいアプリ</title><linkrel="stylesheet"href="css/styles.css"><linkrel="icon"href="favicon.ico"></head><body><header><divclass="container"><divclass="info"><h1>すごいアプリ</h1><p>ウルトラすごい最高なアプリです</p><ahref=""class="btn">ダウンロード</a></div><divclass="pic"><imgsrc="img/top.png"></div></div></header><sectionclass="features"><h1>すごい特徴</h1><divclass="container"><section><divclass="pic"><imgsrc="img/feature1.png"></div><divclass="info"><h1>すごい</h1><p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p></div></section><section><divclass="pic"><imgsrc="img/feature2.png"></div><divclass="info"><h1>すごい</h1><p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p></div></section><section><divclass="pic"><imgsrc="img/feature3.png"></div><divclass="info"><h1>すごい</h1><p>とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p></div></section></div></section><sectionclass="members"><h1>メンバー紹介</h1><ul><li><imgsrc="img/member1.png"><h2>山田太郎</h2><p>がんばります。がんばります。がんばります。</p></li><li><imgsrc="img/member2.png"><h2>山田二郎</h2><p>がんばります。がんばります。がんばります。</p></li><li><imgsrc="img/member3.png"><h2>山田花子</h2><p>がんばります。がんばります。がんばります。</p></li></ul></section><sectionclass="call-to-action"><h1>いますぐダウンロードしよう</h1><ahref=""class="btn">ダウンロード</a></section><footer>
(c) dotinstall.com
</footer></body></html>デモ
http://samples.dotinstall.com/s/website_html_v4/52016/MyAwesomeApp/index.html
フレックスボックス
flexbox_cheatsheet.pdf