TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptによるhtmltagの要素取得について現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptによるhtmltagの要素取得について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptによるhtmltagの要素取得について現役エンジニアが解説しています。htmltagを取得する方法には、ducumentオブジェクトのdocumentElementプロパティを参照します。documentElementの書き方や使い方、htmltagの要素取得について説明します。

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

JavaScriptによるhtmltagの要素取得について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptによるhtmltagの要素取得について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

ducumentElementプロパティとは

ducumentElementプロパティとは、JavaScriptに標準で含まれているdocumentオブジェクトのプロパティです。

WebページのようなHTMLで記述されたドキュメントの場合は、ルート要素（全体を囲っている大元の要素）である<html>要素となります。
 

[PR] フロントエンドで副業する学習方法を動画で公開中

documentElementプロパティの使い方

documentElementプロパティは、documentオブジェクトのプロパティなので下記のように記述することで使えます。

document.documentElement

HTMLで記述されたWebページで実行した場合は、HTML要素が格納されています。

HTML要素はHTMLのドキュメントの大元であるルート要素なので、そこからheadやbodyのような子要素へとたどることができます。

XMLで記述されたドキュメントを読み込むなどして、documentElementプロパティをを使った場合はXMLのルート要素が格納されています。この場合は、XMLのルート要素から追加や削除などの操作ができます。
 

documentElementを利用してhtmltagの要素を取得してみよう

HTML要素を取得するにはHTMLで記述されたドキュメントに対して、下記の記述を実行することで取得できます。

let rootElement = document.documentElement;

これでrootElementという変数にHTML要素が取得されています。

ルート要素であるHTML要素が取得できたので、HTML要素を使った処理をいくつか紹介します。

言語の定義であるlang属性が設定されている場合は、下記のように記述することで確認できます。

console.log(rootElement.lang);

日本語環境のjaが設定されていれば、コンソールにjaと表示されます。

また、childNodesプロパティをつなげることでHTMLの子要素であるhead要素やbody要素にもアクセスできます。

console.log(rootElement.childNodes);

ここでは、コンソールに子要素のリストを表示しています。
 

まとめ

ルートの要素が格納されているducumentElementプロパティを紹介しました。

ルート要素であることを理解していれば、WebサイトのようなHTMLで作成されたものでもXMLのドキュメントでもいずれにも使うことができます。
 

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptのswitch文で条件をネストする方法を現役エンジニアが解説【初心者向け】

JavaScriptのswitch文で条件をネストする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
JavaScript

JavaScriptで文字列を大文字・小文字に変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列を大文字・小文字に変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

JavaScriptで変数を使う方法【初心者向け】

JavaScriptの使い方を初心者向けに紹介した記事です。 今回は、JavaScriptで変数を使う方法について解説します。JavaScriptに限らず...
JavaScript

JavaScriptのalertダイアログにアイコンを表示させる方法を現役エンジニアが解説【初心者向け】

JavaScriptのalertダイアログにアイコンを表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
JavaScript

JavaScriptでHTMLのエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLのエスケープ処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します...
JavaScript

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

JavaScriptで乱数を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 &nb...
JavaScript

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

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

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

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

今回は、JavaScriptでDOMを操作する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそも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でlengthを使って文字数をカウントする方法を現役エンジニアが解説【初心者向け】

