Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード

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

セイト

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

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

resize: both; 初期値。リサイズ可。
resize: vertical; 縦方向のリサイズのみを許可。
resize: horizontal; 横方向のリサイズのみを許可。
resize: none; すべてのリサイズを禁止。

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の情報をゲットしてみてください。

イベントのお知らせ

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

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

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

日時 2015/11/18(水)19:30〜21:30
場所 いいオフィス(東京都台東区 東上野2丁目18−7 共同ビル3F)
イベントページ ATND
connpass
こんな方にオススメ
  • CSS設計についてもっと知りたい!という方
  • 日々の業務で複数人からなるチーム開発をおこなっているが、うまく意思疎通や効率のいい開発ができない方
  • 「本の内容について聞きたいことがあるから質問させなさい」という方
  • 1
  • 2