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