TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのElementオブジェクトについて現役エンジニアが解説しています。Elementオブジェクトとは、 HTML/XML要素を内包したオブジェクトのことで、属性の管理とスタイル属性を保有しています。ElementオブジェクトはIDやクラス名から取得することが出来ます。

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

JavaScriptのElementオブジェクトについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのElementオブジェクトについて詳しく説明していくね！

大石ゆかり

お願いします！

 

Elementオブジェクトとは

Elementオブジェクトとは、 HTML/XML要素を内包したオブジェクトになります。Elementでは属性の管理とスタイル属性を保有しています。

Elementオブジェクトの一例

主に下記の様なオブジェクトを内包しています。

  • Button
  • Checkbox
  • FileUpload
  • Hidden
  • Password
  • Radio
  • Reset
  • Text
  • Textarea
  • Submit
  • Select
  • Option

 

[PR] コーディングで副業する方法とは

Elementオブジェクトのプロパティの一例

上記のオブジェクトにはそれぞれにプロパティが設定されていますが、共通なプロパティもあります。

プロパティ 説明
id 要素のID(id属性の値)
className 要素のクラス(class属性の値)
innerHTML 要素の内容
className 要素のクラス(class属性の値)
clientHeight 要素の表示されている部分の高さ
clientWidth 要素の表示されている部分の幅
style 要素のスタイル(style属性の値)
childNodes 要素の子ノード

上記は代表的なもので、もっとたくさんのプロパティがあります。

Elementオブジェクトの取得方法

Elementオブジェクトの取得方法にはいくつか方法があります。まずは、一般的な方法としてオブジェクトのIDやクラス名を指定して取る方法です。

<p id="element_id" class="element_class">test</p>

//IDを指定する場合
var id_elm = document.getElementById("element_id");

//クラス名を指定する場合
var class_elm = document.getElementByClassName("element_class");

このほかにも、「document.querySelector()」という関数もあります。これは、IDでもCLASSでも使えるのですが、IDの場合は”#element_id”、CLASSの場合は”.element_class”で指定する必要があります。

今回は、取得方法のみを紹介しましたが、新しいオブジェクトを作成する「createElement」や逆に子要素を削除する「removeChild」などもあります。これらを利用し、Elementオブジェクトの操作を行っていきます。

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでセレクトボックスの値を動的に生成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

JavaScriptで文字列を操作する方法【初心者向け】

JavaScriptについてプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptで文字列を使う方法について解説します。 また、...
JavaScript

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

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

JavaScriptで「Cannot read property 'プロパティ名' of undefined」

JavaScriptで「Cannot read property 'プロパティ名' of undefined」というエラーが出る原因と対処法について、テックアカ...
JavaScript

JavaScriptのswitch文で正規表現を使う方法を現役エンジニアが解説【初心者向け】

JavaScriptのswitch文で正規表現を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します...
JavaScript

JavaScriptによる図形描画入門を現役エンジニアが解説【初心者向け】

JavaScriptによる図形描画入門について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJ...
JavaScript

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

jQueryでeachメソッドを使って繰り返し処理をする方法【初心者向け】

どのプログラミング言語にも繰り返し処理を実装するためのメソッドは必ず存在しています。jQueryにももちろん存在し、eachというメソッドで実装することができます。 今回は、JavaScriptのライブラリであるjQueryのeachメソッドについて解説していきたいと思います。 jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 eachメソッドとは eachメソッドの構文 実際に書いてみよう まとめ eachメソッドとは eachメソッドは、jQueryに実装された便利メソッドです。 jQueryは、HTML要素（DOM)をJavaScript側で操作することに特化したライブラリであり、eachメソッドを使うことで、プルダウン選択肢などの複数のHTML要素をfor文のように一括で処理することができます。 また、eachメソッドはDOMだけでなく、配列やオブジェクトが持つ複数のデータを一括処理することができる汎用メソッドです。 jQuery.each()を適切に使いこなすことで、for文などのJavaScript標準の関数ではできなかった複数要素に関する処理が容易に実現できます。 [PR] コーディングで副業する方法とはeachメソッドの構文 1.DOMを操作する場合専用の構文 $(セレクタ).each( function( index, element ){ // DOMに関する処理 }; まずはこの構文だけ覚えて使いこなせるようになりましょう。 2.汎用的構文 $.each( 対象オブジェクト, function( key, value ){ // 各データに関する処理 }); 「対象オブジェクト」の部分に、配列やオブジェクトを格納した変数を記述することで、中身のデータを一括して処理することができます。 各構文について それぞれの構文のfunctionが持つ引数は、仮引数です。ラムダ式をご存知の方は、ラムダ式と考えてください。eachメソッドは操作対象が持つ特定構造の全複数要素に対して個別処理することが前提のため、自動的に仮引数に値がセットされる仕組みです。function( x , y ){ }の部分は、以下のような書き換えも可能です。 ラムダ式でfunction部分を記述する場合 ( index, element ) => { // 各データに関する処理 } 1.DOMを操作する場合専用の構文について DOMを操作する場合専用の構文 jQueryでは、$(セレクタ)と記述するだけでHTML要素（DOM)が取得できますが、eachメソッドは「複数要素が取得された状態」を前提としていることに注意してください。 例えば、以下のようなHTMLがあった場合 HTML <div id="divArea"> <p>段落１の文章です</p> <p>段落２の文章です</p> <div> 複数のpタグをeachメソッドにより一括処理することができます。この場合、$(セレクタ) 部分の指定方法は $(“#div > p”) または $(“#div”).children() となります。 jQueryにより複数のpタグ要素を取得して、以下のような操作が可能です。 JavaScript $("#divArea >
JavaScript

JavaScriptでclass属性値を変更する方法を現役エンジニアが解説【初心者向け】

JavaScriptでclass属性値を変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでclass属性値を変更する方法について詳しく説明していくね！ 大石ゆかり お願いします！   class属性値とは class属性値とは、HTMLの要素に対して任意の文字列などで分類名を名付けた値のことです。 例えば、class属性値を指定することでスタイルシート(CSS)に定義されたスタイルなどを適用することができます。 加えて、複数の要素を合わせることも可能です。 <p class="bold">This id bold</p> p.bold { font-weight:bold; } JavaScriptでclass属性値を取得する方法 JavaScriptでclass属性値を取得する場合は、querySelectorメソッドやgetElementByIdメソッドなどでinput要素を取得後に、classNameやclassListを使います。   実行例 // <p class="class1 class2 class3"> がターゲット let element = document.querySelector('p'); console.log(element.className); // => 'class1 class2 class3' console.log(element.classList); // => ['class1', 'class2', 'class3', value: 'class1 class2 class3'] // ※DOMTokenList   jQueryの場合にはattrメソッドやpropメソッドを使います。  実行例 // <p class="class1 class2 class3"> がターゲット let element = $('p'); console.log(element.attr('class')); // => 'class1 class2 class3'   [PR] コーディングで副業する方法とはJavaScriptでclass属性値を変更する方法 JavaScriptでclass属性値を変更する場合は、querySelectorやgetElementByIdなどでinput要素を取得後に、classNameやclassListを使って変更できます。 classNameを使う場合は、値の書き換えであって追加ではないことに注意しましょう。   以下、コード例となります。 // <p class="class1 class2 class3"> がターゲット let element = document.querySelector('p'); element.className = 'class4'; // ↑ <p class="class4"> となる element.className
JavaScript

JavaScriptでDOMを操作する方法【初心者向け】

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次ElementオブジェクトとはElementオブジェクトの一例Elementオブジェクトのプロパティの一例Elementオブジェクトの取得方法筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 （動画は2つに分かれています） テキストと動画で、解説に少し違う部分があります。 テキストは、JavaScriptの「ES6(ES2015)」というバージョンに基づいて解説しています。 動画は、その1つ前の「ES5」というバージョンに基づいて解説しています。   DOMとは JavaScriptでは、表示されたWebサイトを動的に書き換えることができるというのが大きな特徴です。 そして、その特徴を支えているのがDOM（Document Object Model）です。   大石ゆかり 田島メンター！DOMというのは何でしょうか？ 田島悠介 簡単に言うと、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりする仕組みのことなんだ。 大石ゆかり HTMLをJavaScriptで操作できるってことですか？ 田島悠介 その通り！実際にDOMがどんなものなのか詳しく解説していくね。   Windowオブジェクト DOMを理解するには、まずWindowオブジェクトを知る必要があります。 Windowオブジェクトは、ブラウザが持っている情報をそのまま持っています。 ブラウザのコンソールに以下のように記述すると、Windowオブジェクトの中身が見られます。 console.log(window); Windowオブジェクトが持っている、プロパティやメソッドがずらりと出てきます。 開発でよく使われるWindowオブジェクトのプロパティ / メソッドには、以下のようなものがあります。 location : 現在開いているページのURLに関する情報が格納されるプロパティです。 innerWidth / innerHeight : ブラウザ画面の幅や高さの情報が格納されるプロパティです。 alert : アラートを表示するためのメソッドです。 setTimeout / setInterval : 一定時間後や一定時間おきに処理を行うためのメソッドです。 また、Windowオブジェクトのプロパティ / メソッドのアクセスの際には、windowの記述を省略できるという特性があります。 console.log(window.location); console.log(location); //どちらも現在のURLの情報が入ったオブジェクトが表示される！ まとめると、今開いているタブが持っている情報をすべて格納しているのがWindowオブジェクトということです。   Documentオブジェクト DocumentオブジェクトはWindowオブジェクトのプロパティの1つで、こちらも現在のサイトに関する情報を保持しています。 Windowオブジェクトがブラウザそのものに関する情報だったのに対し、Documentオブジェクトはブラウザで表示しているHTMLに関する情報と言えるでしょう。 中身をみていくと、いろいろプロパティがありますね。 たとえば、bodyはHTMLのbodyタグの中身をあらわしています。   本題のDOMに戻ります。 名前の通り、DOM（Document Object Model）ではDocumentオブジェクトを通して、個々の要素を取得・操作できるのです。 次の章からは、DOMの仕組みやDOMの操作方法を具体的に見ていきましょう。   DOMのツリー構造 それでは、DOMの操作の仕方について見ていきましょう。 個別の操作方法の前に、「ツリー構造」と言われるDOMの構造について見ていきます。 ツリー構造は簡単に言えば、1つの親要素の下に子要素があって、さらにその子要素がそれぞれ親になり、またその下に子要素を持つ……というぶら下がり構造を意味します。   実際のHTMLのコードも、ツリー構造として捉えられます。 <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>見出し</h1> <div> <p>テキスト1</p>
JavaScript

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

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ElementオブジェクトとはElementオブジェクトの一例Elementオブジェクトのプロパティの一例Elementオブジェクトの取得方法筆者プロフィール そもそも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 elem_purple =
JavaScript

JavaScriptのinnerHTMLへの処理が動かない場合の解決方法を現役エンジニアが解説【初心者向け】

JavaScriptのinnerHTMLへの処理が動かない場合の解決方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 JavaScriptのinnerHTMLを利用することで、HTML要素の中身を変更することができます。 実務でも、JavaScriptのinnerHTMLを利用して表示コンテンツの変化処理を行いますので、ぜひ学習してみてください。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのinnerHTMLへの処理が動かない場合の解決方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 innerHTMLとは JavaScriptによってinnerHTMLを操作する方法 JavaScriptのinnerHTMLへの処理が動かない主な原因と対応方法 まとめ   innerHTMLとは innerHTMLは、Elementオブジェクトのプロパティです。 Elementオブジェクトは、HTML要素のオブジェクトなどを含む要素を表すオブジェクトです。 そのプロパティであるinnerHTMLは、HTML要素の中身が格納されています。 innerHTMLを参照すればHTMLの中身が取得でき、代入すればHTMLを書き換えることもできます。   [PR] コーディングで副業する方法とはJavaScriptによってinnerHTMLを操作する方法 Elementオブジェクトのプロパティなので、まずはElementを取得する必要があります。 Elementを取得したら、.innerHTMLと記述すれば中身の参照ができ、.innerHTMLに代入すれば中身の置き換えができます。   innerHTMLを操作する例 それでは具体的に見てみましょう。 下記のHTMLのdiv要素をinnerHTMLで操作する例を紹介します。 <div id="target"><span>あいうえお</span></div> まずはElementの取得です。 JavaScriptでElement（今回はdiv要素）の取得用にidにtargetという名前をつけてあります。 この名前を要素を取得するメソッドのgetElementByIdの引数に指定することで取得ができます。 let element = document.getElementById('target'); これでelementという変数にElementであるdiv要素が取得できました。 次はinnerHTMLを使ってdiv要素の中を参照します。 element.innerHTML これで下記のようなdiv要素の中の値が参照できます。 <span>あいうえお</span> 表示結果 See the Pen Untitled by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   innerHTMLで置き換えする例 置き換えのケースを2つ紹介します。 １．空文字で置き換えることでdiv要素の中を全てなくす（消す）ことができます。 let element = document.getElementById('target'); element.innerHTML = ""; ２．HTMLの要素と一緒に記述することで、div要素の中を自由に書き換えることができます。 let element2 = document.getElementById('target2'); element2.innerHTML = "<span>タグ付きで置き換え</span>";  表示結果   See the Pen innerHTMLで置き換え by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   JavaScriptのinnerHTMLへの処理が動かない主な原因と対応方法 参照で動かない場合は、Elementの取得ができていない可能性があります。 取得したElementが空になっていないか確認してください。 置き換えで動かない場合は、HTMLの内容を確認してください。 置き換えをする場合に、正しくない形のHTMLを代入しようとすると構文エラーを表すSyntaxErrorになります。 HTMLの< >のようなカッコの閉じ忘れがないか、全角の文字が入っていないかなどを確認してください。   まとめ HTMLの操作でも使用するinnerHTMLを紹介しました。 JavaScriptのinnerHTMLを利用することで、HTML要素の中身を変更できました。 要素の中身を変更する事ができるということは、表示上コンテンツを消すことも可能でした。 動作しない場合は、Elementの状態や、エラー状態を確認していただくと良いですよ。   この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：金融・小売・製造業種の基幹システムから人工知能研究支援まで20年以上の開発実績。経営者目線で、開発言語にとらわれない横断的なマネジメントを行うCTO業務や、新規事業開発を行う前段階のプロトタイプ開発、事業会社非IT社員向けDXプログラミング思考研修を得意とする。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

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

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次ElementオブジェクトとはElementオブジェクトの一例Elementオブジェクトのプロパティの一例Elementオブジェクトの取得方法筆者プロフィール そもそも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] コーディングで副業する方法とは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（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのElementオブジェクトについて現役エンジニアが解説【初心者向け】