JavaScriptでCSSのstyleを操作する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでCSSのstyleを操作する方法について現役エンジニアが解説しています。CSSだけではなく、JavaScriptでもHTML要素のstyleプロパティに値を代入してCSSを操作することができます。今回はRGBの値から色を変化させるカラーピッカーの作り方を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでCSSのstyleを操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでCSSのstyleを操作する方法について詳しく説明していくね！
お願いします！
目次
CSSのstyleについて
CSSでstyleを指定する際は以下のように記述します。
CSSセレクタ {
スタイル
}
例えば id が div1 の要素の背景色を指定するには以下のように記述します。
#div1 {
background-color: blue;
}
JavaScriptでCSSのstyleを操作する方法
JavaScriptでCSSのstyleを操作するにはstyleプロパティで指定します。
上記と同じことをJavaScriptで実現するには以下のように記述します。
document.getElementById('div1').style.backgroundColor = 'blue';
style プロパティについて、詳しくは以下の記事も参考にしてください。
実際に書いてみよう
今回のサンプルプログラムでは、 styleプロパティの使い方について確認します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: blue;
border-color: blue;
border-width: 2px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
赤(R)：<input id="r" type="text" value="255"><br>
緑(G)：<input id="g" type="text" value="0"><br>
青(B)：<input id="b" type="text" value="0">
<input type="button" id="button1" value="背景色を指定" onclick="func1()">
<script language="javascript" type="text/javascript">
const r = document.getElementById('r');
const g = document.getElementById('g');
const b = document.getElementById('b');
const func1 = () => {
const red = Number.parseInt(r.value);
const green = Number.parseInt(g.value);
const blue = Number.parseInt(b.value);
document.getElementById('div1').style.backgroundColor = `rgb(${red}, ${green}, ${blue}`;
}
func1();
</script>
</body>
</html>
実行結果は以下のとおりです。RGB(赤・緑・青)で指定した色が、ボタンをクリックすることで背景色として設定されます。
JavaScriptによるstyleの指定は、このように動的な指定が可能であるというメリットがあります。CSSによる指定と使い分けると良いでしょう。
まとめ
今回のサンプルプログラムではJavaScriptでCSSのstyleを操作する方法を学習しました。
筆者プロフィール
| 太田和樹（おおたかずき）
ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
記事を検索
関連するキーワード
ハウツーあわせてよく読まれている記事
JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】
JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
目次CSSのstyleについてJavaScriptでCSSのstyleを操作する方法実際に書いてみようまとめ筆者プロフィール
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
田島悠介
今回は、JavaScriptに関する内容だね！
大石ゆかり
どういう内容でしょうか？
田島悠介
JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！
大石ゆかり
えっ？オセロゲームを作るなんて、難しそうですね、、、
田島悠介
大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。
大石ゆかり
はい！よろしくお願いします！
はじめに
対象読者
本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。
本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！
入門向けのJavaScriptを学習できるサイト
本記事の目的
本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。
設計から実装までの、エンジニアの思考プロセスを体験する
ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える
オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する
上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。
解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！
注意点
本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。
一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。
本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。
オセロゲームのルールに基づいて設計をしよう
🕛目安時間：1時間
ゲームに限らず、いかなる実装においても設計は非常に重要です。
機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。
「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。
オセロゲームのルールを確認しよう
オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。
まずは前提条件となるオセロゲームのルールを確認していきます。
オセロゲームのルール
盤は8×8マスを利用する
初期状態で真ん中の4マスに白黒の石を交互に配置する
先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく
石を置ける場所は、下記の条件を満たしている
置くマスに他の石がないこと
置くマスの上下左右、斜め1マスの場所に相手の石があること
置いた石、相手の石があった方向の延長上に自身の石があること
石を置ける条件を満たせない場合は、パスをして相手の番になる
すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）
ゲーム終了時点で石の数が多い方が勝ちとなる
以上がオセロゲームのルール概要です。
ルール以外の要件を定めよう
ゲームのルールのほか、今回の実装では以下の条件を適用することとします。
自動でパスする機能は実装せず、「パス」ボタンを設置する
「現在どちらの手番であるか」を表示する
ゲーム終了後、白黒それぞれの石の数と勝敗を表示する
ゲームの初期化機能は実装しない
石が裏返るなどのアニメーションは実装しない
CPUとの対戦機能は実装しない
jQueryなどのフレームワークは使用しない
画像は用いない
それでは、要件を確認したところで実際の設計に移りましょう。
要件に沿って実装設計をしてみよう
同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。
実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。
それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。
想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。
本記事の執筆者は、以下のように流れを作成しました。
上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。
もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。
想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。
本セクションは以上です。
休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。
[PR] コーディングで副業する方法とは開発環境を整えよう
🕛目安時間：30分
今回の開発に必要な環境は以下の通りです。
コードエディタ（図解ではVisual Studio Codeを使用します）
Webブラウザ（Google Chrome推奨）
コードエディタを用意しよう
コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。
Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説
Webブラウザの環境を整備しよう
主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。
本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。
開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。
Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】
盤面と石をブラウザ上に表示しよう
🕛目安時間：1時間30分
このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。
本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。
必要なフォルダとファイルを作成しよう
まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。
（例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）
フォルダ内には、以下の3つのファイルを作成してください。
index.html
style.css
main.js
下図のような構成にできていればOKです。
HTMLをコーディングしよう
いよいよコーディング作業に入ります！
今回はサンプルコードに従って、index.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.0">
<title>オセロゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 盤 -->
<div id="stage" class="stage"></div>
<!-- 各マスを描画するためのテンプレート -->
<div id="square-template" class="square">
<div class="stone"></div>
JavaScript
JavaScriptのdocument.write()メソッドの使い方を現役エンジニアが解説【初心者向け】
JavaScriptのdocument.write()メソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
実務でもdocument.write()メソッドを利用したプロジェクトが存在するかと思います。
あらかじめdocument.write()メソッドについて知っておくことで、document.write()メソッドが残っているプロジェクトの修正作業もスムーズになります。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をご覧ください。
田島悠介
今回は、JavaScriptに関する内容だね！
大石ゆかり
どういう内容でしょうか？
田島悠介
JavaScriptのdocument.write()メソッドの使い方について詳しく説明していくね！
大石ゆかり
お願いします！
document.write()メソッドとは
document.write()メソッドとは、簡単に言うと、()内の文字列などの情報をWebブラウザ上に表示させるものです。
また、文字だけでなく、計算結果あるいはHTMLタグを使用することも可能です。
ただし、2021年現在、HTML Living StandardというHTMLの標準仕様では、使用は非推奨とされています。
document.write()メソッドが非推奨の理由
HTML Living Standardでは、document.write()メソッドを次のように説明しています。
このメソッドは非常に特異な動作をします。
場合によっては、このメソッドはパーサーの実行中にHTMLパーサーの状態に影響を与え、ドキュメントのソースに対応しないDOMになってしまうことがあります（例えば、書き込まれた文字列が文字列「<plaintext>」や「<!–」の場合）。
他のケースでは、あたかもdocument.open()が呼び出されたかのように、この呼び出しが最初に現在のページをクリアすることがあります。
さらに、このメソッドが単に無視されるか、例外が発生する場合もあります。ユーザーエージェントは、このメソッドで挿入されたスクリプト要素の実行を避けることが明示的に許可されています。
さらに悪いことに、このメソッドの正確な動作は、場合によってはネットワークの遅延に依存することがあり、デバッグが非常に困難な障害が発生する可能性があります。
これらの理由から、この方法の使用は強く推奨されません。
そして、次のような予期せぬ動作が発生します。
非同期の実装内では無視される
Chrome 55以降のバージョンでは環境によっては<script> 要素が実行されない
Edgeの<iframe>内で複数回呼び出すとエラーになる
[PR] コーディングで副業する方法とはdocument.write()メソッドの使い方
実際の使い方を見てみましょう。
document.write(表示させたい情報)
このコードでは、「表示させたい情報」をWebブラウザ上に表示可能です。
しかし、現在はdocument.write()メソッドの使用自体が非推奨なので、このコードを見つけたら修正作業を行う必要があるかもしれません。
document.write()の代わりになるメソッドの紹介
document.write()メソッドの代わりに利用するコードは、いくつか種類があります。
ただし、メソッドの置き換えだけで、document.write()メソッドの置き換えが完了する例は少ないため、どのような機能を完成させたいかに応じて、最新の仕様に基づいてメソッドを選択する必要があります。
今回は、insertAdjacentHTML()メソッドを利用する基本的な方法を紹介します。
insertAdjacentHTML()メソッドの基本文法
insertAdjacentHTML()メソッドを使う場合は、次のような文法で利用します。
element.insertAdjacentHTML(挿入位置, 文字列);
insertAdjacentHTML()メソッドでは、elementという要素に対して、挿入位置で指定した位置に文字列を挿入します。
挿入位置にbeforebeginと指定すれば、elementの直前に挿入することが可能です。
挿入位置にafterendと指定すれば、elementの後ろに挿入することが可能です。
document.write()メソッドで文字を表示
サンプルコード
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="div1">
<script>
document.write("こんにちは");
</script>
</div>
</body>
</html>
解説
次の3行でJavaScriptを実装しています。
<script>
JavaScript
先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】
今回の記事では、CSSでマーカー（リストの先頭の記号や数字）を設定するlist-styleについて解説します。
HTMLのリストを利用する際に、先頭に●や■などの記号や数字を表示したい場合があるでしょう。
そんな時はlist-styleを使って表示するのが最適です。
list-styleが分からない方やCSSを始めたばかりの方は参考になるでしょう。
目次
list-styleとは
list-styleの書き方
実際にlist-styleを書いてみよう
まとめ
【動画の解説はこちら！】
田島悠介
今回はlist-styleの使い方を練習してみよう。
大石ゆかり
田島メンター！！list-styleは何をするプロパティなんですか～？
田島悠介
リストの先頭に、記号やa,b,c～などのマーカーを追加するものだよ。アルファベットや数字は、自動で順番に表示してくれるようになっているんだ。
大石ゆかり
リスト項目のあるコンテンツの場合、必要になりそうですね。お願いします！
list-styleとは
list-styleとは、マーカーを設定するプロパティです。
マーカーは、リスト内の各項目の先頭に表示される●や■のような記号です。
●や■のような記号の他に、数字やアルファベットなども指定できます。
また、画像をリストマーカー（リスト項目の先頭記号）に使用することも可能です。
list-styleを指定しておくことで、自動で画像付きリストマーカーを先頭に表示できます。
[PR] コーディングで副業する方法とはlist-styleの書き方
リストマーカーの指定には”list-style-type”と”list-style-image”の2つのプロパティがあります。
list-style-type：記号やアルファベットなどをマーカーに表示する場合に指定します
list-style-image：画像をマーカーに表示する場合に指定します
list-style-type
list-style-typeは以下で指定します。
list-style-type: 指定する記号の値;
list-style-typeには●や■などの記号を連続して表示するものと、1,2,3…a,b,c…あ,い,う…のように特定の順番のものを連番で表示するものがあります。
記号を使用する場合の例
以下のコードを入力すると、■の記号が先頭に表示されます。
list-style-type: square;
squareの部分にdiscと入力した場合は●、circleと入力した場合は○が表示されます。
連番を使用する場合の例
以下を入力した場合リストの最初から1,2,3…と順番に表示されます。
list-style-type: decimal;
decimalの部分にlower-alphaと入力した場合はアルファベット小文字、hiraganaと入力した場合はひらがなが順番で表示されます。
他にも漢数字やギリシア文字等での表記が可能です。
表記の指定方法の詳細は以下のURLを参照してください。
list-style-type：MDN
list-style-image
list-style-imageは以下で指定します。
list-style-image : url("画像へのパス");
あらかじめマーカー用の画像ファイルをサーバーにアップロードしておき、画像へのパスを入力することでマーカーに指定します。
画像のパスは絶対パス・相対パスどちらでも可です
list-style-typeとlist-style-imageが同時に設定されていた場合、list-style-imageの方が優先されます
田島悠介
list-styleの基本的な書き方になるよ。
大石ゆかり
list-style-typeは値によって、記号になったり順番になったりするんですね。
田島悠介
そしてlist-style-imageは画像を使う場合に使用するんだ。次はそれぞれの種類のマーカーを適用した場合の例を実際に見てみよう。
実際にlist-styleを書いてみよう
以下のリストにlist-styleを使用します。
(cssとhtmlファイルが同じディレクトリ内にあり、cssのファイル名が”list.css”である場合の例です)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="list.css" type="text/css">
</head>
<body>
<ul class="list1">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
list-style-type
list-style-typeを利用して、リスト項目の先頭にリストマーカーを表示させます。
記号の場合の例
list-style-typeでcircle（白い丸）を設定します。
list.css
.list1 {
list-style-type : circle;
}
白い丸が表示されます。
連番の場合の例
list-style-typeでlower-alpha（小文字アルファベットの連番）を設定します。
list.css
.list1 {
CSS
誰でも簡単にできる！HTMLで文字の色を指定する方法【初心者向け】
文字や背景の色を指定するにはCSSを使用するのが一般的です。しかし、簡単な色設定だと、HTMLのみでも可能です。
そこで今回はHTMLで色の指定をする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。
目次CSSのstyleについてJavaScriptでCSSのstyleを操作する方法実際に書いてみようまとめ筆者プロフィール
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
HTMLだけで文字の色を変える
文字の色を変える方法は複数あります。
今回は2通りの方法をご紹介します。
fontタグを使う方法
1つは、fontタグを使用する方法です。
色を変えたい文字をfontタグで囲ってから、タグ内にcolor=”xxx”と記述します。
h1タグを使って、大きな文字で色の変更もできます。
色はred, blue, green, brown など、好きな色を指定しましょう。
HTML
<h1><font color="red">こんにちは！</font></h1>
style指定をする方法
もう1つは、style指定をする方法です。
CSSの記法で、HTMLタグに直接スタイルを適用できます。
色を変えたい文字を囲っているタグに、style=”color : xxx”と記述します。
囲うタグが特にない場合は、spanタグで囲いましょう。
HTML
<h2 style="color:blue">こんにちは！</h2>
<span style="color:brown">こんにちは！</span>
<font>タグ利用方式とstyle属性指定方式の違いとメリット
おすすめは、style属性を指定する方式です。
それぞれの方式の違いを詳しくご説明します。
<font>タグを使う方式の特徴
覚えやすくて簡単な方式です。
文字フォント専用に、タグを用意する点が特徴です。
しかし、これはCSSの利用が一般的になる前の方式で、現在は非推奨となっています。
使う場合は、趣味のページや非公開ページに限定したほうが良いでしょう。
style属性を使う方式の特徴
CSSファイルを用意せずにHTMLだけでスタイルを変更する場合に、最良の方法です。
HTML構造に影響を与えずに、既存のタグの中に「style=”xxx”」と追記するだけで良いのも特徴です。
また、HTMLを扱う場合はCSSを別途用意するのが本来のあり方なので、style属性を使いながらCSSに慣れることができるのも長所と言えるでしょう。
実際に書いてみよう
それでは実際にHTMLで色を変更してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloTechAcademy</title>
</head>
<body>
<p>Hello TechAcademy !</p>
<h1><font color="red">こんにちは！</font></h1>
<h2 style="color:blue">こんにちは！</h2>
<p style="color:green">こんばんは！</p>
<span style="color:brown">HTMLファイルだけで、</span>
HTML
CSSの記述場所 – CSSはどこに書けばいいのか？【初心者向け】
今回は、CSSの記述場所に関する解説を行います。
そもそも、CSSはどこに書けばいいのか？そんな疑問をお持ちのCSS初心者の方は多いと思います。
実は、CSSを実装する場所はいくつかあります。
この記事を通じて、実務でも利用できるCSSの実装位置を習得して頂き、実践的な知識をつけてみてくださいね。
目次
CSSを書く3つの場所
styleタグに書く
インラインに書く
外部ファイルに書く
【動画でも解説しています。クリックで見る！】
田島悠介
ここではCSSをどこに書くかということについて説明するよ。
大石ゆかり
田島メンター！！
CSSを書く場所というのはどのように決まっているんでしょうか～？
田島悠介
styleタグに書く方法・インラインに書く方法・外部ファイルに書く方法と3通りあるんだ。
それぞれの書き方を見てみよう。
大石ゆかり
はい！
CSSを書く3つの場所
CSSを書く場所は、ズバリ、以下の3つです。
それぞれに応じて、書く場所も変わってきます。
styleタグに書く
インラインに書く
外部ファイルに書く
それでは、下記のHTMLファイルをもとに、ひとつずつ見ていきましょう。
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>CSS</title>
</head>
<body>
<h1>CSS入門</h1>
<p>はじめてのCSS</p>
</body>
</html>
これをデスクトップに「a.html」の名前で保存し、ブラウザで読み込んだものが次の画面です。
ここにCSSを使ってスタイルを施していきます。
田島悠介
今回はこの例で、それぞれの記述方法を見てみよう。
大石ゆかり
h1の見出しと、pの段落がひとつずつある状態ですね。
田島悠介
この文書の文字の色や大きさを指定していくよ。
まずはstyleタグに書く方法からだね。
[PR] コーディングで副業する方法とはstyleタグに書く
まず、<style> を <head> のなかに書きます。
そこで指定していくことで、<body>にスタイルを適応させます。
HTML
<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UTF-8”>
<title>CSS</title>
<style>
CSS
JavaScriptで書く「var,let,const」の違いと使い分け方法
JavaScriptにおけるvar、let、constの違い・使い分けについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
本記事では、テキストエディタのmiを使っているものの、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。
目次CSSのstyleについてJavaScriptでCSSのstyleを操作する方法実際に書いてみようまとめ筆者プロフィール
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
大石ゆかり
田島メンター！JavaScriptでプログラミングしていると、letやconstといった記述を時々見かけるのですが・・・？
田島悠介
ECMAScript2015から採用された、新しい宣言の方法なんだ。
大石ゆかり
これまで使っていたvarとどんな違いがあるのですか？
田島悠介
例を見ながら説明していくね！
var、let、constとは
JavaScriptでは、変数や定数（以下、まとめて「変数」と表記します）を使う際、変数名を宣言することが推奨されています。
var、let、constとはすべてJavaScriptで変数を宣言する際に使うキーワードです。
たとえば、以下のように記述することで変数を宣言できます。
var techacademy = 'テックアカデミー';
let techacademy = 'テックアカデミー';
const techacademy = 'テックアカデミー';
let、constは新しい記法
3つの宣言キーワード内のletとconstは、ECMAScript2015から採用された宣言方法のキーワードです。
ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。
現在では、国際団体で標準化されたうえでGoogle Chrome や Internet Explorer 11以降、ブラウザで広く採用されています。
導入から5年以上が経過しているため（本記事執筆時点）、開発現場にはすでに広く浸透している記法です。
[PR] コーディングで副業する方法とはvar、 let、constの違い
変数宣言の記述として使われる3つの要素の違いについてみていきましょう。
違いその1：再代入、再宣言が可能か
再代入は一度宣言した変数に対し、値を再び代入することです。
再宣言は一度宣言した変数の名前をキーワードごと丸ごと宣言しなおして、上書きすることをさします。
以下で詳細をみていきます。
再代入
varを用いて再代入をすると以下のような記述が可能です。
var techacademy = '代入1回目';
//注意：再代入する際は、varのキーワードを書いてはいけない
techacademy = '代入2回目'
letでも記述方法は同様です。
let techacademy = '代入1回目';
techacademy = '代入2回目'
しかし、constだけは再代入をしようとするとエラーになります。
const techacademy = '代入1回目';
techacademy = '代入2回目' //エラーとなり実行できない
constのみ再代入ができないという仕様は、本記事の中でも非常に重要なポイントです。
再代入をできるだけ少なくすることで変数の中身が明確になり、見通しが良く読みやすいコードを実装できます。
最近の開発現場では再代入が必要な場合を除いて、できるだけconstを使いましょう。
再宣言
宣言の上書きを行うため、JavaScriptで再宣言をしてしまうと予期せぬバグを招きます。
コードの読みやすさを低下させるため、通常では避けられています。
var、let、constの中で再宣言が可能なのはvarのみです。
//一度宣言した後に、、、
var techacademy = '宣言1回目';
//再度同じ変数名で宣言しなおせる
var techacademy = '宣言2回目'
let、constで同じことをしようとするとエラーが出るため、再宣言を予防することができます。
この点はlet、constを使うひとつのメリットといえるでしょう。
違いその2：スコープの違い
スコープとは、簡単にいうと「変数の有効範囲」です。
宣言した変数はコード内のどこでも使えるわけではなく、このスコープによって使える範囲が定められています。
varは関数スコープ
varはlet、constに比べて広いスコープを持っています。
名前の通り、ある関数内でvarを用いて宣言した変数は、その関数をどこからでも呼び出すことが可能です。
function test() {
if (true) {
//条件式の中で宣言
var x =
JavaScript
