CSS3 textarea要素のリサイズを制御する。

2011.05.09 Mon

textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。

Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Internet ExplorerやOperaではリサイズに対応していません。

下の画像のように右下にあるマークをドラッグすることによってテキストエリアのサイズを変更することができます。

Firefox

Safari、Google Chrome

でも、このリサイズの機能であるresizeプロパティは、なぜかデフォルトでリサイズができる状態になっていて、制御しないとデザインやレイアウトの崩れが起きます。

もしそれを避けたいのであれば、CSSでテキストエリアのリサイズを制御することができます。

<リサイズを無効にする>

textarea {
  resize: none;
}

<幅のリサイズだけを可能にする>

textarea {
  resize: horizontal;
}

<高さのリサイズだけを可能にする>

textarea {
  resize: vertical;
}

Twitterではこの高さのリサイズだけを可能にするようにCSSで制御していますね。
他だとFacebookではリサイズを無効にするようにしています。

個人的に自由にリサイズされるのが嫌だったので、このブログでもコメント欄のリサイズを制御してます。


HTMLやCSSの文法をチェックする。

2011.04.28 Thu

HTMLの文法が正しいかどうか、何か間違いはないか。
Webサイトのページ数が多かったり、多くのHTMLやCSSを書いていたりする場合、全てをチェックするのはとっても大変です。

そんな時に便利なのが下記のようなチェックツールです。

The W3C Markup Validation Service

W3Cが提供しているHTMLの文法をチェックするサイトです。URLを入力するか、ファイルを参照するか、またはHTMLを貼り付けるかして「Check」ボタンを押すと、HTML/XHTMLの仕様で正しく記述されているかがチェックできます。

Another HTML-lint gateway

これもHTMLの文法をチェックするサイトです。URLを入力するか、HTMLを貼り付けるか、またはファイルを参照するかして「チェック」ボタンを押すと、100点満点で採点してくれます。チェック項目を細かく指定することができます。

W3C CSS 検証サービス

W3Cが提供しているCSSをチェックするサイトです。URLを入力するか、ファイルを参照するか、またはCSSを貼り付けるかして「検証する」ボタンを押すと、CSSが正しく記述されているかがチェックできます。


IEに対する条件付きコメントを記述する。

2011.04.13 Wed

何かと問題となるIE(Internet Explorer)に対して、<head>内に条件付きコメントを記述して、対策をします。

例えば、下記のようなものです。

<!--[if IE]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

これは全てのバージョンのIEに対してscript要素を読み込むという記述で、読み込んでいるのはHTML5の新要素を使えるようにする「html5.js」です。
IEだけに対する記述なので、FirefoxやSafari、Google Chromeといった他のブラウザには適用されません。

他にも下記のような記述の方法があります。

<IE以外のブラウザ>
<!--[if !IE]> ~ <![endif]-->

<IE 8>
<!--[if IE 8]> ~ <![endif]-->

<IE 8 未満のバージョン → IE 7 , IE 6 など>
<!--[if lt IE 8]> ~ <![endif]-->

<IE 8 以下のバージョン → IE 8, IE 7 , IE 6 など>
<!--[if lte IE 8]> ~ <![endif]-->

<IE 8 より上のバージョン → IE 9>
<!--[if gt IE 8]> ~ <![endif]-->

<IE 8 以上のバージョン → IE 8, IE 9>
<!--[if gte IE 8]> ~ <![endif]-->

IE 8でなくてもIE 7、IE 6を指定することも可能です。

IE 6だと下記のようなものを見かけます。

<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('img');</script>
<![endif]-->

これはIE 6で透明pngを表示させるための「DD_belatedPNG.js」を読み込むという記述です。

このように何かと問題となるIEに対して、<head>内に条件付きコメントを記述して、対策をすることができます。

javascriptではなくcssを読み込むことも可能です。

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all" />
<![endif]-->


page 2 of 212