【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;を忘れずに!!

【HTML】textareaタグ内のclosとrowsの指定がブラウザごとに異なった表示する問題

テキスト入力をするエリアを表示する場合、HTMLでtextareaタグを使用する。
textareaタグの属性clos(横幅)、rows(縦幅)でエリアを指定する。

しかしclosとrowsを指定すると、ブラウザによって異なった表示をする問題が発生する。

<form>
	<textarea cols="30" rows="5" >
		テキストエリア
	</textarea>
</form>

【出力結果】

この問題はtextarea自体に横幅と高さを指定してあげる事で解決できる。

<form>
	<textarea cols="30" rows="5" style="width: 240px; height: 60px;">
		テキストエリア
	</textarea>
</form>

【出力結果】

【携帯サイト】ボタンリンクを作成する

携帯ページでボタンのリンクを作成します。

PCページだとformタグを使わずに、直接input要素や、buttonタグなどに
JavaScriptのonClickなどを使うパターンが多いですが、
携帯ブラウザでは、JavaScriptに対応していない為、
formタグの中にinputタグを置き、type属性でsubmitを指定します。

<form action="リンク先URL" >
	<input type="submit" value="ボタンテキスト">
</form>

formタグのaction属性に「リンク先URL」、
inputタグのvalue属性に「ボタンテキスト」
をセットします。

submitボタンリンク

【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”の中で指定する事で、グラデーションと背景画像を同時に使う事ができます。

【携帯サイト】画像を右に回り込みさせる方法

携帯サイトで画像を右に回り込みさせる方法

画像の回り込みについて

<img style="float: right;" src="img01.jpg" alt="" align="right" />
サンプルサンプルサンプル...

「align=”right”」のみの記述では「docomo」で×
「style=”float:right;”」のみの記述では「au」で×

「style=”float:right;” align=”right”」
の両方を記述すれば、3キャリアとも○

画像の回り込み

回り込みの解除について

<img style="float: right;" src="img01.jpg" alt="" align="right" />
サンプルサンプルサンプル...

<img style="float: right;" src="img01.jpg" alt="" align="right" />

サンプルサンプルサンプル...

brでクリアしようとすると…

<br clear="all" style="clear:both;" />

の記述では「docomo」で×

divでクリアしようとすれば…

<div clear="all" style="clear:both;"></div>

と記述すれば、3キャリアとも○

回り込み解除

clearはブロック要素で使用する!!