WEBVTT

1
00:00:00.000 --> 00:00:00.774
こんにちは。

2
00:00:00.774 --> 00:00:03.611
エイチティーエムエル、リファレンス解説です。

3
00:00:03.611 --> 00:00:06.965
HTMLタグ編の十三本目は、テキストエリアタグです。

4
00:00:06.965 --> 00:00:10.576
これは、複数行の文章を入力できる欄を作るためのタグです。

5
00:00:10.576 --> 00:00:16.187
たとえば、お問い合わせフォームで質問を詳しく書いてもらう場面や、商品レビューの感想欄、

6
00:00:16.187 --> 00:00:21.798
アンケートの自由記述欄など、一行では入り切らない長めの文章を受け取りたいときに使います。

7
00:00:21.798 --> 00:00:26.248
今回は、一行入力との違いから、基本の書き方、初期値の書き方、大きさや文字数の指定、

8
00:00:26.248 --> 00:00:30.698
そして記事の活用事例まで、初心者向けに順番に解説します。

9
00:00:30.698 --> 00:00:35.212
長い文章を気持ちよく書いてもらえるフォームを作れるようになりましょう。

10
00:00:35.212 --> 00:00:39.429
まず、似た役割のインプットとの違いを押さえましょう。

11
00:00:39.429 --> 00:00:46.565
インプットのテキストタイプは、名前やメールアドレスのような短い一行の入力に向いています。

12
00:00:46.565 --> 00:00:53.701
一方、テキストエリアは最初から複数行を書くことを前提にした欄で、入力中に改行もできます。

13
00:00:53.701 --> 00:00:55.972
もう一つの違いは書き方です。

14
00:00:55.972 --> 00:01:03.919
インプットは開始タグだけで完結しますが、テキストエリアは開始タグと終了タグを必ずセットで書きます。

15
00:01:03.919 --> 00:01:08.460
これは、後で学ぶ初期値をタグの間に書くためでもあります。

16
00:01:08.460 --> 00:01:14.785
一行で足りるか、長い文章になりそうか、内容の長さを想像して選ぶことが大切です。

17
00:01:14.785 --> 00:01:20.624
迷ったら、利用者がじっくり書きそうな欄はテキストエリアと考えてください。

18
00:01:20.624 --> 00:01:22.096
基本の書き方です。

19
00:01:22.096 --> 00:01:26.674
テキストエリアは、開始タグと終了タグを明示して使います。

20
00:01:26.674 --> 00:01:37.303
コード例では、まずラベルで感想という項目名を示し、ラベルのフォーとテキストエリアのアイディーを同じコメントにして対応付けています。

21
00:01:37.303 --> 00:01:41.718
そしてネーム属性のコメントが、フォームを送信したときに、入力内容と一緒に送られる名前、

22
00:01:41.718 --> 00:01:46.132
つまりキーになります。

23
00:01:46.132 --> 00:01:51.365
ラベルを対応付けておくと、項目名をクリックしただけでも入力欄にフォーカスが移り、

24
00:01:51.365 --> 00:01:56.597
読み上げソフトでも何を書く欄なのかが伝わります。

25
00:01:56.597 --> 00:02:02.484
フォームの部品は、単体で置かず、ラベルとセットで書く習慣を付けましょう。

26
00:02:02.484 --> 00:02:07.908
初期値、つまり最初から入っている文章の書き方が、このタグ最大の特徴です。

27
00:02:07.908 --> 00:02:14.688
インプットではバリュー属性に初期値を書きますが、テキストエリアにバリュー属性はありません。

28
00:02:14.688 --> 00:02:18.907
初期値は、開始タグと終了タグの間に、直接文章を書きます。

29
00:02:18.907 --> 00:02:26.139
コード例では、エイチティーエムエルについて質問です、という文が最初から入った状態で表示されます。

30
00:02:26.139 --> 00:02:32.768
ここで注意したいのは、タグの間に書いた改行や空白も、そのまま文字として扱われることです。

