TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのtextarea要素の使い方を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLのtextarea要素の使い方を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのtextarea要素の使い方について解説しています。これはテキストエリアを入れるときに使われるもので、複数行の入力が可能なエリアを作成します。textareaの書き方と大きさの設定方法を、実行結果と照らし合わせて見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLのtextarea要素の使い方について解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

textarea要素の使い方について詳しく説明していくね！

大石ゆかり

お願いします！

 

textarea要素とは

textarea要素とは、複数行の入力ができるエリアを作成するためのタグです。input要素が1行しか入力できないので、長いテキストをユーザーに入力させる場合はtextareaを使います。

rows属性とcols属性を持っており、textareaを何行にするか横幅を幾つにするかを指定できます。入力された情報は、buttonやinputが押されることでサーバーサイドに送信されます。

 

textarea要素の使い方

textarea要素は以下のように使用します。

<textarea name=名前 cols=横幅 rows=行数></textarea>

name要素で、要素の名前、cols要素で横の長さ、rows要素で縦の長さ（行数）を指定します。作成したい入力欄の大きさに合わせてcolsやrowsを指定して作りましょう。

 

[PR] Webデザインで副業する方法とは

実際に書いてみよう

それでは実際に書いてみましょう。いくつかサンプルのテキストエリアを書いてみます。

1. colsが20のtextarea

<textarea name='sample' cols='20' rows='5'>colsが20</textarea>

2. colsが40のtextarea

<textarea name='sample' cols='40' rows='5'>colsが40</textarea>

3.rowsが5のtextarea

<textarea name='sample' cols='30' rows='5'>rowsが5</textarea>

4.rowsが10のtextarea

<textarea name='sample' cols='30' rows='10'>rowsが10</textarea>

以上で解説を終わります。

 

監修してくれたメンター

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの絶対パスと相対パスの違いについて解説します。 ...
HTML

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法を現役エンジニアが解説【初心者向け】

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLで多階層メニューを作る方法を現役デザイナーが解説【初心者向け】

HTMLで多階層メニューを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、...
HTML

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。 名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、...
HTML

HTMLとCSSでおしゃれな見出しデザインを作る方法を現役デザイナーが解説【初心者向け】

HTMLとCSSでおしゃれな見出しデザインを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

あわせてよく読まれている記事

JavaScriptでtextareaに改行を入れる方法を現役エンジニアが解説【初心者向け】

JavaScriptでtextareaに改行を入れる方法について解説します。これができるようになると複数行に渡る内容を入力することができます。ぜひ参考にしてみてください。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでtextareaに改行を入れる方法について詳しく説明していくね！ 大石ゆかり お願いします！   textareaとは textarea とは、複数行のテキストを入力できるHTMLタグです。 inputタグでもテキスト入力は可能ですが、textareaでは前述の通り、改行を使って複数行に渡る内容を入力することができます。 <input type="text" value="1行"> <textarea> 複数行に 渡って 内容を入力 </textarea>   JavaScriptでtextareaに改行を入れる方法 textarea に改行を入れる方法の前に、JavaScriptでinput タグの値を設定する方法を確認しておきましょう。JavaScriptでinputの値を設定するには、querySelectorやgetElementByIdなどで要素を取得後に、valueプロパティを使います。 // <input id="text" type="text"> の値を設定する let input = document.getElementById('text'); input.value = 'my input'; textarea に対しても同じ流れで設定できます。 // <textarea id="textarea"> の値を設定する let textarea = document.getElementById('textarea'); textarea.value = 'my text'; textareaに値を設定する方法が分かったので、次に「改行」について説明します。改行を入れるには「改行コード」と呼ばれる、特殊な文字を使います。バックスラッシュ(\)と小文字nとを組み合わせた\nが改行コードです。 ここまでを踏まえて、textareaに改行を入れる(改行を含む内容を入力する)には、次のようなJavaScriptを用います。 // <textarea id="textarea"> の値を設定する let textarea = document.getElementById('textarea'); textarea.value = 'こんにちは\n今日は\n良い天気ですね'; 上のスクリプトが実行されると、以下の内容がtextareaに設定されます。 こんにちは 今日は 良い天気ですね また、別の方法としてバッククォート(`)を使うことでも、改行を含む内容を設定できます。 // <textarea id="textarea"> の値を設定する let textarea = document.getElementById('textarea'); textarea.value = `こんにちは 今日は 良い天気ですね;` ただし、インデントが崩れて見づらくなるため、使い所には注意が必要でしょう。 [PR] Webデザインで副業する方法とは実際に書いてみよう 以下の textarea に対して、改行を含む内容を設定してみましょう。 <textarea id="test"></textarea> まずは textarea要素を取得しましょう。 let textarea = document.getElementById('test'); 続いて、textareaに値を設定してみましょう。 textarea.value = 'Hello\nmy\nworld'; これで改行ありの内容が設定できたかと思います。他にも色々と設定して試してみてください。 筆者プロフィール メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptのtextareaオブジェクトの操作方法を現役エンジニアが解説【初心者向け】

