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

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

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

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

マークアップ
@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: 10px 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: 10px;
    }
    .main>p {
      line-height: 1.6;
    }
  .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;
}




<!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>
</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>


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;
}