読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

2カラム演習 - モンサンミシェル

2カラム - モンサンミシェル

Mont-Saint-Michel | Voyage en FRANCE

フランスの旅
フランス国旗

モンサンミシェル
フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねています。レストランでは名物のオムレツを食べることができます。パリから日帰りも可能ですが、やはり1泊するのがお薦めです。日中は観光客で一杯ですが、夕方になると静かで情緒的な雰囲気に変わります。

カテゴリー
遺跡
地域
フランス北西部のノルマンディー地方
アクセス
レンヌからバスで1時間30分

世界の旅
文化・芸術・ファッション・グルメ・・・世界の旅には、様々な楽しみ方があります。
自分の個性にあったステキなフランスの旅を見つけてください。


f:id:web-lesson:20161009223027p:plain


f:id:web-lesson:20161009223112g:plain

f:id:web-lesson:20161009223131j:plain

f:id:web-lesson:20161009223124g:plain



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Mont-Saint-Michel | Voyage en FRANCE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Alegreya:900" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">

<header class="header">
<h1><img src="img/logo.gif" alt="フランスの旅"></h1>
<p><img src="img/flag.gif" alt="フランス国旗"></p>
</header>

<div class="content">
<h2>Mont-Saint-Michel</h2>

<div class="wrapper">

<main class="main">
<h3><i class="fa fa-thumbs-o-up"></i><img src="img/photo.jpg" alt ="モンサンミシェル">モンサンミシェル</h3>
<p>フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねています。レストランでは名物のオムレツを食べることができます。パリから日帰りも可能ですが、やはり1泊するのがお薦めです。日中は観光客で一杯ですが、夕方になると静かで情緒的な雰囲気に変わります。</p>
<p class="more"><a href="#"><i class="fa fa-arrow-circle-right"></i>詳細ページへ</a></p>
</main>

<aside class="aside">
<dl>
<dt>カテゴリー</dt>
<dd>遺跡</dd>
<dt>地域</dt>
<dd>フランス北西部のノルマンディー地方</dd>
<dt>アクセス</dt>
<dd>レンヌからバスで1時間30分</dd>
</dl>
</aside>

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

<article class="article">
<h2>世界の旅</h2>
<p>文化・芸術・ファッション・グルメ・・・世界の旅には、様々な楽しみ方があります。<br>
自分の個性にあったステキなフランスの旅を見つけてください。</p>
</article>

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

<footer class="footer">
<p><small>(c)Voyage en FRANCE</small></p>
</footer>

</div><!-- /.container -->
</body>
</html>


@charset "utf-8";

/* reset
--------------------------------------*/
html,body,h1,h2,h3,p,dl,dt,dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
header,footer,article,aside {
  display: block;
}

/* body
--------------------------------------*/
body {
  font-size: 16px;
  color: #333;
}

/* layout
--------------------------------------*/
.container {
  width: 840px;
  margin: 0 auto;
}
.wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}

/* header
--------------------------------------*/
.header {
  margin-top: 30px;
}
  .header h1 {
    float: left;
    margin-right: 30px;
  }
  .header p>img {
    height: 70px;
  }
  
/* content
--------------------------------------*/
.content {
  clear: both;
}
  .content>h2 {
    margin-bottom: 20px;
    padding: 9px 1em 9px 0;
    text-align: right;
    background: #32A2D6;
    font-size: 30px;
    color: #FFF;
    font-family:
      'Alegreya', serif;
  }
  .main{
    float: left;
    width: 600px;
  }
    .main>h3 {
      margin-bottom: 10px;
    }
    .main>h3>i {
      margin-right: 6px;
      color: #32A2D6;
    }
    .main>h3>img {
      float: right;
      margin-left: 20px;
    }
    .main>p {
      margin-bottom: 10px;
      line-height: 1.6;
    }
    .main>.more {
      text-align: right;
    }
    .main a {
      color: #32A2D6;
    }
    .main>.more i {
      margin-right: 6px;
    }
  .aside {
    float: right;
    width: 200px;
  }
    .aside dt {
      padding: 8px 0 6px 1em;
      background: #32A2D6;
      font-weight: bold;
      color: #FFF;
    }
    .aside dd {
      padding: 10px 1em 8px 1em;
      border: 1px solid #32A2D6;
      border-top: 0;
      font-size: 0.875em;
      line-height: 1.3;
    }
  .article {
    margin-bottom: 20px;
    padding: 20px;
    background: #F2EFEC;
    border: 1px solid #D9D6D1;
  }
    .article h2 {
      margin-bottom: 10px;
      padding: 3px 0 0 8px;
      font-size: 20px;
      color: #32A2D6;
      border-left: 12px solid #32A2D6;
    }
    .article>p {
      line-height: 1.5;
    }

/* footer
--------------------------------------*/
.footer {
  padding: 10px 0 20px 0;
  border-top: 1px dotted #AAA;
  text-align: center;
}