めも。

/* リサイズを禁止する */
textarea {
  resize: none;
}

/* 縦幅のリサイズを禁止する */
textarea {
  resize: horizontal;
}

/* 横幅のリサイズを禁止する */
textarea {
  resize: vertical;
}

tableタグ内のtr要素を見せたり隠したりしたかった際に嵌ったのでメモ。

通常DOM要素を見せ隠ししたい場合は、displayプロパティを「none」や「block」にして操作する。

が、trのdisplayプロパティの場合「none」に対をなす値が「block」ではなく「table-row」となる。

ざっくり言うと。

■divとか

display:none / block

■tr

display:none / table-row

となる。

なので以下のようなコードを書くと表示が崩れておかしくなるので注意。

■HTML

<button type="button" class="js_btn">btn</button>

<table class="table">
<thead>
<tr><th>hoge</th><th>fuga</th></tr>
</thead>
<tbody>
<tr class="tr1"><td>ho</td><td>ge</td></tr>
<tr class="tr2"><td>fu</td><td>ga</td></tr>
</tbody>
</table>

■Javascript

<script>
$(function(){
	$('.js_btn').click(function(){
		if($('.tr1').css('display') == 'none'){
			// display:table-rowでなければならない
			$('.tr1').css({'display':'block'});
		}else{
			$('.tr1').hide();
		}
	})
})
</script>

これはボタンをクリックした際に特定のtr要素を調査し、display属性がnoneであればblockに、そうでなければnoneに変更するスクリプトであるが、この場合 において要素を再表示させたいのであれば、5行目を「$(‘.tr1′).css({‘display':’table-row’});」とする必要がある。

デザイン的にどうしても要素からはみ出してほしくないとき用。

あと、長い英数字を連続して入力されたりしたときの対策。

div {
  /* 幅の指定は必須 */
  width: 250px;
  word-wrap: break-word;
}

幅は指定しなければ意味がないので注意。
幅が定義されていないと強制改行もなにもないので。

※spanだとうまくいかない。pだとうまくいく模様。

モーダルウィンドウを出す際、バックグラウンドにwidth, height, 100%でシャドウマスクをかけたかった時のメモ。

普通に{height:100%}だけだと最初に表示（レンダリング）されている部分の高さに対して100%なので、下にスクロールするとマスクがかかっていない。

なので下記のようにしてやるとうまくいく模様（検証済み）。

html,body {
   margin:0px;
   height:100%;
}
body {
   min-height:100%;
   height:auto !important;
}

importantが肝らしい。まぁ単純に優先度を高めることで、ブラウザのエレメントスタイルなどに左右されないための施策かと思われる。

以外とやりたい場面多いので忘れないようにしよう。