コラム

【第8回】実践編-2カラムレイアウト

1カラム(段組)レイアウト

カラム(段組)とは、ページ垂直方向の区切りの事を指します。
ページの大まかなデザインやレイアウト、コンテンツの配置場所など、ページの基礎となる部分を担当します。

1カラムのレイアウトは、上から下へストレートに各セクションが並んだ、シンプルなレイアウトです。
モバイルサイトで良く使用されます。

2カラムのレイアウトは、一般的なサイトからブログまで広く使われ、「サイドバー」が左側の場合と右側の場合があります。

2columlayout

1段組を作る大まかなイメージを記載すると、下記をCSS(スタイルシート)無しでHTMLに記述した場合、HTMLソースに記述した通り、記事1→2の順序で縦に表示されます。
CSS(スタイルシート)でレイアウト(サイト)全体の幅や左寄せ・中央寄せなどを指定していきます。

<div class="block1">
   記事1
</div>
<div class="block1">
   記事2
</div>

 

2カラムレイアウト

2colum-cap1

ここでは、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="http://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="http://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;
}

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。