TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのネスト構造のテーブルの作り方を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLのネスト構造のテーブルの作り方を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのネスト構造のテーブルの作り方について解説しています。最初にtableタグ、trタグ、tdタグを使った基本のテーブルの作成方法を説明します。次にテーブルをネスト構造で作成する場合の書き方をサンプルコードで見ていきましょう。

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

HTMLのネスト構造のテーブルの作り方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

ネスト構造のテーブルの作り方について詳しく説明していくね！

大石ゆかり

お願いします！

 

HTMLの基本的なテーブルの作り方 （table要素、tr要素、td要素などの使い方）

HTMLでテーブルを作るには
  • table要素
  • tr要素
  • td要素
  • th要素
を用いてマークアップをしていきます。
まずはtable要素を用いて表組み全体にするマークアップをしていきます。そして横1行の中にセルがいくつか入るように表を構成していきます。横1行をtr要素で囲み、そのなかのセルはtd要素で構成されることになります。
td要素を多くもつことはできますが、そのなかのセルに「見出し」の意味を持たせたいものにはtd要素ではなく、th要素を用いてマークアップしていきます。
表の中のセルは全てtd要素とすることもできますが、見出し部分の背景を目立たせたい場合などはth要素でマークアップしてうえでCSSで装飾をしていきます。

 

ネスト構造のテーブルの作り方 （テーブルを複数の要素で構成する方法）

ネスト構造とは入れ子にしている構造のことを指します。
入れ子とは開始タグと閉じタグに同じ階層で囲っていくことを言い、HTMLでテーブルを作る場合には必ずtableタグで開始し、tableの閉じタグで囲うように表記します。
table要素の中にtr要素、tr要素の中にtd要素を記述していきます。

 

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

実際に書いてみよう

テーブルを作成していきます。

実際にネスト構造にする場合には半角スペースで２個程度字下げをおこない、開始タグと閉じタグの上下の位置をあわせるようにすると、確認をしやすく綺麗に記述することができます。

<table>

  <tr>

    <th>タイトル１</th><td>データ１</td><td>データ２</td><td>データ３</td>

  </tr>

  <tr>

    <th>タイトル２</th><td>データ１</td><td>データ２</td><td>データ３</td>

  </tr>

  <tr>

    <th>タイトル３</th><td>データ１</td><td>データ２</td><td>データ３</td>

  </tr>

</table>

 

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでタブ文字を入れる方法を現役デザイナーが解説【初心者向け】

HTMLでタブ文字を入れる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTMLでタブ文字を...
HTML

HTMLのコードを効率良く整理する方法を現役デザイナーが解説【初心者向け】

HTMLのコードを効率良く整理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLでのGoogleMapの埋め込み方法を現役エンジニアが解説【初心者向け】

HTMLでのGoogleMapの埋め込み方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
HTML

jQueryでHTMLの要素を削除する方法を現役デザイナーが解説【初心者向け】

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

コーディングの基礎！HTMLでdivタグを使う方法【初心者向け】

HTMLで書くdivタグの使い方を解説しています。 コーディングする上で基礎の基礎にあたるので、HTMLを身につけようと思っている人は必須で覚えておきまし...
HTML

HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】

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

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

表で見やすくしたい！HTMLでテーブルを表示する方法【初心者向け】現役Webデザイナーが解説

