【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>

【出力結果】

【PHP】explode関数を使って、文字列を指定文字ごとに分割する

explode関数を使って、文字列を指定文字列ごとに分割して配列にいれる。

AKB48の神7を指定文字”,”を基準に分割する。

$txt = "大島優子,前田敦子,篠田麻里子,板野友美,渡辺麻友,高橋みなみ,小嶋陽菜";
$arr = explode(",", $txt);

print_r($arr);

第1引数に分割する指定文字、第2引数に文字列をいれる。

【出力結果】

Array ( [0] => 大島優子 [1] => 前田敦子 [2] => 篠田麻里子 [3] => 板野友美
 [4] => 渡辺麻友 [5] => 高橋みなみ [6] => 小嶋陽菜 )

【JavaScript】appendChildでHTMLの要素を追加する

HTMLにinnerHTMLで文字列を出力する場合、
出力の度に前回の出力を書き換えてしまう。

前回の出力分を残した状態で、新たに要素を追加する場合は、appendChildを利用する。

appendChildでボタンを押すたびにHTMLの要素を追加するサンプルコード

<html>
<head>
<title>appendChildでHTMLの要素を追加するサンプルコード</title>
</head>
<style type="text/css">
.className {
	background-color: #000000;
	color: #FFFFFF;
}
</style>
<body>
	<!--appendChild要素追加サンプル-->
	<script type="text/javascript">
		function addElement() {
			var element = document.createElement('div');
			element.setAttribute('class', 'className');
			element.innerHTML = "テキスト";
		
			var objBody = document.getElementsByTagName("body").item(0);
			objBody.appendChild(element);
		}
	</script>
	
	<!--要素追加ボタン-->
	<form>
		<input type="button" value="要素を追加" onClick="addElement()">
	</form>
</body>
</html>

【CSS3】background-imageで複数の背景画像を表示する

CSS3ではbackground-imageで複数の背景画像を使用出来るようになった。

今回使用するのはこの4枚の背景画像を重ねてボタンをつくってみる。

background-imageなどのプロパティの引数に値を順番に指定する。
重なり順は一番左が一番上で、一番右が一番下になる。

p#button {
	background-image: url(画像4のパス), url(画像3), url(画像2), url(画像1);
	background-repeat: 画像4のリピート指定, 画像3, 画像2, 画像1;
	background-position: 画像4の位置指定, 画像3, 画像2, 画像1;
}

実際に使ってみる
【button.html】

<p id="button">ボタン</p>

【button.css】

p#button {
	width: 320px;
	height: 42px;
	line-height: 42px;
	text-indent: 2.2em;
	font-size: 140%;
	color: #FFFFFF;
	margin: 50px auto;
	background-image: url(img04.png), url(img03.png), url(img02.png), url(img01.png);
	background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
	background-position: 98% 50%, 2% 50%, left top, center center;
}

【実行結果】

【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 {
 
    }
}

【PHP】strtotime()関数を使って、本日から遡った日付を出力する

本日を基準として10日前、10日後などの日付を出力したい事がある。
UNIXに変換して、変換した値から計算する方法が一般的だが、
PHPではstrtotime()関数という便利な関数が用意されているので使ってみます。

ここでは、date関数の引数でstrtotime関数を利用します。

【本日から遡った日付を出力する】

date("Y/m/d");							// 本日
date("Y/m/d",strtotime("-10 day"));		// 10日前
date("Y/m/d",strtotime("-1 week"));		// 1週間前
date("Y/m/d",strtotime("-2 month"));	// 2か月前
date("Y/m/d",strtotime("-3 year"));		// 3年前

【本日以降の日付を出力する】

date("Y/m/d");             // 本日
date("Y/m/d",strtotime("+10 day"));		// 10日後
date("Y/m/d",strtotime("+1 week"));		// 1週間後
date("Y/m/d",strtotime("+2 month"));	// 2か月後
date("Y/m/d",strtotime("+3 year"));		// 3年後