横に並べる

横に並べるレイアウト

  • floatを使ったレイアウト
優先順位の高いコンテンツ内容から並べる
  • リセットなし
  • コンテンツは、左揃え
  • ２つのコンテンツの間の空きが20pxになるよう幅を指定


wrapperの使い方

  • ラッピングして浮動状態を安定させる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラッピングして浮動状態を安定させる</title>
<style>
.wrapper {
  width: 760px; /* レイアウト全体の幅を指定 */
  overflow: hidden; /* この親要素内にある子要素の高さを取得 */
}
.primary {
  float: left; /* ボックスを左寄せに指定 */
  width: 540px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #C7D5ED;
}
.secondary {
  float: right; /* ボックスを右寄せに指定 */
  width: 200px; /* ボックスの幅を指定 */
  height: 300px; /* ボックスの高さを指定 */
  background-color: #AADB86;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="primary">優先順位の最も高い内容が入る</div>
<div class="secondary">次に優先順位の高い内容が入る</div>
</div><!-- /.wrapper -->
</body>
</html>


f:id:web-css-design:20160831001458p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラッピングして浮動状態を安定させる</title>
<style>
body {
  background-color: #D1D1D1;
}
.container {
  width:800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF;
  box-sizing: border-box; /* 枠線まで含めた領域を幅とする */
}
.header, .footer {
  background-color: #EEE2F2;
  height: 50px;
}
.header{
  margin-bottom: 20px; /* 下方向のマージンを指定 */
}
.wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}
.primary {
  float: left;
  width: 540px;
  height: 300px;
  background-color: #C7D5ED;
}
.secondary {
  float: right;
  width: 200px;
  height: 300px;
  background-color: #AADB86;
}
</style>
</head>
<body>
<div class="container">
<div class="header">header内容が入る</div>
<div class="wrapper">
<div class="primary">優先順位の最も高い内容が入る</div>
<div class="secondary">次に優先順位の高い内容が入る</div>
</div><!-- /.wrapper -->
<div class="footer">footer内容が入る</div>
</div><!-- /.container -->
</body>
</html>


f:id:web-css-design:20160831003140p:plain

横並びのナビゲーションを加える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>floatの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">ここにheaderの内容が入る</div>
<div class="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">カフェフード</a></li>
<li><a href="#">カフェドリンク</a></li>
<li><a href="#">インフォメーション</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="wrapper">
<div class="main">ここにmainの内容が入る</div>
<div class="sub">ここにsubの内容が入る</div>
</div><!-- /.wrapper -->
<div class="footer">
<ul class="footerNav">
<li><a href="#">ホーム</a></li>
<li><a href="#">カフェフード</a></li>
<li><a href="#">カフェドリンク</a></li>
<li><a href="#">インフォメーション</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div><!-- /.container -->
</body>
</html>

@charset "UTF-8";

/* reset
-------------------------------*/
html, body, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* body
-------------------------------*/
body {
  background-color: #CCC;
}

/* layout
-------------------------------*/
.container {
  width: 1000px;
  background-color: #FFF; 
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
.wrapper {
  overflow: auto;
  margin-bottom: 20px;
}
.main {
  float: right;
  width: 600px;
  height: 300px;
  background-color: #9ACDE7;
}
.sub {
  float: left;
  width: 340px;
  height: 300px;
  background-color: #D1F1CC;
}
.header, .footer {
  height: 50px;
}
.header {
  margin-bottom: 20px;
  background-color: #F2F5AA;
}
 .footer {
  background-color: #ECACB5;
}

/* nav
-------------------------------*/
.nav {
  height: 50px;
  background-color: #F6E4F3;
  margin-bottom: 20px;
}
.nav ul {
  overflow: hidden;
}
.nav li {
  float: left;
  width: 192px;
  height: 50px;
  text-align: center;
}
.nav li a {
  display: block;
  line-height: 50px;
  color: #B872AE;
  font-weight: bold;
  border-left: 2px solid #FFF;
  box-sizing: border-box;
}
.nav li:first-child a {
  border: none;
}
.nav li a:hover {
  background-color: #B872AE;
  color: #FFF;
}
.footerNav {
  padding-top: 15px;
  text-align: center;
}
.footerNav li {
  display: inline;
}
.footerNav li a {
  padding: 0 10px 2px 5px;
  color: #FFF;
  border-right: 1px solid #FFF;
}
.footerNav li:first-child a {
  border-left: 1px solid #FFF;
  padding-left: 10px;
}
.footerNav li a:hover {
  text-decoration: underline;
  color: #F00;
}


f:id:web-css-design:20160831004358p:plain

例NavA


例NavB


例NavC



リストを使ったナビゲーション

縦並びのボックス
  • paddingは問題なし
  • marginは相殺される


横並びのボックス
  • marginは通常計算（相殺されません）
  • paddingはブラウザにより影響
  • borderも計算に入れる


borderの数値を大きくしただけで、崩れます。
この解釈は、ブラウザごとに違います。（旧ブラウザとモダンブラウザの違い）



ということで、このような崩れをなくすためには「li a」が「margin: 0;」「padding: 0;」「border: none;」で設定する背景画像でボタンに見せるナビゲーションが主流になります。


「border」の数値が大きくなった値を、「li」の「width」から引いて表示すると



問題なく表示されることがわかります。
「float」を使ったレイアウトに、borderを設定した場合も同様のことがおきます。



以下のリストを、「縦並びボタン」と「横並びボタン」に設定してみましょう。
サイズ・色は自由。

<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦・横並びのナビゲーション</title>
<style>
/* reset
-------------------------------*/
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* 縦並びナビゲーション*/
#nav1 {
	font-size: 1em;
	font-weight: bold;
	height: auto;
	margin: 50px 0 0 50px; /* 上・左を少し空けて見やすく */
}
#nav1 ul {
	list-style-type: none; /* リストの黒丸を消す */
	width: 150px; /* リスト全体の幅 */
	border-top: 2px solid #FFF; /* 囲みの上枠 */
	border-right: 2px solid #FFF; /* 囲みの右枠 */
	border-left: 2px solid #FFF; /* 囲みの左枠 */
	background-color: #6FAB78; /* 囲みの背景色 */
}
#nav1 li a {
	width: auto; /* リンクの幅（省略可） */
	height: auto; /* リンクの高さ（省略可） */
	padding: 6px; /* 文字から枠までの空き */
	display: block; /* リンクの面 */
	border-bottom: 2px solid #FFF; /* 囲みの下枠 */
}
#nav1 a:link, #nav1 a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#nav1 a:hover {
  color: #FFFFFF;
  background-color: #447769;
}

/* 横並びナビゲーション */
#nav2 {
	height: auto;
	width: auto;
	margin: 50px 0 0 50px; /* 上・左を少し空けて見やすく */
}
#nav2 ul {
	list-style-type: none;
	width: 750px;
	height: auto;
	border-top: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	overflow: auto;
}
#nav2 li {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	width: 148px;
	height: auto;
	float: left;
	display: inline;
	background-color: #6FAB78;
	border-right: 2px solid #FFF;
}
#nav2 li a {
	padding: 7px 0;
	display: block;
}
#nav2 a:link, #nav2 a:visited {
	color: #FFFFFF;
	text-decoration: none;	
}
#nav2 a:hover {
	color: #FFFFFF;
	background-color: #447769;
}
</style>
</head>
<body>
<div id="nav1">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
<div id="nav2">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>