今日から使える！HTML5,CSS3のコーディングメモ7個

5. textareaのサイズ変更を制御する方法

textareaはデフォルトではユーザーが自由にサイズを変更できてしまいます。
このとき、やりようによってはサイトのレイアウトが崩れてしまうため、できればこの操作には一定の制御を加えたいところ。
そこで、resizeプロパティを使えば、ユーザー側のtextareaのサイズ変更を制御できます。

例

See the Pen JYMPZd by Seito (@seito2014) on CodePen.

6. ブラウザに標準で付いているバリデートを切る方法

novalidate属性を使えば、ブラウザに標準で付いているバリデート機能をオフにできます。
inputタグのtype属性でemailやtelなどの属性を指定していると、一部のブラウザでは標準でバリデート機能が走ります。
これはこれでありがたいのですが、バリデートは自前で実装したいケースも多いはず。そんなときこれがあるとかえって邪魔ですから、novalidateを使いましょう。

例

<form action="..." novalidate>...</form>

7. SVGタグに代替テキストを入れる方法

SVGはSVGタグ内用のtitle、descタグを持っています。
ここに画像のタイトル（題名）やディスクリプション（説明）を入れることができ、入れたテキストを代替テキストとすることができます。
また、ここに入れたテキストはブラウザ上は表示されません。
アクセシビリティ上、設定しておいて損はないでしょう。

例

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1">
  <g>
    <title>LIG.inc LOGO</title>
    <desc>
	  LIg.incのロゴ画像です。
    </desc>
  </g>
  <path d="...">
</svg>

まとめ

いかがでしたか？
HTML5、CSS3には、知られていないけど案外便利なプロパティやら属性やらがあったりします。
ちなみにmozillaのMDNはこの辺の情報が豊富なのでおすすめです。
興味があれば、ぜひこちらでその他のいろいろなHTML5,CSS3の情報をゲットしてみてください。

HTML｜MDN

CSS｜MDN

イベントのお知らせ

先日SBクリエイティブ様より発売した僕の書籍『最強のCSS設計 チーム開発を成功に導くケーススタディ』の出版イベントを行います！

最強のCSS設計 チーム開発を成功に導くケーススタディ

「CSS設計」「チーム開発」というテーマでプレゼンを行う他、懇親会もありますのでぜひお越しくださいませ！
参加していただける方は以下のイベントページ「ATND」または「connpass」よりお申し込みください(^^)

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。