【第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="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;
}

関連記事

コメント

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

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