1カラム(段組)レイアウト
カラム(段組)とは、ページ垂直方向の区切りの事を指します。
ページの大まかなデザインやレイアウト、コンテンツの配置場所など、ページの基礎となる部分を担当します。
1カラムのレイアウトは、上から下へストレートに各セクションが並んだ、シンプルなレイアウトです。
モバイルサイトで良く使用されます。
2カラムのレイアウトは、一般的なサイトからブログまで広く使われ、「サイドバー」が左側の場合と右側の場合があります。
1段組を作る大まかなイメージを記載すると、下記をCSS(スタイルシート)無しでHTMLに記述した場合、HTMLソースに記述した通り、記事1→2の順序で縦に表示されます。
CSS(スタイルシート)でレイアウト（サイト）全体の幅や左寄せ・中央寄せなどを指定していきます。
<div class="block1">記事1</div> <div class="block1">記事2</div>
2カラムレイアウト
ここでは、2カラムレイアウトの作成方法を説明していきます。
グローバルナビゲーションと画像スライドショーの表示が出来たら、コンテンツとライトメニューを表示させます。ライトメニューはサイドバー、サブナビとも呼ばれます。
2カラム（2段組）レイアウトの場合、「大きな枠の中に、左右に寄せられた内枠を2つ作る」というのが大まかなイメージになります。
下記のHTMLの記述を画像スライドショーのタグの下に記述します。
floatを使って、左側の内枠に「コンテンツ」を右側の内枠に「ライトメニュー」を表示するようにHTMLとCSSで指定します。
CSS 8行目のfloat: left;と12行目のfloat: right;がそれに当たります。
コンテンツ
「コンテンツ」は「トピックス」と「プレスリリース」とで成り立ち(上の画像参照)、<div class=”headline1″>タグと<h2>タグを使い、CSS指定して見出しの枠線を付け文字を大きくしています。「トピックス」と「プレスリリース」のh2タグの指定はCSS 21行目です。
CSSの記述の #mainColumn がコンテンツの横幅 760pxです。#sideColumn がライトメニューの横幅 300pxです。
<div id=”contents”> は1番外側のタグのCSSの記述で 760px + 300px + 余白の合計 1100px を指定します。
ライトメニュー
左側の内枠「コンテンツ」の記述が出来たら、同様に右側の内枠「ライトメニュー」もHTMLとCSSで指定します。
ライトメニューのHTMLは<div id=”sideColumn”></div>で囲んだ中に記載していきます。
コンテンツの右側に表示するので float: right; 300px固定で指定します。
「トピックス」と「プレスリリース」の日付は「class=”top_list clear”」の liタグとspanタグで囲み、CSS 65行目、HTML 10～14行目、23～27行目で文字サイズを指定しています。文章は liタグで囲み、CSS 59行目、HTML 10～14行目、23～27行目で文字サイズを指定しています。
formタグは、検索ボタンが押されたときにaction属性で指定されたURLにフォームのデータを渡すようになっています(HTML60行目)。
HTML
<div id="contents" class="layout1 clearfix">
<!-- mainColumn -->
<div id="mainColumn">
<!-- topics -->
<div class="headline1 clearfix">
<h2>トピックス</h2>
<div class="archive_btn"><a class="blendy" href="http://www.sample.com/column.html">ページ一覧</a></div>
</div>
<ul class="top_list clear">
<li><span>2016.10.21</span><a href="http://www.sample.com">【第5回】トピックスを表示します</a></li>
<li><span>2016.10.19</span><a href="http://www.sample.com">【第4回】トピックスを表示します</a></li>
<li><span>2016.10.11</span><a href="http://www.sample.com">【第3回】トピックスを表示します</a></li>
<li><span>2016.10.7</span><a href="http://www.sample.com">【第2回】トピックスを表示します</a></li>
<li><span>2016.10.6</span><a href="http://www.sample.com">【第1回】トピックスを表示します</a></li>
</ul>
<!-- /topics -->
<!-- press release -->
<div class="headline1">
<h2>プレスリリース</h2>
<div class="archive_btn"><a class="blendy" href="https://www.uns-j.co.jp/archives/press">ページ一覧</a></div>
</div>
<ul class="top_list clear">
<li><span>2016.10.21</span><a href="http://www.sample.com">プレスリリースを表示します</a></li>
<li><span>2016.10.12</span><a href="http://www.sample.com">プレスリリースを表示します</a></li>
<li><span>2016.10.6</span><a href="http://www.sample.com">プレスリリースを表示します</a></li>
<li><span>2016.8.5</span><a href="http://www.sample.com">プレスリリースを表示します</a></li>
<li><span>2016.6.23</span><a href="http://www.sample.com">プレスリリースを表示します</a></li>
</ul>
<!-- /press release -->
</div>
<!-- /mainColumn -->
<!-- sideColumn -->
<div id="sideColumn">
<div class="side_widget clearfix styled_post_list1_widget" id="styled_post_list1_widget-2">
<h3 class="side_headline">ピックアップ記事</h3>
<ol class="styled_post_list1">
<li class="clearfix">
<div class="info">
<p class="date">2016.6.16</p>
<a class="title" href="http://www.sample.com">ピックアップ記事について</a> </div>
<div class="excerpt">ここにピックアップ記事を表示します。ここにピックアップ記事を表示します。</div>
</li>
</ol>
</div>
<div class="side_widget clearfix styled_post_list2_widget" id="styled_post_list2_widget-2">
<h3 class="side_headline">お役立ち情報</h3>
<ol class="styled_post_list2">
<li class="clearfix">
<p class="date">2016.10.6</p>
<h4 class="title"><a href="http://www.sample.com">お役立ち情報について</a></h4>
<div class="excerpt">お役立ち情報 お役立ち情報を記載します。お役立ち情報を記載します。お役立ち情報を記載します。...</div>
</li>
</ol>
</div>
<div class="side_widget clearfix widget_search" id="search-3">
<h3 class="side_headline">検索</h3>
<form role="search" method="get" id="searchform" class="searchform" action="https://www.uns-j.co.jp/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>
</div>
</div>
<!-- /sideColumn -->
</div>
<!-- END #contents -->
CSS
#contents {
width: 1100px;
margin: 0 auto 85px;
}
.layout1 #mainColumn {
width: 760px;
float: left;
}
.layout1 #sideColumn {
width: 300px;
float: right;
}
/* no side */
.page-template-page-noside-php #global_menu {
width:950px;
}
.page-template-page-noside-php #contents {
width:950px;
}
.page-template-page-noside-php #left_col {
float:none;
width:950px;
}
/* headline */
.headline1 {
margin:0;
padding:0 0 0 20px;
height:43px;
line-height: 43px;
border:1px solid #ccc;
border-left:5px solid #0077B3;
font-size:14px;
background:url(images/headline_bg.jpg) repeat-x left bottom;
}
.headline1 h2 {
font-size: 14px;
font-weight: bold;
color: #000;
display: inline-block;
float: left;
width: 604px;
margin: 0;
}
.headline1 .archive_btn a {
display: block;
float: right;
width: 130px;
height: 43px;
text-align: center;
text-decoration: none;
font-size: 12px;
line-height: 43px;
padding: 0;
color: #000;
background:url(images/archive_btn.jpg) no-repeat left top;
}
.headline1 .archive_btn a:hover, .headline1 .archive_btn a.hover {
background:url(images/archive_btn.jpg) no-repeat left bottom;
}
.headline2 {
font-size: 14px;
height: 56px;
line-height: 56px;
padding: 0 20px;
margin: 0;
border-top: solid 5px #f00;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
background-image: url(images/headline_bg.jpg);
background-repeat: repeat-x;
background-position: left bottom;
}
#page-title {
font-size: 18px;
font-weight: bold;
color: #000;
}
.side_headline {
border-left:5px solid #0077B3;
}
.top_list {
width: 760px;
margin-top: 10px;
}
.top_list li {
height: 41px;
line-height: 41px;
background-image: url(images/dot_02.png);
background-repeat: repeat-x;
background-position: left bottom;
font-size: 14px;
}
.top_list li:last-child {
background: none;
}
.top_list li span {
font-size: 12px;
font-weight: bold;
width: 80px;
display: inline-block;
color: #000;
}
.top_list li a {
text-decoration: none;
}
.top_list li a:hover {
text-decoration: underline;
}
この記事へのコメントはありません。