【HTML/CSS】可変コンテンツ要素を横並びにして高さを統一する

要素横並び:可変コンテンツ高さ統一

横並びの要素の中のコンテンツ縦幅が可変する場合、
liをfloatする方法では高さがバラバラになってしまう。

displayTable001

<ul>
	<li>テキスト</li>
	<li>テキスト<br />テキスト<br />テキスト<br /></li>
	<li>テキスト<br />テキスト<br />テキスト<br />テキスト<br />テキスト<br /></li>
	<li>テキスト</li>
	<li>テキスト<br />テキスト<br /></li>
</ul>
<style>
ul{
	width: 100%;
	margin-top: 20px;
}

li{
	float: left;
	width: 20%;
	border: 1px solid #000000;
	margin: -1px;
}
</style>

CSSのdisplayプロパティで要素をtable構造にする事ができる。
※IE8からサポートされている

display: table;
要素をブロック表要素にする。HTMLでいうtable要素。

display: table-cell;
要素を表のセル要素にする。HTMLでいうtd,th要素。

他にも
display: table-column-group;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
などなどいろいろ準備されています。

displayTable002

<style>
ul{
	display: table;
	width: 100%;
	margin-top: 20px;
}

li{
	display: table-cell;
	border: 1px solid #000000;
}
</style>

基本考え方はtableタグと同じなので、
“vertical-align: middle;”で縦方向(垂直方向)も中央寄せする事ができる。

displayTable003

<style>
ul{
	display: table;
	width: 100%;
	margin-top: 20px;
}

li{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border: 1px solid #000000;
}
</style>

レスポンシブWEBデザインなどでPC表示では横並び、スマートフォンでは縦並びにしたい時など、
tableタグを使えない時に重宝します。

【HTML/CSS】ヘッダーをページ上部に固定してレイアウトする

ヘッダー部分をスクロールしてもページ上部に固定されたままコンテンツ部分のみスクロールするようにレイアウトする。

今回の仕様は、ヘッダー部分をポジションで固定(絶対位置に配置)して、ヘッダーの高さ分だけ、コンテンツ上部にマージンを持たせる事で実現する。

【test.html】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>header固定テスト</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/test.css">

<!--[if IE]>
<script type="text/javascript">
	document.createElement('header');
	document.createElement('section');
	document.createElement('nav');
	document.createElement('footer');
</script>
<![endif]-->  
	
</head>
<body>

<header>
	<section id="header">
		<h1>タイトル/header固定テスト</h1>
		<nav></nav>
	</section>
</header>

<div id="contents">
コンテンツ<br />
コンテンツコンテンツ<br />
コンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツコンテンツ<br />
	・
	・
	・
	・
	・
コンテンツコンテンツ<br />
コンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツコンテンツ<br />
</div>

<footer>
	<p>footer</p>
</footer>

</body>
</html>

【css/test.css】

body{  
    padding-top: 100px;
	background: #CCCCCC;
}  

header{
	position: fixed !important;  
	position: absolute;  
	top: 0;  
	left: 0;
	width: 100%;
	height: 100px;
	margin: 0 auto;
	background: #000000;
}

header section#header{
	width: 1000px;
	margin: 0 auto;
}

header section#header h1{
	color: #FFFFFF;
}

#contents{
	width: 1000px;
	margin: 0 auto;
	border: 1px solid #333333;
	background: #FFFFFF;
}

footer{
	width: 1000px;
	height: 80px;
	margin: 0 auto;
	background: #000000;
	color: #FFFFFF;
	text-align: center;
}

position: fixed;は絶対位置への配置、スクロールしても位置を固定する。

【出力結果】

ヘッダーをページ上部に固定する

【HTML/CSS】tableの横幅を指定してもレイアウトが広がってしまう時の対応方法

table(テーブルタグ)に限らず、ブロック要素タグ内で、
スペースを含まない半角英数字が連続して含まれる文字列を使った場合、
文字列全体を英単語や数字と認識して、文字列が途中で折り返されない為、テーブルが横に広がってしまう。
こういった問題の対応方法

テーブル横幅が広がる