JavaScriptのtextareaオブジェクトの操作方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのtextareaオブジェクトの操作方法について詳しく説明していくね！ 大石ゆかり お願いします！   textareaオブジェクトとは textareaオブジェクトは、 <textarea>要素をJavaScriptで扱う際の通称です。<textarea>要素は複数行のテキストを入力するのに適した要素です。   テキストエリアの値を取得する方法 テキストエリアの値を取得するには value プロパティを使用します。 document.getElementById("input_message").value   [PR] Webデザインで副業する方法とはテキストエリアの内容を変更する方法 テキストエリアの内容を変更する場合もvalueプロパティを使用します。 document.getElementById("input_message").value = new_message   テキストエリアのサイズを変更する方法など テキストエリアのサイズを変更するにはrowsプロパティやcolsプロパティを使用します。 document.getElementById("input_message").rows="10" document.getElementById("input_message").cols="60" その他のプロパティなどについて、詳しくは以下の記事を参考にしてください。 <textarea> – HTML   実際に書いてみよう 今回のサンプルプログラムでは、テキストエリアの値の取得とサイズ変更を行います。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample1</title> </head> <body> <textarea id="input_message" name="input_message" rows="5" cols="30"></textarea> <input type="button" onclick="func1()" value="実行"> <input type="button" onclick="func2()" value="拡大"> <div id="output_message"></div> <script language="javascript" type="text/javascript"> // 入力された内容と出力領域に出力する function func1() { var input_message = document.getElementById("input_message").value;
JavaScript

HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 目次textarea要素とはtextarea要素の使い方実際に書いてみよう監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら！クリックで見る！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 inputタグとtextareaタグを使ってテキスト入力欄を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力欄の作り方 ネットショッピングで入力する名前・住所の記述欄は<input>タグで作られています。 データの入力方法には一行タイプのものや、ご意見・ご感想といった複数の行を入力できるもの、また ラジオボタンやチェックボックス など、さまざまな入力用の部品が用意されています。 今回は、以下の問い合わせフォームの名前とパスワード入力、ご意見・ご感想の入力欄の作り方について学んでいきましょう。   名前欄とパスワード入力欄の作り方 名前欄とパスワード入力欄を作る際、以下の2つのタグと属性を利用します。 <input>タグ type属性 これら2つのタグと属性について解説します。   <input>タグ <input>タグは、テキスト入力や送信ボタンなど、情報を入力（インプット）するときに使います。   type属性を付け足すことで、さまざまな入力用の部品を作ることが可能です。   type属性 type属性は、要素（ここでは<input>タグ）がどんな形式であるかを指定します。   問い合わせフォームを例に見てみましょう。 <input type>に”text”を設定すると「一行入力のテキスト欄」、<input type>に”password”を設定すると「パスワード形式の入力欄」を作ることができます。 <input>タグは単独で使うので終了タグはいりません。 <input type="text"> <input type="password">   ブラウザで表示しても、一見すると何も変わらない入力欄です。   しかし、テキスト欄に文字を入力してみると、”text”を指定した欄では文字が、”password”を指定した欄では黒丸が表示されました。 このようにtype属性の設定値に応じて、入力内容の表示を変えることができます。   大石ゆかり 氏名や電話番号のフォームの中に薄いグレーで文字を表示するのはどうやるんですかー？ 田島悠介 あれは、inputタグの中に「placeholder=”煌木 太郎”」って書くことで表示されるよ！ 大石ゆかり ・・・そもそもなんで入力されていない時に表示させるんですか？ 田島悠介 それはね、例を書くことでヒントになるからだよ！ 大石ゆかり なるほどっ！そう言われてみればそうですね♪   [PR] Webデザインで副業する方法とはご意見・ご感想欄の作り方 つづいて、複数の行になる長めの文章を入力する欄を作ってみましょう。 <textarea>タグ  <textarea>〜</textarea> 複数の行が入力できるテキスト欄を作ります。 rows属性 テキスト表示エリアの高さを行数で指定します。 cols属性 テキスト表示エリアの幅を文字数で指定します。   表示行数が10行、幅が60文字のご意見・ご感想入力欄を作りましょう。 <textarea>タグの間に文言を指定すると、あらかじめ入力欄に指定した文言が記入されます。 <textarea rows="10" cols="60">ここに記入してください</textarea>   ブラウザで表示すると、「ここに記入してください」の文言が入力された状態で表示されています。 「ここに記入してください」の文言を消して自由に記入してみましょう。     以下の図のように、シンプルな名前・パスワード入力欄とご意見・ご感想欄が完成しました。     フォームの作成には、この他に送信ボタンの作成や、データの送信先の指定などが必要です。 用途に応じてカスタマイズしていきましょう。   今回はinputタグとtextareaタグを使ってテキスト入力欄を表示する方法についてご紹介しました。 HTMLを使ってフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。 執筆してくれたメンター メンターSS 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり inputとtextareaってこうやって使い分けるんですね〜！ 田島悠介 inputタグは、テキスト入力欄の他にもチェックボックスやファイルを送信できるボタンなども設置できるんだよ！ 大石ゆかり すごい便利なんですね〜！ありがとうございましたっ！ 田島悠介 また何でも聞いてください！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

JavaScriptでtextareaのreadonly属性を取得、設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでtextareaのreadonly属性を取得、設定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次textarea要素とはtextarea要素の使い方実際に書いてみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでtextareaのreadonly属性を取得、設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに 今回は入力欄を読み取り専用（readonly）にする方法を、inputタグに似たtextareaというHTML要素を使って説明していきます。 読み取り専用（readonly）は入力フォームの最終の確認画面などで使われることがあります。 ぜひこちらの記事の内容を学習し、入力フォームの確認画面などに実装してみてくださいね。   textarea（テキストエリア）とは 複数行の文字入力が可能なHTML要素です。 テキストエリアの中の文字が長くなるとスクロールできるようになります。 利用規約など、たくさんの文字列を表示する必要があるときなどに利用されます。 MDNのリファレンスはこちら   [PR] Webデザインで副業する方法とはreadonly属性とは テキストエリアの入力欄を読み取り専用にすることで、入力できなくする際に指定する属性になります。 入力はできませんが、すでに入力されている文字を選択することはできるので、文章のコピーのみを許可する場合に使うと便利です。   readonly属性を設定する方法 以下のHTMLを準備します。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <textarea id="target" col="10" rows="7"> １行目 ２行目
JavaScript

最初のステップ！HTMLで覚えておきたい頻出タグ15選【初心者向け】現役エンジニアが紹介

