Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
2カラムレイアウト
右カラムにfloat:right;、左カラムにfloat:left;を記述し各カラムの横幅をパーセントで記述することによってレスポンシブデザインに対応することができます。
<!doctype html>
<html lang="ja">
<head>
<title>レスポンシブのサンプル（HTML内で読み分け）</title>
<meta charset="UTF-8" />
<!— viewportの設定：どのデバイスでも等倍で表示されるようにする —>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 全デバイス共通のCSS -->
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>2カラムレイアウト</h1>
</header>
<section id="main">
<div class="right">
右カラム
</div>
<div class="left">
左カラム
</div>
</section>
<footer>
<p>footer.</p>
</footer>
</body>
</html>.left {
width:20%;
height:500px;
background-color:#ccffff;
float:left;
}
.right {
width:80%;
height:500px;
background-color:#ffffcc;
float:right;
}一方を固定幅にもう一方を可変幅にする
左カラムに固定幅を指定。
右カラムに左カラムの横幅と同じだけmarginを指定。
.left {
float: left;
width: 300px;
background-color:#ccffff;
height:500px;
}
.right {
float: right;
width: 100%;
margin: 0 0 0 -300px;
}
.content {
margin: 0 0 0 300px;
background: #ccc;
background-color:#ffffcc;
height:500px;
}子要素が全てfloatしている場合親要素似高さが適用されません。
そのためcleat: both;を適用させます。
3カラムレイアウト
mainに対してposition:relative、divに対してposition:absoluteとすることで各divがmainの中の絶対位置に配置される。
このとき各カラムの高さが揃っていないと短いカラムの下に空白ができてしまう。
レスポンシブレイアウト
- HTML側で読み込むCSSファイルを変える方法
- 一つのCSSファイル内で読み込む箇所を変える方法
一つのCSSファイル内で読み込む箇所を変える
スマホでは全てのpositionをrelativeにタブレット向けには中央カラムのpositionをrelativeに幅100%で設定し、左右カラムのpositionをrelativeにして横幅50%。floatにして横並びにしている。
/* 全デバイス共通・PC向けの記述 */
html,body {
margin:0;
padding:0;
height: 100%;
position:relative;
top:0;
text-align: center;
}
h1,p {
margin:0;
}
header {
width:100%;
height:50px;
background-color:#ffcccc;
}
.left {
float: left;
width: 300px;
background-color:#ccffff;
height:500px;
}
.right {
float: right;
width: 100%;
margin: 0 0 0 -300px;
}
.content {
margin: 0 0 0 300px;
background: #ccc;
background-color:#ffffcc;
height:500px;
}
footer {
position:relative;
clear:both;
height:50px;
width:100%;
background-color: #ccffcc;
}
/* 横幅480px以下(スマートフォンなど)向けの記述 */
@media screen and (max-width: 480px) {
.center {
position: relative;
top:0;
left:0;
height:50%;
width:100%;
}
.left {
position: relative;
top:auto;
left:auto;
height:25%;
width:100%;
}
.right {
position: relative;
height:25%;
width:100%;
top:auto;
right:auto;
}
}
/* 横幅481px以上、768px以下(タブレットなど)向けの記述 */
@media screen and (min-width: 481px) and (max-width: 768px) {
#main {
position:relative;
width:100%;
}
.center {
position: relative;
top:0;
left:0;
width:100%;
}
.left {
position: relative;
top:auto;
left:auto;
width:50%;
float:left;
}
.right {
position: relative;
width:50%;
top:auto;
right:auto;
float:right;
}
footer {
position:relative;
clear:both;
height:50px;
width:100%;
background-color: #ccffcc;
}
}
