２カラムレイアウト

２列に別れたレイアウトのこと

column：列、項目
row：行、レコード

実践

例

出典：01/11 2カラムレイアウト - 実践 - 求職者支援訓練12月19日開講Webサイト制作科白描

テキスト

Mont-Saint-Michel

フランスの旅フランス国旗
モンサンミシェル

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

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

世界の旅

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

<サンプル画像>

出典：01/11 2カラムレイアウト - 実践 - 求職者支援訓練12月19日開講Webサイト制作科白描

f:id:hak00810:20200423153834j:plain
※モン・サン・ミシェルの画像は、フリー画像を加工して自分で用意

解答

＜HTML＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>２カラムレイアウト 実践</title>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1><img src="img/logo.gif" alt="フランスの旅" class="logo"><img src="img/flag_f.gif" alt="フランス国旗" class="flag"></h1>
<h2>Mont-Saint-Michel</h2>
</header>
<div class="container">
<div class="wrapper">
<div class="main">
<h3><i class="far fa-thumbs-up"></i>
  モンサンミシェル<img src="img/Mont_Saint_Michel.jpg" alt="Mont-Saint-Michel" class="mainimg"></h3>
<p>フランスで最も人気のある観光地の一つで、「フランスの驚異」と呼ばれる絶景です。堤防からラヴァンセ門をくぐると、おみやげ店やレストラン、ホテルが軒を連ねています。レストランでは名物のオムレツを食べることができます。パリから日帰りも可能ですが、やはり1泊するのがお薦めです。日中は観光客で一杯ですが、夕方になると静かで情緒的な雰囲気に変わります。</p>
</div>

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

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

＜CSS＞

@charset "utf-8";

/* reset */
html,body,h1,h2,h3,h4,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: #FFF;
  font-size: 16px;
}

/* layout */
header, .container {
  width: 860px;
  margin: 0 auto;
}
.logo, .flag {
  width: auto;
  height: 70px;
  margin: 10px 20px 10px 0;
}
h2 {
  background: #4299F0;
  color: #FFF;
  text-align: right;
  font-family:
    Georgia,
    serif;
  font-weight: bold;
  padding: 5px 20px;
  margin-bottom: 26px;
}
i {
  color: #4299f0;
}
h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
p {
  line-height: 1.6;
}
.mainimg {
  width: 240px;
  height: 256px;
  float: right;
  margin: 0 0 0 15px;
}
.wrapper {
  overflow: hidden;
  margin-bottom: 26px;
}
.main {
  float: left;
  width: 600px;
}
.sidebar {
  float: right;
  width: 220px;
  margin: 0 0 0 30px;
}
dl {
  border: 1px solid #4299F0;
}
dt {
  color: #FFF;
  background: #4299f0;
  text-align: center;
  padding: 5px;
}
dd {
  padding: 12px 14px;
  font-size: 14px;
}
.comment {
  border: 1px solid #666;
  background: #EEE;
  padding: 10px 20px;
  margin-bottom: 30px;
}
h4 {
  border-left: 7px solid #4299f0;
  padding: 2px 5px 2px 7px;
  margin: 5px 0;
}
.comment p {
  font-size: 14px;
}
footer {
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 10px 0 50px;
}

＜参考サイト＞

odnax.hatenablog.com