JavaScript文字数をカウントする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列の長さ（文字数）や配列の要素数などを調べるとき「length」を使用します。 この「length」は文字列（String）や配列（Array）などのオブジェクトに定義されているプロパティです。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   ※オブジェクトとはデータ（値）とそのデータを処理する機能（関数）を1つにまとめた集合体です。オブジェクトについて、詳しくは公式ドキュメントの「JavaScript オブジェクトの基本」をご覧ください。   大石ゆかり JavaScriptで文字数を数えるにはどうしたらいいですか？ 田島悠介 JavaScriptで文字数を数えるにはlengthプロパティが使えるよ。 ただ、lengthプロパティで取得できるのは文字数だけじゃないんだ。 配列のlengthプロパティは要素数、関数のlengthプロパティは引数の数も取得できるんだよ。 大石ゆかり lengthプロパティって文字数だけじゃないんですね。 田島悠介 そうなんだ。 lengthプロパティを使うオブジェクトによっていろいろ使い方が変わるんだ。 じゃあ、さっそくJavaScriptで文字数をカウントする方法について詳しく説明していくね！ 大石ゆかり お願いします！   lengthプロパティとは 文字列の長さや配列の要素数を取得するプロパティがlengthです。 他にも関数の引数の数を調べたり、数値の桁数を取得したりできます。   lengthプロパティの使い方 書式 // 文字列 文字列の文字数 = 文字列.length; // 配列 配列の要素数 = 配列.length; // 関数 関数の引数の数 = 関数名.length; 文字列のlengthプロパティで、文字列の文字数を取得します。 文字列が空ならlengthプロパティは 0 です。 全角と半角文字の区別はなく数えられます。 配列なら要素数、関数なら引数の数がlengthプロパティの戻り値です。   [PR] フロントエンドで副業する学習方法を動画で公開中文字列の文字数（length）を取得する 文字列の文字数を取得するサンプルコードです。 ソースコード const str = 'TechAcademyマガジン'; // HTMLに文字数を出力 document.body.textContent = str.length; 表示結果 See the Pen js_length_string by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 const str = 'TechAcademyマガジン'; 文字数を調べたい文字列を定数 strに代入します。 document.body.textContent = str.length; Webページに文字数を出力します。 変数 strに入っている文字列「TechAcademyマガジン」は全部で15文字なので、str.lengthの値は「15」です。 ※「const」は固定された値である定数を宣言するキーワードです。constキーワードについて詳しくは解説記事「JavaScriptで書く「var,let,const」の違いと使い分け方法」をご覧ください。   【参考】数値の桁数を取得する 文字数を取得するlengthプロパティを応用して、数値の桁数を取得できます。 String( 数値 ).lengthで指定された数値の桁数が求められます。 数値の変数でも同じように求められますが、数値の変数なら 数値の変数.toString().length で求める方法もあります。 See the Pen js_length_int by mentor-inoue-y (@mentor-inoue-y) on CodePen.   配列の要素数（length）を取得する 配列の要素数を取得するサンプルコードです。 ソースコード const fruits = ['りんご', 'バナナ', 'ぶどう']; //配列の要素数を取得 document.body.textContent = fruits.length; 表示結果 See the Pen js_length_array
JavaScript

JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法について解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 組み込み関数のDateオブジェクトとは Dateオブジェクトを実際に生成してみよう Dateオブジェクトのプロパティを呼び出してみよう 　プロパティ1. getFullYear()（現時点での年を取得する） 　プロパティ2. getMonth()+1（現時点での月を取得する） 　プロパティ3. getDate()（現時点での日を取得する） 　プロパティ4. getDay() （現時点での曜日を取得する） 　5. 最後に（現時点での年・月・日・曜日を一気に取得する）     組み込み関数のDateオブジェクトとは 組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Dateオブジェクトは、組み込み関数の1つで、日付を扱う際に使います。   参考までに、組み込み関数の代表的なものには次のようなものがあります。   <組み込み関数（代表的なもの）> String　文字列を扱う Number　数値を扱う Boolean　論理値を扱う Array　配列を扱う Date　日付を扱う Math　数値計算で扱う   はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。 組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。 var オブジェクト名= new object();    大石ゆかり 田島メンター！日付を扱うにはどうしたらいいでしょうか？ 田島悠介 Dateオブジェクトっていう組み込みオブジェクトが用意されているので、それを使うといいね。 大石ゆかり 日付を処理する関数は最初から用意されてるんですね。 田島悠介 他のプログラミング言語でもそうなんだよ。さっそくDateオブジェクトについて見てみよう！   [PR] フロントエンドで副業する学習方法を動画で公開中Dateオブジェクトを実際に生成してみよう 適当なオブジェクト名（today）をつけ、Dateオブジェクトを生成してみましょう。日付に関する様々なプロオパティやメソッドを出力することができます。 var today = new Date(); <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> var today = new Date(); </script> </body> </html>   ここまでできたら、console.logを使って日付に関する様々なプロオパティやメソッドを呼び出してみます。 次の章から見ていきましょう。     Dateオブジェクトのプロパティを呼び出してみよう Dateオブジェクトでの文字列の操作の仕方を、4つのプロパティを例に見ていきましょう。 プロパティ1. getFullYear()（現時点での年を取得する） プロパティ2. getMonth()+1（現時点での月を取得する） プロパティ3. getDate()（現時点での日を取得する） プロパティ4. getDay() （現時点での曜日を取得する） 5. 最後に（現時点での年・月・日・曜日を一気に取得する）     プロパティ1.
JavaScript

JavaScriptでArrayオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptの組み込み関数の1つ、JavaScriptでArrayオブジェクトを使う方法について解説します。 また、入門向けのJavaScriptの学習サイトもまとめて紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 組み込み関数のArrayオブジェクトとは Arrayオブジェクトを実際に生成してみよう Arrayオブジェクトのプロパティ・メソッドを呼び出してみよう 　プロパティ1. length（配列の長さを取得する） 　メソッド1. slice()（配列の要素を取り出す） 　メソッド2. reverse()（要素の順番をひっくり返す） 　メソッド3. push()（末尾に新しい要素を追加する） Arrayオブジェクトの任意の箇所を削除する 多次元配列を作成してみよう     組み込み関数のArrayオブジェクトとは 組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Arrayオブジェクトは、組み込み関数の1つで、配列を扱う際に使います。   参考までに、組み込み関数の代表的なものには次のようなものがあります。   <組み込み関数（代表的なもの）> String　文字列を扱う Number　数値を扱う Boolean　論理値を扱う Array　配列を扱う Date　日付を扱う Math　数値計算で扱う   はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。 組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。 var オブジェクト名= new object();    大石ゆかり Arrayって配列のことですよね？配列もオブジェクトなんでしょうか？ 田島悠介 JavaScriptでは配列はオブジェクトなんだよね。 大石ゆかり 配列は無いんですか？ 田島悠介 配列をオブジェクトで包んで、関数を追加したりしてるんだよね。なので純粋な配列ではなくて、配列のような感じになってるんだよね。では、Arrayオブジェクトを生成してみよう！   [PR] フロントエンドで副業する学習方法を動画で公開中Arrayオブジェクトを実際に生成してみよう 適当なオブジェクト名（family）をつけ、Arrayオブジェクトを生成してみます。配列に関する様々なプロオパティやメソッドを出力することができます。 var family = new Array(); これでArrayオブジェクトが1つ生成されましたが、まだfamilyの箱の中身はからっぽの状態です。Taro・Jiro・Saburoを加え、console.logで呼び出してみます。 <!DOCTYPE html> <html lang = “ja”> <head> <meta charset = “utf-8″> <title>JavaScriptの練習</title> </head> <body> <script> var family= new Array("Taro", "Jiro", "Saburo"); console.log(family);
JavaScript

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。 目次ducumentElementプロパティとはdocumentElementプロパティの使い方documentElementを利用してhtmltagの要素を取得してみようまとめ筆者プロフィール 【動画の解説はこちら】   田島悠介 今回はCSSの基本的な書き方について勉強していこう。 大石ゆかり 田島メンター！！CSSの構文ではどんなものを使うんですか〜？ 田島悠介 まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。 大石ゆかり はい！   CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。 以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。 背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。   スタイルシートが必要な理由 以前はHTMLのタグによってスタイルの指定も行われていました。 文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。 HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。 同じ内容をHTMLとCSSで指定した場合の例 HTML <p>テキスト<p> CSS p{font-size:20px; color:red;}   [PR] フロントエンドで副業する学習方法を動画で公開中CSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。 セレクタ – どのHTMLタグに対して見合えを調整するか プロパティ – どういった内容のデザインを施すか 値 – プロパティはどの程度か   簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。 説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。 たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。 ほかのタグに設定したいときも同様です。 例）pタグ p {color: red; }   最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。   田島悠介 セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。 大石ゆかり この場合段落<p>のcolor、文字色をredの赤にするということですね。 田島悠介 そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。   プロパティを複数指定したいとき ひとつのセレクタに対して、プロパティは複数指定することができます。 たとえば、フォントサイズを20px・文字の色を青にしたいときには、 h1{font-size: 20px, color: blue;} のように書きます。 また、コードには空白部分は無視されるという性質があるので、{  }で囲んだ設定を見やすく並列に並べてもいいでしょう。 h1{ font-size: 20px, color: blue; }   プロパティの種類 プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。   下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。 プロパティ 説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する   実践〜スタイルを作ってみよう〜 では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。 今回は、次のHTMLコードをもとに進めます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p> </body> </html>   ブラウザ画面ではこのように表示されます。   これを、最終的に次のようなデザインにしたいと思います。 スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。 まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。   <head> <meta charset=“UFT-8”>
CSS

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptによるhtmltagの要素取得について現役エンジニアが解説【初心者向け】