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ではリサイズを無効にするようにしています。

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

前回の「Webデザインのギャラリーサイトを集めてみた。」はPC向けサイトでしたが、今回は番外編としてiPhoneやスマートフォン向けサイトのWebデザインのギャラリーサイトを集めてみました。

iPhone Design Box

iPhoneデザインアーカイブ

iPhone Design Data Base

スマートフォンサイト集めました。

ASCII.jp：日本語サイトの事例を一挙紹介（前編）絶対見ておきたい有名企業のスマホサイトまとめ

ASCII.jp：日本語サイトの事例を一挙紹介（後編）スマホサイトを作る前に見たい国内38社の実例

Webデザインをする時に刺激を受けたり、参考になったりするWebデザインのギャラリーサイトが数多くありますが、個人的にちょっと集めてみました。

Web Design Clip

Web Design Bookmark

AnotherBookmark

S5-Style

ズロック

Good Design Web

I/O 3000

ウェブセレクション

Bakuweb

WEBデザインの見本帳

WebSite Color Index

Design Link Database

ikesai.com

WPデザインギャラリー

「最近の気になるWebサイト Vol.1」で紹介したスッキリ！JAPANがTwitterの広告に登場しました。

「5月16日になにかが起こる。」とだけ発表されている謎のサイトですが、その5月16日までもう2週間を過ぎています。

Twitterに広告が登場したので再びサイトにアクセスすると、ある変化に気づきました。それはソースコードです。

4月18日の時のソースコード

5月3日の時のソースコード

笑っています。

日が経つにつれてアスキーアートの部分がだんだんと見えてくるように設定されていたみたいです。それにともなって、謎の人物の横に書いてある文字も読めるようになりました。

「これもうイエローカード出てもおかしくないんじゃないかなー」

この言葉は、あるサッカー解説者が言った名言です。
アスキーアートで描かれた謎の人物は、その名言を言った人物だったのです。

でも、なんのキャンペーンなのか全くわかりません。
5月16日まで楽しみに待っていましょう。

またCSS3をちょっといじってみました。テキストに影を付けることができるtext-shadowです。

text-shadow ＜ドロップシャドウ＞

.text_shadow {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: 1px 1px 1px #222222;
　　font-size: 124%;
　　color: #ffffff;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadow ＜へこみ＞

.text_shadow_2 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: -1px -1px 1px #222222;
　　font-size: 124%;
　　color: #ffffff;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadowは下記のような指定の方法です。

text-shadow: 右方向へのズレ, 下方向へのズレ, ぼかし具合, 影の色;

右方向へのズレ、下方向へのズレはマイナスの値を指定すれば、左方向へのズレ、上方向へのズレになります。
また、ぼかし具合は0から値を指定することができます。値を0に指定した場合は、線のようになります。マイナスの値は指定できません。

このtext-shadowは、「,（コンマ）」で区切ることによって複数の値を指定することもできます。

text-shadow ＜縁取り＞

.text_shadow_3 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: 0 -1px 0 #ffffff, 1px 0 0 #ffffff, 0 1px 0 #ffffff, -1px 0 0 #ffffff;
　　font-size: 124%;
　　color: #222222;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadow ＜立体的＞

.text_shadow_4 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: 1px 1px 0 #cccccc, 2px 2px 0 #cccccc, 3px 3px 0 #333333;
　　font-size: 124%;
　　color: #ffffff;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadow ＜エンボス＞

.text_shadow_5 {
　　width: 250px;
　　height: 50px;
　　background: #0066cc;
　　text-shadow: -1px -1px 0 #ffffff, 1px 1px 0 #222222;
　　font-size: 124%;
　　color: #0066cc;
　　text-align: center;
　　line-height: 50px;
　　border-radius: 10px;
}

text-shadowは、かなり使えそうですね。CSSだけである程度テキストの装飾ができてしまいます。