この記事ではHTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介します。 HTMLでテーブルを表示する方法を学習していただくことで、HTMLを利用してエクセルのような表を作れるようになります。 表を利用できるようになると、今まで文章だけで記載していたコンテンツを、わかりやすく一覧できるコンテンツにすることが可能です。 一覧で、コンテンツの要点だけを伝えたい場合や、数字を扱うコンテンツの場合に、表を使ってわかりやすい表示を作ってみましょう。 目次 テーブル（表とは） HTMLでテーブルを表示するために使うタグ テーブルを実際に作ってみよう 応用編：テーブルの構造をまとめる テーブルのデザインを変更する方法 表をスマホ対応で表示する方法   テーブル（表とは） まずはテーブル（表）の基礎を知っておきましょう。 HTMLでも表をつくることができます。 表はテーブルと呼ばれます。   横一列のデータのことを「行（レコード）」といい、ひとつのデータの塊を意味します。 縦一列のデータを「列（カラム）」、ひとつひとつのマスのことを「セル」と呼び、セルの中に各データの値を入れていきます。 「行（レコード）・列（カラム）・セル」は、Excelやデータベースでデータを管理するSQLでも共通している概念ですのでぜひ覚えておきましょう。   [PR] Webデザインで副業する方法とはHTMLでテーブルを表示するために使うタグ HTMLでは以下のタグを使ってテーブルを表示します。   表（テーブル）を作る <table>表（テーブル）</table> 表（テーブル）をつくるタグです。   見出しを作る <th>見出し</th> セルの要素であり、表の見出しを意味します。   データをいれるセルを作る <td>データ</td> セルの要素であり、表の値(データ)を意味します。   横方向のセルをまとめる <tr>tdやthなどの要素</tr> 表でつくられる横一列のセルをまとめます。       テーブルを実際に作ってみよう <table>タグに「border=”1″」を加えると枠が表示されます。 <table>タグのなかに<tr>タグで各データの行を指定し、そのなかに<td>タグでデータを入力します。 <th>タグではデータの見出しをつけましょう。   HTML <table border="1"> <tr> <th>日本語</th> <th>英語</th> </tr> <tr> <td>東京</td> <td>Tokyo</td> </tr> <tr> <td>大阪</td> <td>Osaka</td> </tr> </table>   解説 <table border=”1″>でテーブルを作成することを意味しています。 borderは枠線の太さを指定していますが、html5では1しか指定できません。 枠線の表示に関してはcssで指定することが実務でも一般的です。 cssでテーブルのデザインを変える方法については次の記事を参考にしてみてください。 サンプル有り！CSSで書くテーブル（table）の作り方 | TechAcademyマガジン   ２行目の <tr>では、横方向の<th>をまとめています。 つまり、 <th>日本語</th> <th>英語</th> が横に並ぶように<tr>で囲んでいます。   ３行目と４行目の<th>では、表の見出しを作っています。 見出しがあると、見出しだけ別の色にしたりすることで、表が非常にわかりやすくなります。   ６行目の <tr>では、具体的なデータである横方向の<td>をまとめています。 <td>東京</td> <td>Tokyo</td> の部分が該当し、thで指定した日本語と英語に対応するように、東京とTokyoというデータが表示されます。   １０行目の <tr>では、具体的なデータである横方向の<td>をまとめています。 <td>大阪</td> <td>Osaka</td> の部分が該当し、thで指定した日本語と英語に対応するように、大阪とOsakaというデータが表示されます。   表示結果 ブラウザで確認するとこのように表示されました。 テーブルが表示され、<th>タグで囲った部分が太字になりました。 <tr>タグは横一列のデータを「行」としてまとめ、その行をつくる値が<td>で表示されます。   動作確認 See the Pen table-html by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   応用編：テーブルの構造をまとめる テーブルは<thead><tbody><tfoot>のタグを使って表の構造をまとめることができます。 表の構造をまとめるということは、これまでtheadで表題だけ、tbodyでデータ部分だけ、tfootでフッターだけをそれぞれひとまとめのグループとして考えることが可能です。 例えばtheadだけグループにすることで、縦方向に長い表であったとしても、theadで囲まれた部分だけ固定して表示することが可能になります。 表の構造をまとめることで、ユーザーがより理解しやすいコンテンツを、よりわかりやすく一覧できるようになります。   タグの意味まとめ それぞれのタグは下記の意味です。   table headをグループ化する <thead>〜</thead> （<table>タグ内で）テーブルのヘッダー部分を意味します。   table bodyをグループ化する <tbody>〜</tbody> テーブルのボディ部分を意味します。   table
HTML

MySQLでALTER TABLEを使ってテーブル構造を変更する方法【初心者向け】

MySQLの初心者向けに、基本的な使い方を解説する記事です。 今回は、ALTER TABLEを使ってテーブル構造に変更・追加・削除といった操作を加える方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ALTER TABLEを使うと、MySQLの既存のテーブルの定義（構造）を変更できます。 実務でも、ALTER TABLEを使ってテーブル構造に変更・追加・削除し、Webアプリケーションのデータ処理を行うので、ぜひ学習してみてください。 目次HTMLの基本的なテーブルの作り方 （table要素、tr要素、td要素などの使い方）ネスト構造のテーブルの作り方 （テーブルを複数の要素で構成する方法）実際に書いてみよう監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   今回は、このようなデータの入ったuserというテーブルをもとに解説を進めます。   大石ゆかり 田島メンター！テーブルを作成して、データを追加できるようになったんですが、作成した後にテーブルの変更ってできるんですか？ 田島悠介 作成したテーブルの内容の変更やフィールドの削除などできるんだ。 大石ゆかり 後からでも全部作り直せる感じでしょうか？ 田島悠介 そうだね。SQLiteなど簡易なデータベースは注意が必要だけど、普通のデータベースは後からでも変更できるんだ。変更の仕方を見てみよう！   テーブル名を変更する際に利用するコマンド テーブル名を変更する際には次のように操作します。 テーブル名を表示するコマンドは必須ではありませんが、名前が変更できたかを確認する方が安心です。 テーブル名を表示 テーブル名を変更   テーブル名一覧を表示するコマンド テーブル名を変更する場合、show tables;を利用します。 show tables;   テーブル名を変更するコマンド テーブル名を変更する場合、alter tableを利用します。 alter table  テーブル名 rename  新テーブル名;   テーブルの中のデータを表示するコマンド テーブルの中のデータを表示する場合、select を利用します。 select * from テーブル名;   データ型を確認するコマンド テーブルのデータ型を確認するためには、descを利用します。 desc テーブル名;   ALTER TABLEを使ってテーブル名を変更してみよう 実際にALTER TABLEを使ってテーブル名を変更してみましょう。   テーブル名を表示 まずはshow tables;を使ってテーブル名を表示させておきましょう。 コマンド  show tables; 実行結果 解説 show tables;というコマンドを実行すると、userというテーブルが表示されました。   テーブル名を変更 alter tableを使って、usersという名前に変えてみたいと思います。 コマンド alter table user rename users; 実行結果 解説 alter table user rename users;というコマンドで、userテーブルをusersテーブルに名称変更しました。 「Query OK」と表示されれば変更完了です。   テーブル名を再確認のため表示 show tablesを利用して、再度テーブル名を確認します。 コマンド show tables; 実行結果 解説 userからusersに変わっています。 これでテーブル名の変更ができました。   [PR] Webデザインで副業する方法とは ALTER TABLEを使ってフィールドを追加する方法 テーブルの中にはいくつかフィールドがありますが、新しいフィールドを追加できます。 フィールドを追加するためのコマンドは次の通りです。 alter table テーブル名 add フィールド名 データ型;   テーブルの中のデータを表示 現在のテーブルの中身を表示させます。 コマンド select * from users; 実行結果 解説 select * from users;では、テーブル名がusersのテーブルの中身を表示しています。 id・username・organization_id・email・password・login_num と、6つのフィールドがあります。   フィールドを追加する フィールドを追加する方法を解説します。 コマンド alter table users add age int; 実行結果   alter table
MySQL

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。   HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。 なお、今回はBootstrapのバージョン「3.3.5」を使用します。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！Bootstrapというのは何ですか〜？ 田島悠介 Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 大石ゆかり フロントエンドというとHTML・CSS・JavaScriptですか？ 田島悠介 そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。   目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。   Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。   このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。 この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。     [PR] Webデザインで副業する方法とはBootstrapを使う準備 実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。   Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。 ソースをダウンロードして、ローカルに配置して読み込む すでにホストされているファイルをインターネット経由で読み込む 今回は、前者の方法を紹介します。   ダウンロードするには、BootstrapのTOPページにアクセスしましょう。 「Download Bootstrap」のボタンをクリックしてください。   次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。   ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。   続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み -->
Bootstrap

JavaScriptでtableの値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでtableの値を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのJavaScript講座の内容をもとに解説しています。 目次HTMLの基本的なテーブルの作り方 （table要素、tr要素、td要素などの使い方）ネスト構造のテーブルの作り方 （テーブルを複数の要素で構成する方法）実際に書いてみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでtableの値を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに 今回はJavaScriptからtableタグの特定のセルの値を取得する方法について学びます。 サーバサイドで作成した動的なtableタグ内の値を、画面上で別の箇所に表示したい場合や、判定などを行う際の文字列を取得するときに役立ちます。 表を作成する際には、tableタグの代わりにdivタグを使うこともありますが、まだtableタグは多くのサイトで使われていますので、ぜひこの機会にtableタグもJavaScriptで扱えるように学びましょう。   table要素を取得する方法 他のHTML要素と同じように取得できます。 例えば、idを設定している場合は、下記のようにgetElementByIdメソッドで取得します。 document.getElementById(【IDの名前】);   [PR] Webデザインで副業する方法とはtableの行数、列数を取得する方法 取得したテーブル要素であるHTMLTableElementには、行の情報を持つrowsというプロパティがあります。 このrowsプロパティの数（length）が行の数です。 HTMLTableElement.rows.length   同じように行の要素であるHTMLTableRowElementには、セルの情報を持つcellsというプロパティがあります。 このcellsプロパティの数（length）が列の数です。 HTMLTableRowElement.cells.length   tableの値を取得する方法 テーブルの値はそれぞれのcell（枠）の中に入っています。 つまりcellの中の値を取得することでテーブルの値を取得できます。 HTMLTableCellElement.innerHTML   実際に書いてみよう まずはHTMLでテーブルを用意します。 JavaScriptからのアクセス用に、idをtargetTableという名前で設定しています。 <table border="1" id="targetTable"> <thead> <tr> <td>名前</td> <td>年齢</td> </tr> </thead>
JavaScript

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次HTMLの基本的なテーブルの作り方 （table要素、tr要素、td要素などの使い方）ネスト構造のテーブルの作り方 （テーブルを複数の要素で構成する方法）実際に書いてみよう監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const
JavaScript

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

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次HTMLの基本的なテーブルの作り方 （table要素、tr要素、td要素などの使い方）ネスト構造のテーブルの作り方 （テーブルを複数の要素で構成する方法）実際に書いてみよう監修してくれたメンター そもそも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のネスト構造のテーブルの作り方を現役デザイナーが解説【初心者向け】