HTMLに慣れる上で欠かせないタグをまとめて紹介しています。 どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。 実際に書きながら進めていくと理解しやすいです。 目次 HTMLとは HTMLの基本構造に関するタグ サイトコンテンツの作成でよく使うHTMLタグ   HTMLとは HTMLは、Hyper Text Markup Languageの頭文字を集めたもので、Webサイトの構造を形成するために使用される言語です。 HTMLではタグと呼ばれるマークアップのための目印を使用し、<●●>(開始タグ)～</●●>(終了タグ)という形を作り、その間に命令を書き実行します。 (終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。   [PR] Webデザインで副業する方法とはHTMLの基本構造に関するタグ HTMLの基本的な構造は、以下の通りです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header></header> <main></main> <footer></footer> </body> </html> それでは、ひとつずつ分解して見ていきましょう！   <html> HTML文書であることを示すタグで、(DOCTYPE宣言※のあとの)最初に<html>、最後に</html>と記述します。 すべてのHTMLタグは、この<html></html>の中に記述していきます。 ※DOCTYPE宣言は、その文書がHTMLですよということを表すおまじないのようなキーワードです。   <head> 文書全体の基本的な情報、ヘッダ情報を定義します。 このタグに記述した内容はページには表示されませんが、ブラウザや検索エンジンがその内容を読み取り、そのWebサイトの状態を判定するため、内容はしっかり吟味する必要があります。   <title> このタグはheadタグ内に記述します。 ブラウザのタブで表記される名前、ブックマークされた際に表示される名前になります。 <title>●●通販の△△</title>   <meta> このタグはheadタグ内に記述します。 Webサイトのメタ情報を設定するタグです。 メタ情報とは、検索エンジンやブラウザに伝える情報全般のことで、様々な種類があります。 以下はその中でもよく用いるメタ情報の記述です。 <!-- 文字コードをUTF8に指定する --> <meta charset="utf-8"> <!-- Webサイトの説明を検索エンジンに伝える --> <meta name="description" content="サイトの説明文"> <!-- サイトの表示領域を、閲覧するデバイスの幅に合わせる --> <meta name="viewport" content="width=device-width, initial-scale=1">   <link> このタグはheadタグ内に記述します。 指定した文書を参照するタグです。 外部スタイルシート（CSS）を適用する場合などはこれを使用します。 <!-- style.cssという外部スタイルシートを読み込む--> <link rel="stylesheet" href="style.css" type="text/css">   <body> Webサイトに実際に表示されるコンテンツすべてを囲むタグです。   <header> HTML5※から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します(ヘッダー情報を扱う<head>タグとは別のものです)。 主にサイトのタイトルや、ナビゲーション（ヘッダーメニュー）などが入ります。 ※HTML5とは？ HTML5はHTMLの仕様のひとつで、2014年に有効化しました。 それまでのHTML4と比べて全体的に機能が拡充されており、よりリッチなWebサイトの開発がしやすい仕組みになっています。 本記事執筆時点（2021年）では、HTMLといえばこのHTML5のことを指すことが多くなっています。   <footer> HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。 サイトに関する情報、著作権に関する注記、連絡先などが入ります。   サイトコンテンツの作成でよく使うHTMLタグ 次は、bodyタグの中でコンテンツの作成に使用する頻出タグの紹介です。   <p> 文章を作成する際に最もよく使うタグです。 正確には「段落（paragraph）」を表しており、別々のpタグで囲んだ文章は別の段落とみなされます。 例えば以下の場合、2つの<p>～</p>によって2つの段落に分けられています。 <p>この文は段落その1です。</p> <p>この文は段落その2です。</p>   <h1～h6> 各見出しを設定する際に使用します。 h1タグの内容がそのページで最も重要なキーワードとみなされ、ついでh2, h3と重要度が続きます。 文字の大きさだけを表すタグではなく、検索エンジンにより正しい情報を伝えるためのタグなので、内容には常に注意しましょう。 <h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6>   <img> 画像を貼り付ける際に使用するタグです。 配置や大きさの設定はCSSで行うことができます。 <img src="img_1.png">   <a> 他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。 開始タグでリンクしたい内容を属性で指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。 <a href="https://example.com/">リンク</a> リンクを別のブラウザタブで開きたい場合、以下のようにtarget=”_blank”という属性を追加します。 <a href="https://example.com/" target="_blank">リンク</a>   <ol>・<ul>・<li> リストを作成する際に使用する3種類のタグです。 olとliのセット、もしくはulとliのセットで用います。 <ol> リストを作成するタグです。 ordered listの略で、「1,2,3～」「a,b,c～」といった順番のあるリストを作成します。 <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ul> unordered listの略で、順番がないリストを作成します。 <li> list itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内に記述します。 それらのリストの各項目を作成するときに使用します。 コード例は、上記olタグとulタグのサンプルコードを参照してください。   <table>・<tr>・<td>・<th> テーブル(表)を作成する際に使用されます。 <table> 表の開始を示すタグです。 内部に<tr>・<td>・<th>が入ります。 デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。 色や大きさなどの設定はCSSで行います。 <tr> table rowの略で、テーブルの行に使用します。 このタグを使用した分だけ行が追加されます。 画像では全部で3つの行が作成されています。 <td> table dataの略で、テーブルのセルに使用します。 画像内の「内容」の部分にあたります。 <th> table
HTML

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次textarea要素とはtextarea要素の使い方実際に書いてみよう監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのtextarea要素の使い方を現役デザイナーが解説【初心者向け】