【元ソースコード】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>title</title>
<style>
td{
	width: 100px;
	height: 40px;
	background: #777777;
	border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
	<tr>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
	</tr>
</table>
</body>
</html>

IEのみであれば下記のコードを追加すれば解決する

/*IEのみ*/
word-wrap: break-word;

現状のブラウザではこの問題を解決する方法はないので、
レイアウト重視の場合、tableの横幅を固定する事で対応する。

具体的にはtableタグのthやtdに横幅を指定。
その中の文字列にも横幅を指定する。
文字列に横幅を指定しても半角英数字は改行してくれないので、
overflow:hiddenで指定横幅以上は表示しないという方法で対応する。

テーブル横幅固定

【改ソースコード】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>tableの横幅を固定</title>
<style>
td{
	width: 100px;
	height: 40px;
	background: #777777;
	border: 1px solid #000000;
	word-wrap: break-word; /*IEのみ*/
}
td.box a{
	display: block;
	width: 100px;
	overflow:hidden;
}
</style>
</head>
<body>
<table>
	<tr>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
	</tr>
</table>
</body>
</html>

aタグ、spanタグなどインライン要素を使った時は、display: block;を忘れずに!!

【CSS3】高解像度用スマートフォン用のメディアクエリ指定方法

スマートフォンのブラウザ(WebKit系)ではdevicePixelRatioというプロパティが定義されていて、
画像1pxを実際のデバイス上で何pxとして描画するかという指定をしている。

スマートフォン(縦)の横幅は320pxとして考えるのが一般的であるが、実際の解像度は端末ごとに違うため、それぞれdevicePixelRatioプロパティの定義によって帳尻を合わせている。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替える場合、スマートフォンの横幅=320pxと決めつけてしまうと、iphone4や高解像度Android端末ではうまくいかない。

対象端末のdevicePixelRatioプロパティに対してメディアクエリを指定する事で対応できる。
現在の出回っている端末のdevicePixelRatioは「1」,「1.5」,「2」があり、1はそのまま表示すればいいので、1.5と2を対象に加える。

/* 320px以下(スマートフォン縦・横) */
@media
only screen and (max-width: 320px),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    div#contents {
 
    }
}

【CSS3】メディアクエリ指定でデバイスの横幅ごとに表示を切り替える

CSS3ではユーザのブラウザやデバイスの情報を取得することができるようになり、それに対応したスタイルの適用が可能になった。
これにより、ひとつのHTMLファイルで複数のデバイスに対応できるようになった。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替えてみる。
今回は、1,000px以上をPC・タブレット(横)、1,000px以下をタブレット(縦)、480px以下をスマートフォン(横)(縦)と想定してスタイルを指定してみる。

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {

}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {

	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {

	}
}

実際に試してみる。
【index.html】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>title</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!-- page content -->
<div id="contents">
<h1><img src="img/common/img_head.gif" width="100%"/></h1>
	<ul id="main_menu">
		<li class="mainMenu">メニュー1</li>
		<li class="mainMenu">メニュー2</li>
		<li class="mainMenu">メニュー3</li>
		<li class="mainMenu">メニュー4</li>
		<li class="mainMenu">メニュー5</li>
		<li class="mainMenu">メニュー6</li>
		<li class="mainMenu">メニュー7</li>
		<li class="mainMenu">メニュー8</li>
		<li class="mainMenu">メニュー9</li>
		<li class="mainMenu">メニュー10</li>
	</ul>
</div>
</body>
</html>

【common.css】

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {
	width: 980px;
	margin: auto;
}
ul#main_menu {
	display: block;
	width: 100%;
	height: 50px;
}
ul#main_menu li.mainMenu{
	display: block;
	float: left;
	color: #FFFFFF;
	width: 10%;
	height: 50px;
	line-height: 50px;
	background: #000000;
	text-align: center;
}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 20%;
		height: 50px;
		line-height: 50px;
		background: #0000FF;
	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 50%;
		height: 50px;
		line-height: 50px;
		background: #FF0000;
	}
}

【実行結果】

メディアクエリ

ウィンドウの横幅を縮めると、ウィンドウの横幅に応じてそれぞれ指定したスタイルが適応される。

【HTML/CSS】CSS3でグラデーションと背景画像を同時に使う

CSS3では1つの要素に対して、複数の背景を指定することができます。

#box{
background-image: url(img/imege1.png), url(img/imege2.png), url(img/imege3.png), url(img/imege4.png);
}

とすれば複数の背景画像をPhotoshopのレイヤーのように重ねて使うことができます。

CSS3から新たにグラデーションも指定できるようになりましたが、グラデーションと背景画像を別々に指定するとうまく表示されません。

#box{
background-image: url(img/imege1.gif), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
background-image: url(img/imege1.gif), -moz-linear-gradient(top, #000000, #ffffff);
}

という風にグラデーションを一つのレイヤーと考え、背景画像のプロパティ”background-image”の中で指定する事で、グラデーションと背景画像を同時に使う事ができます。