**JavaScript（読み方：ジャバスクリプト）は、Webサイト上で主にWebページに動きをつけるために使用されるプログラミング言語です。**例えば、動きのあるバナー広告やページ内での写真のスライドなどを可能にしています。

JavaScriptが登場するまでのWebページは動きがなく、例えると電子ブックのような姿をしていました。そのWebがTVのように動きのあるものに変わったのは、JavaScriptによる功績が大きいと言えます。

JavaScriptは主にWebで用いられるプログラミング言語ですが、Webサイト側とWebサービスの相互連携を円滑にするためにも活用されています。

【参考】：[JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript)

JavaScriptの始まりは20年以上前まで遡ります。*JavaScriptは、1995年にイギリス人プログラマのブレンダン・アイク氏が創り出しました。*当時ブレンダン氏は、Webブラウザで有名なネットスケープコミュニケーションズ社に在籍していました。

このネットスケープ社が開発したブラウザソフトの『Netscape Navigator』（通称ネスケ）に実装されていたのがJavaScriptでした。

JavaScriptの名前の由来ですが、同じくプログラミング言語であるJavaから来ているようです。JavaScriptはJavaの開発から4年ほど遅れて登場し、当時は「LiveScript」と命名されていましたが、Java人気にあやかったのか、JavaScriptに改名しました。

以降、Webページに動きを与えるJavaScriptは注目を浴び、Webページの作成にはHTMLと共に必要不可欠の言語として浸透しました。2010年以降にはサーバサイド側の実行環境の整備が行なわれ、現在ではWebサイトに動きを加えるためだけではなく、バックエンドのシステムやアプリ開発などでも使用することが可能です。

*JavaScriptとJavaはプログラミング言語という点では同じですが、全く異なる性格を持つ言語です。*名前がよく似ているため、同じファミリーのように思われがちですが、この2つは別ものであり、親戚関係にもありません。

**JavaScriptは主にWebサイトの画面で文字や画像にさまざまな動きを与えるフロントサイドで活用しますが、Javaは主にシステムの土台を作る裏方を担当するサーバサイドで活用します。**Javaはあらゆるマシンで動く汎用言語で、会社の業務システムの構築やAndroidアプリなどもJavaによって作られています。

なお、前述の通り元々JavaScriptはLiveScriptという名で開発が始められ、その後名称が現在の「JavaScript」に変更されたため、JavaScriptを略す場合はJavaではなく「JS」を用いることが多いです。

JavaScriptとJavaの違いは？質問されたときの説明方法

## JavaScriptにはどんな特徴・メリットがある？

プログラミング言語にはさまざまな種類があり、開発したいものや目的に合わせて適切な言語を選ぶ必要があります。では、このJavaScriptにはどのような特徴やメリットがあるのでしょうか。

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

### ブラウザで動きを加えられる唯一の言語

**JavaScript最大の特徴は「ブラウザで動きを加えることができる唯一のプログラミング言語」であることです。**

ブラウザで動きを加えられるということは、ユーザのアクションに応じて内部処理が行えるということになります。この機能はWebサービスを運用していく上で欠かせません。JavaScriptは、現代のWebサービスにとって最も重要な役割の1つを担っていると言えるでしょう。

なお、*JavaScriptの使い方ですが、単独で使うのではなく、HTMLやCSSなどと組み合わせて使います。*JavaScriptがHTMLやCSSに指示を出すという形で、Webブラウザ上でアニメーションのような動きのある動作を可能にします。

### ブラウザで実行できるため環境構築が必要ない

プログラミング言語を利用するには、環境構築を必要とする場合がほとんどでしょう。しかし、JavaScriptは環境構築が不要なので、ブラウザさえあれば実行することができます。

その理由として、**ブラウザにJavaScriptの実行環境が搭載されていることが挙げられます。**JavaScriptは、Internet Explorer・Microsoft Edge・Google Chrome・Firefox・Safariなど、ほとんどのブラウザで実行可能です。

