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

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

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

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

Webサイト制作の実績・料金を見る

この記事のシェア数

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL