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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

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>モンサンミシェル | フランスの旅</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 lang="en">Mont-Saint-Michel</h1>
<p class="logo"><img src="img/logo.gif" alt="フランスの旅"><img src="img/flag.gif" alt="フランス国旗" class="flag"></p>
</div><!-- /#header -->
<div id="wrapper">
<div id="main">
<h2><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>モンサンミシェル</h2>
<p>フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねています。レストランでは名物のオムレツを食べることができます。パリから日帰りも可能ですが、やはり1泊するのがお薦めです。日中は観光客で一杯ですが、夕方になると静かで情緒的な雰囲気に変わります。</p>
</div>
<div id="sub">
<dl>
<dt>カテゴリー</dt>
<dd>遺跡</dd>
<dt>地域</dt>
<dd>フランス北西部のノルマンディー地方</dd>
<dt>アクセス</dt>
<dd>レンヌからバスで1時間30分</dd>
</dl>
</div>
</div><!-- /#wrapper -->
<div id="footer">
<h2>世界の旅</h2>
<p>文化・芸術・ファッション・グルメ・・・世界の旅には、様々な楽しみ方があります。<br>
自分の個性にあったステキなフランスの旅を見つけてください。</p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>

Font Awesomeを設定

www.bootstrapcdn.com


f:id:web-0818:20161102185939j:plain


文書構造と視覚配置が違う場合の処理

  1. ネガティブマージンでずらす(#header内での処理)
  2. positionを使う
ネガティブマージンを使った場合
@charset "UTF-8";

html, body, h1, h2, p, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  border: none;
  vertical-align: bottom;
}

body {
  background-color: #FFF;
  color: #333;
  font-size: 16px;
}

#container {
  width: 900px;
  margin: 0 auto;
  background-color: #FFF;
}
#header {
  height: 60px;
  margin-bottom: 20px;
}
#header>h1 {
  margin-top: 100px;
  padding: 10px 20px;
  background-color: #31A2D6;
  color: #FFF;
  text-align: right;
  font-family: "Times New Roman", Times, serif;
}
#header>p.logo {
  margin-top: -140px;
}
.flag {
  width: 100px;
  margin-left: 30px;
  vertical-align: top;
}
#wrapper {
  overflow: hidden;
}

#main {
  float: left;
  width: 330px;
  height: 400px;
  padding-right: 280px;
  background: url(img/michel.jpg) no-repeat right top;
}
#main>h2 {
  margin-bottom: 10px;
  color: #666;
}
#main>h2>i {
  margin-right: 5px;
  color: #31A2D6;
}
#main>p {
  line-height: 1.6;
}
#sub {
  float: right;
  width: 260px;
}
#sub dt {
  padding-left: 10px;
  background-color: #31A2D6;
  color: #FFF;
  line-height: 30px;
  border: 1px solid #31A2D6;
}
#sub dd {
  padding: 12px 10px 10px 26px;
  line-height: 1.2;
  border: 1px solid #31A2D6;
}
#footer {
  padding: 16px 20px;
  background-color: #F2EFEC;
  border: 1px dotted #969286;
}
#footer>h2 {
  margin-bottom: 8px;
  padding-left: 8px;
  color: #31A2D6;
  font-size: 20px;
  border-left: 10px solid #31A2D6;
  line-height: 1.2;
}
#footer>p {
  line-height: 1.5;
}
positionを使った場合
@charset "UTF-8";

html, body, h1, h2, p, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  border: none;
  vertical-align: bottom;
}

body {
  background-color: #FFF;
  color: #333;
  font-size: 16px;
}

#container {
  width: 900px;
  margin: 0 auto;
  background-color: #FFF;
}
#header {
  height: 60px;
  margin-bottom: 20px;
  position: relative;
}
#header>h1 {
  margin-top: 100px;
  padding: 10px 20px;
  background-color: #31A2D6;
  color: #FFF;
  text-align: right;
  font-family: "Times New Roman", Times, serif;
}
#header>p.logo {
  position: absolute;
  top: -85px;
  left: 0;
}
.flag {
  width: 100px;
  margin-left: 30px;
  vertical-align: top;
}
#wrapper {
  overflow: hidden;
}

#main {
  float: left;
  width: 330px;
  height: 400px;
  padding-right: 280px;
  background: url(img/michel.jpg) no-repeat right top;
}
#main>h2 {
  margin-bottom: 10px;
  color: #666;
}
#main>h2>i {
  margin-right: 5px;
  color: #31A2D6;
}
#main>p {
  line-height: 1.6;
}
#sub {
  float: right;
  width: 260px;
}
#sub dt {
  padding-left: 10px;
  background-color: #31A2D6;
  color: #FFF;
  line-height: 30px;
  border: 1px solid #31A2D6;
}
#sub dd {
  padding: 12px 10px 10px 26px;
  line-height: 1.2;
  border: 1px solid #31A2D6;
}
#footer {
  padding: 16px 20px;
  background-color: #F2EFEC;
  border: 1px dotted #969286;
}
#footer>h2 {
  margin-bottom: 8px;
  padding-left: 8px;
  color: #31A2D6;
  font-size: 20px;
  border-left: 10px solid #31A2D6;
  line-height: 1.2;
}
#footer>p {
  line-height: 1.5;
}