31
00:02:32.768 --> 00:02:37.740
見やすくしようと改行やインデントを入れると、その余分な空白まで初期値になってしまうため、

32
00:02:37.740 --> 00:02:42.712
文章はタグにぴったり寄せて書くのが基本です。

33
00:02:42.712 --> 00:02:47.637
欄の大きさの目安は、ローズとコルズという二つの属性で指定します。

34
00:02:47.637 --> 00:02:54.718
ローズは縦に何行分を表示するかの目安で、たとえばファイブと書けば五行分ほどの高さになります。

35
00:02:54.718 --> 00:03:01.644
コルズは横幅を文字数で表した目安で、四十と書けば一行に四十文字ほど入る幅が目安になります。

36
00:03:01.644 --> 00:03:09.187
ただし、これらはあくまで目安であり、実際の表示サイズはブラウザーやフォントによって少し変わります。

37
00:03:09.187 --> 00:03:17.498
スマホのような狭い画面でもはみ出さないよう、最終的な幅はシーエスエスで百分率などを使って調整すると安心です。

38
00:03:17.498 --> 00:03:25.964
長文を想定するなら、ローズは少し大きめにしておくと、利用者がスクロールせずに自分の文章を確認しやすくなります。

39
00:03:25.964 --> 00:03:28.820
入力の長さを整える属性を三つ紹介します。

40
00:03:28.820 --> 00:03:35.674
マックスレングスは入力できる文字数の上限で、たとえば五百と書けば五百文字までしか入力できません。

41
00:03:35.674 --> 00:03:39.958
ミニマムにあたるミニレングスは、最低限必要な長さを示します。

42
00:03:39.958 --> 00:03:46.241
ただし、空欄そのものを禁止したい場合は、後で紹介するリクワイアードも合わせて検討します。

43
00:03:46.241 --> 00:03:52.382
もう一つ、プレースホルダーは、まだ何も入力されていないときに薄く表示されるヒントです。

44
00:03:52.382 --> 00:03:55.809
感想を書いてください、のような短い例を示せます。

45
00:03:55.809 --> 00:04:03.091
ただしプレースホルダーは、入力を始めると消えてしまうため、項目名を伝えるラベルの代わりにはなりません。

46
00:04:03.091 --> 00:04:08.232
また、上限はブラウザー側だけでなく、サーバー側でも検証するのが安全です。

47
00:04:08.232 --> 00:04:11.348
状態を指定する三つの真偽属性の違いを確認します。

48
00:04:11.348 --> 00:04:16.930
リクワイアードは、値の入力を必須にする指定で、空のままでは送信時に注意が表示されます。

49
00:04:16.930 --> 00:04:21.473
リードオンリーは読み取り専用で、内容は読めますが書き換えはできません。

50
00:04:21.473 --> 00:04:23.680
ただし値は通常どおり送信されます。

51
00:04:23.680 --> 00:04:30.301
一方、ディスエイブルドは操作自体を無効にする指定で、欄はグレーになり、通常は送信の対象にもなりません。

52
00:04:30.301 --> 00:04:34.844
この三つは似て見えて結果が違うため、目的に合わせて選び分けてください。

53
00:04:34.844 --> 00:04:37.700
なお、真偽属性は、あるかないかで決まります。

54
00:04:37.700 --> 00:04:42.244
ディスエイブルド、イコール、フォルスと書いても無効化は解除されません。

55
00:04:42.244 --> 00:04:45.100
解除したいときは属性そのものを取り除きます。

56
00:04:45.100 --> 00:04:47.621
記事の活用事例を見てみましょう。

57
00:04:47.621 --> 00:04:51.560
テーマは、長い文章を入力できるようにすることです。

58
00:04:51.560 --> 00:04:59.122
コード例では、ラベルで質問という項目名を示し、フォーとアイディーをメッセージで対応付けています。

59
00:04:59.122 --> 00:05:04.636
テキストエリアには、送信時のキーになるネーム、五行分の高さを示すローズ、

