12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【Labs】HTML5でFloatレイアウトのテンプレート
こんにちは（・∀・）
今日はHTML5でFloatレイアウトのテンプレートサンプルをご紹介します。
1. HTML5でFloatレイアウトテンプレート
2カラム・3カラムのFloatレイアウトのテンプレートです。1カラムレイアウトにしたい場合、#containerの中の#column1・#column2のブロックを無くせば1カラムレイアウトになります。
どちらのサンプルも共にレスポンシブデザインとなっております。レスポンシブデザイン無しの通常のレイアウトにすることもできます。その場合、CSSの@media部分の2行を削除してください(中身は生きです)。
2. 2カラムレイアウト
2カラムFloatレイアウトのテンプレートです。
PC向けレイアウトで#column1と#column2の横幅を変更したい場合
#column1と#column2の横幅の合計と親要素#containerの横幅の値が同じ値になるように変更してください。例えば#column1は300px、#column2が900pxの場合、合計すると1200pxになりますので親要素#containerの横幅も1200pxに設定します。
親要素#containerと子要素#column1・#column2の設定はCSS内にあります、横幅の変更をしたい場合はそちらで設定変更してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【サンプルデモ】HTML5で2カラムFloatレイアウト - Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="sample.css">
<!--Require JavaScript-->
<script src="sample.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h2 id="toplogo"><a href="/"><img src="logo.png" alt="Webデザインラボ"></a></h2>
</header>
<div id="container">
<h4>#container</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは1200pxです。</p>
<div id="column1">
<h4>#column1</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは300pxです。</p>
<!--column1--></div>
<div id="column2">
<h4>#column2</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは900pxです。</p>
<h4>#column1と#column2の横幅を変更したい場合</h4>
<p>#column1と#column2の横幅の合計と親要素#containerの横幅の値が同じ値になるように変更してください。例えば#column1は300px、#column2が900pxの場合、合計すると1200pxになりますので親要素#containerの横幅も1200pxに設定します。</p>
<!--column2--></div>
<p class="clear">親要素#containerと子要素#column1・#column2の設定はCSS内にありますのでそちらで設定変更してください。</p>
<!--container--></div>
<footer>
<div id="copyright">©web design lab<!--copyright--></div>
</footer>
<!--wrapper--></div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
}
header {
border-bottom: 2px solid #9fb7d4;
}
#toplogo {
width: 200px;
height: 40px;
margin: 10px auto;
}
#toplogo img {
width: 100%;
height: auto;
}
/*----------------------------------------------------------------------*/
#container {
overflow: hidden;
margin: 10px auto 0 auto;
background: #ddd;
}
#container #column1 {/*カラム1*/
background: #d49fc2;
}
#container #column2 {/*カラム2*/
background: #9fb7d4;
}
#container,
#container #column1,
#container #column2 {
padding: 10px;
}
#container p .txt-pc {
display: none;
}
/*----------------------------------------------------------------------*/
footer {
border-top: 2px solid #9fb7d4;
}
#copyright {
padding: 10px 0;
text-align: center;
font-size: 14px;
}
@media (min-width: 769px) {
header {
min-width: 1200px;
}
#container {
width: 1200px;
}
#container #column1 {/*カラム1*/
float: left;
width: 300px;
box-sizing: border-box;
}
#container #column2 {/*カラム2*/
float: left;
width: 900px;
box-sizing: border-box;
}
#container p .txt-pc {
display: inline-block;
}
#container p .txt-sp {
display: none;
}
footer {
min-width: 1200px;
}
/* ** */}
PC向けレイアウトで横幅を変更したい場合はCSSの黄色でハイライトになっている部分の値を変更してください。
レスポンシブデザインを無しにしたい場合はCSSの青色でハイライトになっている2行を削除してください。
Result
サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
3. 3カラムレイアウト
3カラムFloatレイアウトのテンプレートです。
PC向けレイアウトで#column1と#column2と#column3の横幅を変更したい場合
#column1と#column2と#column3の横幅の合計と親要素#containerの横幅の値が同じ値になるように変更してください。例えば#column1は300px、#column2が600px、#column3が300pxの場合、合計すると1200pxになりますので親要素#containerの横幅も1200pxに設定します。
親要素#containerと子要素#column1・#column2・#column3の設定はCSS内にあります、横幅の変更をしたい場合はそちらで設定変更してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【サンプルデモ】HTML5で3カラムFloatレイアウト - Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="sample.css">
<!--Require JavaScript-->
<script src="sample.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h2 id="toplogo"><a href="/"><img src="logo.png" alt="Webデザインラボ"></a></h2>
</header>
<div id="container">
<h4>#container</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは1200pxです。</p>
<div id="column1">
<h4>#column1</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは300pxです。</p>
<!--column1--></div>
<div id="column2">
<h4>#column2</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは600pxです。</p>
<h4>#column1と#column2と#column3の横幅を変更したい場合</h4>
<p>#column1と#column2と#column3の横幅の合計と親要素#containerの横幅の値が同じ値になるように変更してください。例えば#column1は300px、#column2が600px、#column3が300pxの場合、合計すると1200pxになりますので親要素#containerの横幅も1200pxに設定します。</p>
<!--column2--></div>
<div id="column3">
<h4>#column3</h4>
<p>このカラムの横幅はモバイルでは100%、PCでは300pxです。</p>
<!--column3--></div>
<p class="clear">親要素#containerと子要素#column1・#column2・#column3の設定はCSS内にありますのでそちらで設定変更してください。</p>
<!--container--></div>
<footer>
<div id="copyright">©web design lab<!--copyright--></div>
</footer>
<!--wrapper--></div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
}
header {
border-bottom: 2px solid #9fb7d4;
}
#toplogo {
width: 200px;
height: 40px;
margin: 10px auto;
}
#toplogo img {
width: 100%;
height: auto;
}
/*----------------------------------------------------------------------*/
#container {
overflow: hidden;
margin: 0 auto;
background: #ddd;
}
#container #column1 {/*カラム1*/
background: #d49fc2;
}
#container #column2 {/*カラム2*/
background: #9fb7d4;
}
#container #column3 {/*カラム3*/
background: #dfd676;
}
#container,
#container #column1,
#container #column2,
#container #column3 {
padding: 10px;
}
#container p .txt-pc {
display: none;
}
/*----------------------------------------------------------------------*/
footer {
border-top: 2px solid #9fb7d4;
}
#copyright {
padding: 10px 0;
text-align: center;
font-size: 14px;
}
@media (min-width: 769px) {
header {
min-width: 1200px;
}
#container {
width: 1200px;
}
#container #column1 {/*カラム1*/
float: left;
width: 300px;
box-sizing: border-box;
}
#container #column2 {/*カラム2*/
float: left;
width: 600px;
box-sizing: border-box;
}
#container #column3 {/*カラム3*/
float: left;
width: 300px;
box-sizing: border-box;
}
#container p .txt-pc {
display: inline-block;
}
#container p .txt-sp {
display: none;
}
footer {
min-width: 1200px;
}
/* ** */}
PC向けレイアウトで横幅を変更したい場合はCSSの黄色でハイライトになっている部分の値を変更してください。
レスポンシブデザインを無しにしたい場合はCSSの青色でハイライトになっている2行を削除してください。
Result
サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
関連リンク
HTML5でFlexレイアウトのテンプレート
HTML5・ページ作成の基本