ブラウザでJavaScriptを有効にする方法は以下の通りです。スマホでは予めJavaScriptが有効になっていることが多いですが、オフにしてしまった場合は、以下の手順で設定を行いましょう。

*【Chromeの場合】*
1.パソコンで Chromeを起動し、［設定］をクリック

~~【図】：Chromeメニュー　設定を選択　~~

2.［プライバシーとセキュリティ］をクリック

~~【図】：Chromeメニュー　プライバシーとセキュリティ~~

3.［サイトの設定］をクリック

~~【図】：Chromeメニュー　サイトの設定~~

~~【図】：Chromeメニュー　コンテンツ表示画面~~

5.［サイトが JavaScript を使用できるようにする］を選択

~~【図】：Chromeメニュー　Javascript設定画面~~

その他のブラウザで JavaScript を有効にするには、以下のリンクを参考にしてください。

【参考】：[ブラウザで JavaScript を有効にする - Google アド マネージャー ヘルプ](https://support.google.com/admanager/answer/12654?hl=ja)

*【iPhoneの場合】*
1.ホーム画面の「設定」アプリから「Safari」を選択

~~【図】：iPhone 設定メニュー　Safariアイコン選択　~~

~~【図】：iPhoneのSafariのメニューから「詳細」を選択　~~

~~【図】：SafariのJavaScript のトグルスイッチの操作画面　~~

*【Androidの場合（Chrome）】*
1.ブラウザ画面右上、赤枠部分をタップ

~~【図】：Androidスマホ Chromeの初期画面　~~

2.「設定」を開き「サイトの設定」をタップ

~~【図】：Androidスマホ Chromeの設定画面よりサイトの設定を選択　~~

~~【図】：Androidスマホ Chromeのサイトの設定画面から［JavaScript］を選択~~

5.タップで「JavaScript」をオンにする

~~【図】：Androidスマホ Chromeの［JavaScript］トグルスイッチの操作画面　~~

### フロントエンドとバックエンドどちらでも使える

JavaScriptは元々フロントエンド開発の言語として利用されてきましたが、先ほども少し触れたように、**2010年代前半に登場した「Node.js」というJavaScript用のフレームワークを用いることで、サーバ側でもJavaScriptによる開発が可能となりました。**

Node.jsは、サーバへの大量の同時接続に対応できるアプリケーション開発を目的として設計されたJavaScript環境で、サーバへの同時接続端末台数10,000台という従来の問題がNode.jsによって解決されています。

JavaScriptというプログラミング言語1つで、フロントエンドからバックエンドまで開発を行うことができるのは、非常に利便性が高いです。

フロントエンドとは？バックエンドとの違いや使う言語について解説

Node.jsとは？JavaScriptとの違いや使い所を解説

### 開発効率を向上させるフレームワークが豊富

登場してから25年以上の歴史と、多くのユーザによって活用されてきたことから、JavaScriptには、開発の効率を大きく向上してくれるフレームワークが充実しています。

*フレームワークとは、アプリケーションを開発する際に土台として機能させるソフトウェアのことを指します。*さまざまなプログラミング言語に用意されているアプリケーションの雛形ともいえるでしょう。

**JavaScriptは多くの開発で利用されてきたため、さまざまな用途に応じたフレームワークを有しています。**ユーザインターフェース構築に用いられるReactやVue.jsなどはその代表格です。

【参考】：[React](https://ja.legacy.reactjs.org/)
【参考】：[Vue.js](https://ja.vuejs.org/)

JavaScriptに関するフレームワークについて徹底解説！

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

## JavaScriptの注意点・デメリットは？

特徴・メリットからもわかるように、JavaScript は利便性が高く使いやすい言語です。しかし、注意すべき点もあります。JavaScriptのデメリットとしては以下の2つが挙げられます。

### ブラウザによって動作が変わる可能性がある

JavaScriptはブラウザ上で動作するプログラミング言語であるため「Internet Exploler」「Microsoft Edge」「Google Chrome」など、使用しているブラウザによって動作や挙動が変化する可能性があります。

**ブラウザ上の動作にはJavaScriptのバージョンやブラウザの種類・バージョンが関係してきます。**異なるブラウザ上で同様の動作にするためには、ブラウザの種類やバージョンなどに配慮してプログラミングのコーディング作業を行わなければなりません。

それぞれのブラウザで同じように動かすには、コーディング作業の他にテストも実施する必要があります。その分工数や時間を有してしまいます。

### 処理速度が他の言語と比較して遅い

**JavaScriptを使用して行われるプログラミングの実行には、「解析」「解釈」「変換」というプロセスが必要です。**そのため処理スピードが他のプログラミング言語と比べ遅い傾向にあります。

こういった対策として、機能を必要最小限にすることやコードの量を少なくすることが挙げられます。またJavaScriptを読み込むタイミングを変更するのも1つの方法です。

## JavaScriptを使って何ができる？

ここまでJavaScriptとはどういうものかについて解説してきました。ここからは、JavaScriptを使ってできることについてわかりやすく解説します。JavaScriptを使うと何ができるのか、その用途について見ていきましょう。

JavaScriptの用途やできることを初心者向けに紹介！

これまでにも触れましたが、JavaScriptを使用することでWebサイトに動きを加えることが可能となります。視覚表現や文章構造などを記述するための言語であるマークアップ言語の「HTML」や「CSS」のみでも、Webサイトは十分に作成することができます。

しかし、*JavaScriptを用いることでアニメーションなどをWebサイトに追加することもでき、ユーザビリティにも配慮したより魅力的なWebサイトの作成が実現できます。*

*■JavaScriptで動きのあるページを作ってみよう*
ではここで、試しにJavaScriptを使って、動きのあるWebページを作ってみましょう。以下のテキストをメモ帳などのテキストエディタにコピペし、適当なファイル名を付けて、拡張子をhtmlで保存します。

Webページに動きを加えるプログラミング言語であるJavaScriptは、Webサイトはもちろん、Webアプリやスマホアプリなどにも使われています。本記事では、JavaScriptについて、その特徴や何ができるのかを、初心者にもわかりやすく解説します。

JavaScriptは、Webサイト上で主にWebページに動きをつけるため使われる言語である

JavaScriptはバックエンドでも使用でき、スマホやゲームアプリの開発にも使われている

JavaScriptの需要は高く、今後もさまざまな開発分野で必要とされると考えられる

JavaScriptとは？特徴や何ができるのかを初心者向けに解説

*SQLのLIKE句は、あいまい検索を行う際に使用するクエリの手法です。*文字列の検索にワイルドカードと呼ばれる文字記号を用いて、必要なデータを抽出することができます。分かりやすく言うと、膨大なデータから、パターンマッチングを行ってデータを探すための表記法を指します。

SQLとは？概要・できること・プログラミング言語との違いを解説

SQLの入門編：初心者から経験者まで役立つSQL情報を掲載！

*LIKE句は、データベースに問い合わせするためのクエリで使用するもので、SQLのSELECT文で使用します。*SELECT文は、SQLのテーブルに格納されているデータを検索するデータ操作言語（DML）です。SELECT文によってDBMSに対してクエリが発行され、必要なデータを得ることができます。

*SELECT文は、格納されているデータを紹介するためのデータ操作言語です。*ここでは、LIKE句を理解するうえで欠かせないSELECT文を先に学びます。

SELECT文の基本構文は、次のように表すことができます。

SELECT カラム名1[, カラム名2,,] FROM テーブル名;

ここで示したカラム名はデータの列の名称で、複数のデータ列を取り込む場合は、それぞれのカラム名を記載します。また、データは表を意味するテーブルに格納されており、そのテーブル名を指定します。

すべてのデータ列を取り込む場合は、 ”SELECT \* FROM テーブル名;” とし、 ”\*” のワイルドカード文字で全体を指定します。

*SELECT文では、WHERE句を使って抽出するデータの条件を指定することができます。*具体的には、 ”SELECT カラム名 FROM テーブル名 WHERE 抽出条件となるカラム名 比較演算子 比較する値;” の構文に従います。

例えば、指定するオフィスに勤務する従業員は次のように、抽出することができます。

SELECT EmployeeID,name FROM EmployeeDirectory WHERE Office=’A001’;

比較演算子は、 ”=” が等しい場合、 ”>” が大きい場合、 ”<” が小さい場合です。その値以上が  ”>=” 、値以下が  ”<=” 、等しくない場合が  ”!=” です。

### LIKE句であいまい条件を指定する

これまでに、SELECT文とWHERE句で抽出するデータの条件を指定できることを学びました。*WHERE句の検索条件は、複数の条件を論理演算子で示すことができ、LIKE句は検索条件があいまいな場合に使用します。*

構文は、 ”SELECT カラム名 FROM テーブル名 WHERE 抽出条件となるカラム名 LIKE ’あいまい検索する文字’ ;” のように用います。

ここで示す ’あいまい検索する文字’ は、ワイルドカード文字が使用できます。ワイルドカード文字の ’%’ は0文字以上の任意の文字列で、 ’_’ は任意の1文字を指します。また、 ’[^]’ は除外を意味します。

例えば、900から始まる従業員番号を持つ従業員の登録情報を抽出する場合は、次のように、クエリを発行します。

SELECT * FROM EmployeeDirectory WHERE EmployeeID LIKE ’900%’;

## LIKE句を使って色々な検索方法を学ぶ

ここでは、*LIKE句を使って色々な検索方法を学んでいきます。*先の例では、900から始まる従業員番号を持つ従業員の登録情報を抽出する例として以下のSELECT文を使用しました。

テーブル名がEmployeeDirectory、抽出条件となるカラム名がEmployeeIDとすると、次のように表すことができます。

以降は、この例に基づいて検索手法の違いについて学んでいきます。

*前方一致検索は、LIKE句で用いるあいまい検索の文字列の後半に、ワイルドカード文字を指定する方法です。*すべてのカラムを対象とする場合は、 ”SELECT \* FROM テーブル名 WHERE カラム名 LIKE ’文字列%’” とします。前半の ’文字列’ が合致すれば後半の ’%’ は0文字以上の任意の文字が該当します。

先の例では、LIKEに続くあいまい検索をする文字列は ’900%’ でした。これは前半が ’900’ 、後半が ’%’ ですので、前方一致検索の手法を用いた例だということが分かります。

*後方一致検索は、あいまい検索の文字列の前半にワイルドカード文字を指定する方法です。*使う場合の構文は、 ”SELECT \* FROM テーブル名 WHERE カラム名 LIKE ’%文字列’” とします。前半の ’%’ は0文字以上の任意の文字で後半の ’文字列’ が合致すれば必要な文字列を探すことができます。

例で例えると、従業員番号の下2桁が ’00’ で終わる従業員データは、次のように表すことができます。

SELECT * FROM EmployeeDirectory WHERE EmployeeID LIKE ’%00’;

*部分一致検索は、あいまい検索の前後の文字列が不明な場合に使用する方法です。*構文は、 ”SELECT \* FROM テーブル名 WHERE カラム名 LIKE ’%文字列%’” のように、指定する ’文字列’ の前後にワイルドカードの ’%’ を追加します。

先のあいまい検索の例では、前方一致検索は ’900%’ を指定し、後方一致検索は ’%00’ を指定しました。部分一致検索は、前後の ’%’ を入れますので、 ’%100%’ とすると従業員番号の中に ’100’ が含まれる任意の文字が抽出されます。

この場合は従業員番号なので数字の文字を指定しますが、格納されるデータによっては英字などの文字を指定します。

*LIKE句で完全一致検索を行う場合は、文字列にワイルドカード文字を入れずに指定します。*具体的には、 ”SELECT \* FROM テーブル名 WHERE カラム名 LIKE ’文字列’” のように記述します。文字列が特定できる場合は、このような完全一致検索を行うことができます。

*LIKE句では、検索する文字列に ’%’ や ’_’ が含まれている場合、ワイルドカード文字としてではなくリテラル（文字）として解釈させることもできます。*この機能はESCAPE句を指定することで有効化します。

例えば検索する文字列に、 ’_’ を含む文字列を検索する場合は、次のようにESCAPE句を用います。

SELECT * FROM EmployeeDirectory WHERE EmployeeID LIKE ’%\\_%’ ESCAPE ’\\’;

上の例では、エスケープ文字にバックスラッシュ ’\\’ を指定し、LIKE句で指定する文字列に ’_’ が含まれていることを示しています。

またLIKE句では、NOT LIKE句というLIKEの否定形式も提供されています。ワイルドカード文字の役割は変わりません。従業員番号が ’9’ で始まる従業員データを除外するには、次のように表すことができます。

SELECT * FROM EmployeeDirectory WHERE EmployeeID NOT LIKE ’9%’;

### DBMSに違いによるLIKE句の扱い

LIKE句の用法は、DBMSによってドキュメント化され、情報が提供されています。*マニュアルを実際に確認すると、LIKE演算子、LIKE条件などの言い方の違いも見られます。*実際に用法を見ると、標準SQLの構文のほか、各社が追加実装した機能も見られます。

DBMSによる違いを具体的に見ると、SQLServerの場合では、ワイルドカード文字に 角括弧 ’[  ]’ を用いることで範囲指定が可能です。Oracle Databaseでは、LIKE以外に正規表現検索に対応するためにREGEXP_LIKE条件が実装されています。

また、PostgreSQLでは、ロケールに従って大文字小文字を区別しない一致などを実装した独自のILIKE句や、POSIX正規表現に対応しています。

【参考】：[SQL Server: LIKE (Transact-SQL)](https://learn.microsoft.com/ja-jp/sql/t-sql/language-elements/like-transact-sql?view=sql-server-ver16)
【参考】：[Oracle Database SQL言語リファレンス: LIKE条件](https://docs.oracle.com/cd/E57425_01/121/SQLRF/conditions007.htm)
【参考】：[MySQL 文字列比較関数および演算子](https://dev.mysql.com/doc/refman/8.0/ja/string-comparison-functions.html)
【参考】：[PostgreSQL: 関数と演算子 パターンマッチ LIKE演算子](https://www.postgresql.jp/document/16/html/functions-matching.html#FUNCTIONS-LIKE)

SQL Serverとは？使い方や構築方法をわかりやすく解説！

MySQLとは？SQLやOracleとの違い、使い方をわかりやすく解説

PostgreSQLとは？MySQL・Oracleとの違いを解説

## SQLのLIKE句は慣れればさらに活用できる

データが蓄積されると、分析に活用できるので検索条件を学ぶと応用ができます。SQLでは、LIKE句と論理演算子であるORを使用して、複数条件のクエリを発行することもできます。**今回学んだLIKE句に慣れたら、より複雑なクエリに活用できるでしょう。**

<center>*＼転職するか迷っていてもOK！／*<br/>[*マイナビエージェントに無料登録して*<br/>*転職サポートを受ける*](https://mynavi-agent.jp/entry/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv17)</center>

LIKE句はSQLのあいまい検索に用いる手法であり、ワイルドカードと呼ばれる文字記号を用いて表します。LIKE句を学ぶには、前提となるSELECT文の知識が必要です。ここでは、LIKE句の使い方を、SELECT文やWHERE句と順に学んで理解を深めていきます。

SQLのLIKE句とは、あいまい検索を行う際に使用するクエリの手法を表します

LIKE句は、SELECT文やWHERE句とともに使用し、文字列をパターンマッチングで探します

使用するワイルドカード文字の’%’は0文字以上の任意の文字列で、 ’_’ は任意の1文字を指します

SQLのLIKE句の使い方は？SELECT文を用いた用法を解説

HTML/CSSはWeb制作において欠かせないものです。Webデザインに携わったことがなかったり、業務で目にするものの実際に記述はしたことがなかったりする場合、定義が曖昧になっている方も多いでしょう。

*そこで、まずはHTML・CSSの基礎知識について解説します。*HTMLとCSSの違いやそれぞれの役割・関係、使い方についてまとめていきます。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

HTMLとは、Webページを作成するための言語のことで、タグを使ってWebページの構造を定義します。たとえば、見出しや本文などテキストのレベル分け、表・画像・リンクなどの配置など、Webページに必要な要素を任意に組み立てることが可能です。

HTMLはWebページの骨組みとなる言語で、**HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示します。**

HTMLとは？特徴やできることなど基礎知識を初心者向けに紹介

HTML入門！初心者向けに基礎コード・文法一覧・勉強方法を解説！

CSSとは、主にWebページのデザインを変更するための言語です。CSSを使うことで、Webページの文章の色を変更する・フォントサイズを変更するなどの調整ができます。

なお、HTMLのみでデザインを調整することもできます。CSSがなかった頃は、文章の構造設定・デザイン設定をHTMLだけで行っており、現在も技術的には可能です。

しかし、HTMLでデザイン設定を行うと、ソースコードが長くなり読みにくくなります。ソースコードが読みにくくなると、Webページを修正する際に該当箇所を探すのが困難になってしまいます。

そこで、デザイン調整はHTMLではなくCSSで行うようになりました。**デザイン関連の記述をCSSですることで、HTMLのソースコードが見やすくなります。**現在ではWeb制作で必ずと言って良いほどCSSが使われています。

CSSとは？概要や基本書式、具体的な記述方法について解説！

「HTML・CSSは難しいのでは？」と気になる方もいるでしょう。**ITエンジニアの方からすれば、HTMLやCSSはそこまで難しくはないと思われます。**基本的な構造がシンプルなので、少なくともPHPやJavaScriptと比べると習得は簡単です。

しかし、タグの種類やプロパティの書き方など覚えることが多いので、HTML・CSSを理解するためにはある程度の学習時間を確保する必要があります。

Web関連の仕事に就きたいと考えている方は、就職・転職活動を行う前に習得して、使いこなせるようになっておくと有利です。未経験からITエンジニアを目指すなら、自分のスキルに合った企業を探してくれる転職エージェントの活用をおすすめします。

<center>[あなたに合った企業選びをサポート致します。<br/>エンジニア転職のご相談はぜひ<br/>*『マイナビIT エージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

では、HTMLとCSSの基本文法を見ていきましょう。HTMLもCSSも基本文法は初心者でも覚えやすいです。実際によく使われる構成要素の例と合わせて解説していきます。

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

### HTMLの代表的なタグと書き方

HTMLは、タグを用いて記述していく言語です。**開きタグと閉じタグ<>を用いてタグの内容を囲み、それらを複数組み合わせることでWebページを構成していきます。**以下のようなものがHTMLタグの代表例です。

~~【図】基本構造を定義するタグ~~

*▪テキストを定義するタグ*（bodyタグ内で使う）

~~【図】テキストを定義するタグ~~

*▪リストを作成するタグ*（bodyタグ内で使う）

~~【図】リストを作成するタグ~~

*▪テーブル（表）を作成するタグ*（bodyタグ内で使う）

~~【図】テーブル（表）を作成するタグ~~

*▪メディアを表示するタグ*（bodyタグ内で使う）

~~【図】メディアを表示するタグ~~

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

CSSは、**「セレクタ」「プロパティ」「値」の3要素で記述するのが基本です。**基本形は、以下のようになります。

3つの要素はそれぞれ以下の内容を定義する役割を持っています。

▪セレクタ：どの箇所を調整するのか（HTMLタグの種類）
▪プロパティ：どのようなスタイル・デザインを適用させるか
▪値：どのスタイル・デザインにするか、どのくらい調整するか

一部ではありますが、プロパティや値には以下のようなものが使われます。よく使われる代表的な種類です。

*プロパティの種類*
▪font-family：文字の種類
▪font-size：文字サイズ
▪font-weight：文字の太さ
▪color：色
▪height：高さ
▪width：横幅
▪background-color：背景色

*値の種類*
▪blue：青
▪px：ピクセル
▪cm：センチメートル
▪pt：ポイント
▪s：秒

値には、blueなどスタイルの名前や数値が入ります。

例えば、見出し1（h1）の文字色を青にしたい場合、h1{color:blue;}、その段落の文字サイズを20ピクセルにしたい場合、p{font-size: 20px;}となります。複数のプロパティを使う場合は、p{font-size: 20px, color: blue;}のように「,」で区切ります。

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

HTMLとCSSを組み合わせて使うには、骨子となるHTMLのソースコードにCSSを適用させる必要があります。HTMLにCSSを適用させる方法は次の3つです。

▪*HTMLタグに直接書き込む*（インラインスタイルシート）
▪*headタグに書き込む*（内部スタイルシート）
▪*CSSファイルを読み込む*（外部スタイルシート）

HTMLタグに直接書き込む方法では、CSSを適用させたい箇所に「style="〇〇"」（〇〇はCSSのプロパティと値）を追加してCSSとHTMLをつなげることができます。

```
<h1 style="color: blue;">〇〇</h1>
```

headタグ２を使う方法では、そのページに適用したいCSSのコードをheadタグ内にまとめて記述します。

```
<head>
<style>
h1{color: blue;}
</style>
</head>
```

ただし、CSSはソースコードの可読性を上げるために別ファイルに記述することが多いです。外部のCSSファイルを読み込むやり方については後ほど解説します。

続いて、初心者向けにHTML・CSSの基本的な使い方を紹介します。*HTMLとCSSを使ってWebサイトをどのようにデザインするのか、初歩的な手順をまとめました。*HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。

### ①テキストエディタとWebブラウザを用意する

まずは、HTML・CSSでWebサイトを作る際に必要なものを準備します。**HTML・CSSのソースコードを記述するには、テキストエディタが必要です。**テキストエディタは普段使っているもので問題ありません。

テキストエディタをインストールしていない方は、メモ帳でもソースコードを記述することができます。

続いて、*HTML・CSSの表示結果を確認するために、Webブラウザが必要です。*Webブラウザの種類はさまざまありますが、特に指定はありません。パソコンにあらかじめインストールされているもので問題ありません。

この2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバが必要です。Webサーバは自分で構築したり、レンタルしたりして準備します。今回は作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。

### ②HTMLの雛形を作り、ファイル保存する

次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。

*HTMLには多くのタグがありますが、どのタグを利用する場合も基本的には以下の要素が必要になります。*テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。

```
<html>
<head>
</head>
<body>
</body>
</html>
```

**HTMLは、html要素・head要素・body要素の3要素が軸となっています。**「html」は、この文書がHTMLの文書であることを示すタグです。htmlタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。

「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述します。

雛形を記述したら、HTMLファイルを保存します。ファイル名は「test.html」などとしましょう。*ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。*

### ③Webページの内容を記述する

続いて、Webページに表示する内容を記述します。先程解説したように、**Webページに表示する本文はbodyタグの中に記述します。**bodyタグの中に、以下のように「Hello World」と記述してみましょう。

```
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
```

上記のように記述することで、Webページに「Hello World」という文字列を表示させることができます。

### ④記述内容が正しく表示されるか確認する

**作成したHTMLファイルをブラウザで開き、先ほど記述した「Hello World」が正しく表示されるかどうかを確認します。**作成した「test.html」のファイルをダブルクリックするとブラウザが起動し、「test.html」の記述内容がブラウザで表示されます。

正しく記述できている場合、ブラウザ上に「Hello World」と表示されます。以上で、ここで解説する手順でのHTMLファイルの作成・確認は完了です。

### ⑤HTMLでCSS読み込みの設定を行う

次にCSSファイルを作成していきますが、ここではHTMLにCSSを適用させる方法として外部のCSSファイルを読み込む方法を紹介します。

CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。**CSSを読み込ませるには、HTMLのheadタグにCSSのファイル名を指定します。**ここでは、CSSのファイル名を「test.css」として、次のように記述します。

言語・開発の記事（13ページ目）