60
00:05:04.636 --> 00:05:10.150
千文字までの上限を示すマックスレングスが指定され、タグの間には初期値として、

61
00:05:10.150 --> 00:05:15.665
エイチティーエムエルについて質問です、という文が入っています。

62
00:05:15.665 --> 00:05:20.706
試すときは、練習用ファイルにこのコードを貼り付けて保存し、再読み込みしてから、

63
00:05:20.706 --> 00:05:25.748
開発者ツールのエレメンツで構造を確認してください。

64
00:05:25.748 --> 00:05:30.632
入力して、改行や文字数の上限の動きも実際に確かめてみましょう。

65
00:05:30.632 --> 00:05:33.881
仕上げに、折り返しと見た目の調整です。

66
00:05:33.881 --> 00:05:40.720
ラップ属性は、画面上の折り返しと、送信される値に改行を含めるかの扱いを決めます。

67
00:05:40.720 --> 00:05:47.901
通常はソフトという扱いで、見た目は自動で折り返され、入力した改行だけが送信されます。

68
00:05:47.901 --> 00:05:56.792
見た目については、シーエスエスで幅を百分率にして親要素に合わせると、狭い画面でもはみ出しにくくなります。

69
00:05:56.792 --> 00:06:02.605
また、多くのブラウザーでは欄の右下をドラッグして高さを変えられます。

70
00:06:02.605 --> 00:06:11.326
記事では、固定の高さで内容が隠れないか確認し、必要以上にサイズ変更を禁止しないことが勧められています。

71
00:06:11.326 --> 00:06:16.284
利用者が自分の文章全体を見返せる余裕を残しておきましょう。

72
00:06:16.284 --> 00:06:18.644
ブラウザー互換性を確認します。

73
00:06:18.644 --> 00:06:25.016
記事が参照するエムディーエヌの記録では、テキストエリア本体は、クロームが一以降、

74
00:06:25.016 --> 00:06:31.388
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。

75
00:06:31.388 --> 00:06:37.997
古くからある基本的なフォーム部品なので、現在の主要なブラウザーでは安心して使えます。

76
00:06:37.997 --> 00:06:40.986
ただし注意したいのは属性ごとの差です。

77
00:06:40.986 --> 00:06:45.392
たとえばミニレングスは、クローム四十以降、ファイアフォックス五十一以降など、

78
00:06:45.392 --> 00:06:49.797
本体よりずっと後に追加されています。

79
00:06:49.797 --> 00:06:53.573
要素が使えても新しい属性が使えるとは限りません。

80
00:06:53.573 --> 00:07:00.496
新しい属性を使う場合は、本体とは別に対応状況を確認し、対象の実機でも試しておきましょう。

81
00:07:00.496 --> 00:07:02.305
最後に練習とまとめです。

82
00:07:02.305 --> 00:07:06.978
テキストエリアは、複数行の文章を入力できる欄を作るタグでした。

83
00:07:06.978 --> 00:07:08.938
大切なポイントは三つです。

84
00:07:08.938 --> 00:07:14.516
一つ目は、初期値はバリュー属性ではなく、開始タグと終了タグの間に書くこと。

85
00:07:14.516 --> 00:07:22.656
二つ目は、ラベルとアイディーを対応付け、ネームで送信時のキーを決め、ローズとコルズで大きさの目安を示すこと。

86
00:07:22.656 --> 00:07:28.310
三つ目は、マックスレングスなどの長さの制限と、リクワイアード、リードオンリー、

87
00:07:28.310 --> 00:07:33.963
ディスエイブルドといった状態の指定を、目的に合わせて使い分けることです。

88
00:07:33.963 --> 00:07:43.309
練習として、お問い合わせフォームに五行の質問欄を作り、初期値とプレースホルダーの違いを確かめるところから始めてみてください。

89
00:07:43.309 --> 00:07:44.666
お疲れさまでした。

90
00:07:44.666 --> 00:07:48.284
次回もHTMLタグを一つずつ学んでいきましょう。