WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

レスポンシブWebデザインの練習

f:id:mmmmofu:20150902203411p:plain

http://d.hatena.ne.jp/webmaster-web/20151003/p1d.hatena.ne.jp
バイルファーストでレスポンシブデザインを作成しました。

http://efu.sakura.ne.jp/web/tomato/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Cinzel:900' rel='stylesheet' type='text/css'>
<style>
article, asaide, header, footer, nav, section { display: block; }
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- -->
</head>
<body>
<div id="container">
<header class="site">
<h1><a href="#">TimeSwitch</a></h1>
</header><!-- /.site -->
<div class="box2">
  <nav class="menu">
  <ul>
  <li><a href="#">トップ</a></li>
  <li><a href="#">雑貨</a></li>
  <li><a href="#">ガジェット</a></li>
  <li><a href="#">お出掛け</a></li>
  <li><a href="#">食べ物</a></li>
  <li><a href="#">お問い合わせ</a></li>
  </ul>
  </nav><!-- /.menu -->
</div><!-- /.box2 -->

<div class="wrapper">
<div class="box3">
  <article class="content">

  <h1>もぎたてトマトを美味しく食べたい!</h1>

  <p><img src="img/tomato.jpg" alt=""></p>

  <p>もぎたてのトマトを食べたくなって、ちょっと郊外にあるトマト農家さんの直売所まで行ってきました。ここのトマトは新鮮で、美味しくて、お安いという、とってもお買い得なトマトなんです。</p>

  <p>もぎたての新鮮なトマトは、ヘタが緑色でみずみずしく、シャキッとしています。赤い実は皮がピンと張り、つるっと丸いものがいいのだとか。糖度の高いトマトは水に沈むそうですが、何でも甘ければいいというものではないので、好みの味のトマトを作る農家さんを見つけたいところです。</p>

  <p>何と言っても、もぎたてトマトは水洗いしてそのまま食べるのが一番です。暑い日に美味しいトマトにかぶりつくと、それだけで幸せになれます。水分補給もできるので一石二鳥です。</p>

  <p>もちろん、何かをつけたり、かけたりして食べるのも美味しいです。定番としては、塩、砂糖、マヨネーズ、オリーブオイルなどがおすすめ。</p>

  </article><!-- /.content -->
</div><!-- /.box3 -->

<div class="box4">
  <aside class="sidemenu">
  <h1>特集記事</h1>
  <ul>
  <li><a href="#">わかりやすい地図の読み方</a></li>
  <li><a href="#">苗から始めるトマト作り</a></li>
  <li><a href="#">料理とスマホの便利な関係</a></li>
  <li><a href="#">バッテリーを長持ちさせる技</a></li>
  </ul>
  </aside><!-- /.sidemenu -->

  <aside class="osusume">
  <h1>おすすめ記事</h1>
  <ul>
  <li><a href="#">初めてのフラワーアレンジメント</a></li>
  <li><a href="#">古い端末が出てきたので充電してみたら…</a></li>
  </ul>
  </aside><!-- /.osusume -->

  <aside class="ninki">
  <h1>人気の記事</h1>
  <ul>
  <li><a href="#">花好きにおすすめの鑑賞スポット</a></li>
  <li><a href="#">通話アプリの便利な使い方</a></li>
  <li><a href="#">森林浴&温泉を満喫するならココ!</a></li>
  <li><a href="#">世界各地の買い物袋</a></li>
  <li><a href="#">部屋を彩るカラフルな家具</a></li>
  <li><a href="#">海の中で出会ったものたち</a></li>
  </ul>
  </aside><!-- /.ninki -->

</div><!-- /.box4 -->
</div><!-- /.wrapper -->

<div class="box5">
  <footer class="copyright">
  <p>Copyright &copy; TimeSwitch</p>
  </footer><!-- /.copyright -->
</div><!-- /.box5 -->
</div><!-- /#container -->
</body>
</html>

CSS

/* reset */
@charset "utf-8";

html, body, div, h1, p, small, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    'Hiragino Kaku Gothic ProN',
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #000;
}
img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
/* font-size */
html { font-size: 62.5%; }
body { font-size: 16px; font-size:1.6rem; }
h1 { font-size: 32px; font-size: 3.2rem; }
p { font-size: 16px; font-size: 1.6rem; }
@font-face {
  font-family: MyHonoka;
  src: url('fonts/font_1_honokamin.ttf') format("truetype");
}
/* body */
body {
  background: #FFF;
}
/* layout */
#container {
  margin: 0 auto;
}
.wrapper {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* サイト名 */
.site h1 {
  font-size: 40px;
  font-family: 'Cinzel', serif;
  text-align: center;
}
/* ナビゲーション */
.menu ul {
  overflow: hidden;
  background: #75bae2;
}
.menu li {
  float: left;
  width: 100%;
}
.menu li a {
  display: block;
  text-align: center;
  padding: 15px 0;
  color: #FFF;
  font-size: 1.4rem;
  text-decoration: none;
  border-bottom: 1px solid #FFF;
  background: #75bae2;
}
.menu li:last-child a {
  border: none;
}
.menu li a:hover {
  background: #75dbe7;
}
/* article */
.content h1 {
  margin-bottom: 20px;
  font-size: 2.6rem;
  font-family: MyHonoka;
}

.content p {
  font-size: 1.4rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.content img {
  height: auto
}


/* サイドメニュー */
.sidemenu {
  margin-bottom: 30px
}
.sidemenu li a {
  display: block;
  padding: 5px;
  color: #000;
  font-size: 1.4rem;
  text-decoration: none
}

.sidemenu li a:hover {
  background-color: #eee;
}

.sidemenu h1 {
  margin-bottom: 10px;
  border-bottom: dotted 2px #dddddd;
  color: #666666;
  font-size: 1.8rem
}


/* おすすめ記事メニュー */
.osusume {
  margin-bottom: 30px
}

.osusume ul {
  list-style: none
}

.osusume li a {
  display: block;
  padding: 5px;
  color: #000;
  font-size: 14px;
  text-decoration: none
}

.osusume li a:hover {
  background-color: #eee;
}

.osusume h1 {
  margin-bottom: 10px;
  border-bottom: dotted 2px #ddd;
  color: #666;
  font-size: 18px;
}


/* 人気の記事メニュー */
.ninki li a {
  display: block;
  padding: 5px;
  color: #000;
  font-size: 14px;
  text-decoration: none;
  }

.ninki li a:hover {
  background-color: #eee;
}

.ninki h1 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: dotted 2px #ddd;
  color: #666;
  font-size: 18px;
}


/* コピーライト */
.copyright p {
  color: #666;
  font-size: 14px;
}
/* BOX5の上に区切り線を入れる */
.box5 {
  border-top: solid 1px #ddd;
  width: 90%;
  margin: 0 auto;
}


/* ボックスの上下の間隔 */
.site {
  padding-top: 8px;
  padding-bottom: 8px;
}
.box5 {
  padding-top: 15px;
  padding-bottom: 15px;
}
@media (min-width: 768px) {
.site, .menu {
  width: 90%;
  margin: 0 auto;
}
/* BOX3とBOX4を横に並べる設定 */
.site h1 {
  text-align: left;
}
.content h1 {
  font-size: 3.6rem;
}
.box3 {
  float: left;
  width: 65%;
}
.box4 {
  float: right;
  width: 30%;
}
/* BOX3とBOX4の左右の間隔 */
.menu ul li {
  width: 16.66%;
}
.menu li a {
  border-right: 1px solid #FFF;
}
.menu li:last-child a {
  border: none;
}
}

font.gloomy.jp
WEBフォントの明朝体を使用してみました。