**システム開発やWebアプリケーション開発に使用されるプログラミング言語は多種多様にありますが、その中でもJavaは世界中で利用されている人気や需要が高い言語の1つです。**レバテックが公表している2019年度プログラミング言語別新規求人割合ランキングを見ると、Javaは1位となっています。そのため、Javaを習得すると市場価値が高いエンジニアになることができるでしょう。
（ 参考：https://career.levtech.jp/guide/knowhow/article/606/ ）

ここでは、Javaの入門として概要やメリットについて詳しく紹介します。

*Javaのプログラミング言語は1995年頃にサン・マイクロシステムズ社によって開発されました。*Javaエンジニアの求人や案件は他のプログラミング言語と比較して多く、プログラマーなどのエンジニアを目指すのであれば、まず押さえておきたい言語と言えるでしょう。

**Javaはオブジェクト指向型言語であり、オブジェクト指向の概念を理解する際に学習コストがかかることが懸念点として挙げられます。しかし、Javaのプログラミングスキルを習得すれば、他のプログラミング言語を学習する際にも活かすことが可能です。**

**まずJavaのメリットとしてOSに依存しない点が挙げられます。**プログラミング言語には、特定のコンピュータやOSでないと動作しないことも少なくありません。*しかし、Javaの場合であればMacOS・Windows・LinuxなどのOSに依存せず、どのような環境でも動作させることが可能です。*あらゆる動作環境で互換性があることは、Javaのプログラミング言語のメリットと言えます。

**またJavaはフレームワークが充実しているため、開発効率の向上や運用コストの削減が期待できます。**フレームワークとは、プログラミング言語で開発を行う際に、よく使用される機能をまとめて提供してくれるもののことです。*汎用性の高い機能をまとめてあるライブラリやAPIがあらかじめ多数用意されていることも、Javaのメリットと言えます。*

Javaとは？人気プログラミング言語Javaの将来性やメリットについて解説

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

Javaのプログラミング言語は需要が高い言語ということは理解できたでしょうか。ここでは、Javaの基本事項について詳しく紹介します。

**クラスとは、Javaなどのオブジェクト指向と呼ばれるプログラミング言語の基礎となるもので、1つの処理を実現させるために、必要なものを集めたものを指します。**クラスを定義する場合には「class クラス名{}」のように記述します。*「class」を記述後クラスの「名前」を記し、「{」と「}」の間に、実施したい処理のプログラムの記載していきます。*

ここからは具体例を見ていきましょう。

```class Test{
  public static void main(String[] args){
    System.out.println("Hello World!");
  }
}```

「public static void main(String[] args)」はJavaのプログラムを実行するために、必要不可欠なメソッドです。メソッドの概要については後述します。ここでは「Test」というクラスを定義しました。このクラスは画面に「Hello World!」というメッセージを表示させる処理を実現するためのものです。*Javaのプログラムはこのようなクラスを1つもしくは複数組み合わせて作成されます。プログラムが複雑になると、1つのアプリで使用されるクラスの数も多くなるでしょう。*

**メソッドとは、クラスの中で特定の処理を実行するために必要なプログラムをまとめたものを指します。**メソッドを定義する場合は、下記のように記載します。

```class クラス名{
  void メソッド名(){
  }
}```

*メソッドは行頭に戻り値のデータ型を記述後、メソッドの名前を記します。括弧「()」の中にはメソッドが呼び出される際に、渡される値を受け取るための仮引数を記述することが可能です。そして、 「{」「}」 の間にメソッドが呼び出された際に実行されるプログラムを記述します。*ここからは具体例を見ていきましょう。

```class Test{
  public static void main(String[] args){
    Test test = new Test();
    test.hello();
    test.bye();
  }
  void hello(){
    System.out.println("Hello!");
  }
  void goodbye(){
    System.out.println("Goodbye!");
  }
}```

「Test」のクラスの中には、挨拶の処理を行う「hello」と「goodbye」、そして最初に呼び出される「main」の3つのメソッドがあります。また、下記のように挨拶というメソッドにまとめて記述することも可能です。

```class Test{
  public static void main(String[] args){
    Test test = new Test();
    test.greeting("Hello!");
    test.greeting("Goodbye!");
  }
  void greeting(String message){
    System.out.println(message);
  }
}```

*上記のように簡単なプログラムの場合は1つのメソッドにまとめて記述しても良いですが、例えば「Hello!」と挨拶する場合と「Goodbye!」と挨拶する場合で、異なる処理を行うプログラムを記述したいときには別々のメソッドにしたほうが良いでしょう。*

**フィールドとは、クラスの中でデータの値を保存する際に使用するものを指します。**フィールドを定義する際には、下記のように記載します。

```class クラス名{
  データ型 フィールド名;
}```

*フィールドは行頭に格納したいデータのデータ型を記述後、フィールドの名前を記します。*ここからは具体例を見ていきましょう。

```class Test{
  String name = "太郎";
  String color = "緑";
}```

*上記のようにフィールドを用意しておけば、後に使用する可能性があるデータを保存しておくことができます。*この場合、データ型には「String」を使用しています。

**プログラムを記述する際に、定義したクラスやメソッド、フィールドに対して日本語でメモを残しておくと、第3者がソースコードを確認したときに理解しやすいでしょう。**例えば、クラスの作成者や作成日などを残すのは一般的です。このときに使用するのがコメントです。*コメントは定められた規則に従って記述すれば、プログラムの処理に影響を与えることはありません。*Javaではコメントの記述方法が3つあります。ここでは、コメントの記述方法についてそれぞれ詳しく紹介します。

**コメントの記述方法の1つ目は「//」を使用します。この方法では、単一行のみコメントにすることが可能です。**「//」から行末までがコメントになります。例えば「//」を行頭に記述してその行をコメント行にしたり、行の途中で「//」を記述してその位置から行末までをコメントにしたりすることが可能です。ここからは具体例を見ていきましょう。

```int sum = 0;
// 25回繰り返す
for (int i = 1 ; i <= 25 ; i++){
  sum = sum + i; // 数値を1ずつ加算する
}
System.out.println(sum);```

この場合「25回繰り返す」と「数値を1ずつ加算する」がコメントアウトされます。処理結果として「25」が出力されます。

を使用します。この方法では、複数行をコメントにすることが可能です。

までの間に改行を含められるため、複数行をコメントにすることができます。ここからは具体例を見ていきましょう。

```int sum = 0;
/`*`
 25回繰り返す
 変数「sum」に1ずつ値を加算していく
 最後に処理結果を出力する
`*`/
for (int i = 1; i <= 25; i++){
  sum = sum + i;
}
System.out.println(sum);```

この場合「25回繰り返す」から「最後に処理結果を出力する」までがコメントアウトされます。処理結果として「25」が出力されます。

**コメントの記述方法の3つ目は「Javadoc」と呼ばれるツールを使用し、プログラムに記述したコメントからドキュメントを自動で生成する方法です。**書式は一般的には複数行コメントと同様ですが

を使用します。下記が具体例です。

```
/`**`
 コメント
 コメント
 コメント
`*`/
```

*クラスやメソッドを定義する前にこの形式でコメントを記述しておけば、 Javadocを使用して自動でドキュメントを生成することが可能です。*

## Javaをマスターするには充分な時間の確保が大切！

これまでに、Javaの概要や基本事項、コメントの記述方法について解説しました。Javaは今もなお需要が非常に高いプログラミング言語の1つであり、大規模システム開発を行う際などによく使用されています。**Javaはオブジェクト指向の考え方を取り扱っているため、学習コストが大きいことに注意しましょう。**

ここで紹介したのはJavaの基礎の中のほんの一部です。他にも*変数・データ型・演算子・インスタンス化・コンストラクタ・クラスの継承*などさまざまなことを覚えなければ、実務で役立つスキルに到達することはできません。そのため、Javaを学習する際にはマスターするには時間がかかることを念頭におき、*書籍や学習サイトを活用して実際に手を動かしながら勉強しましょう。*

PythonはAIに必須！AIエンジニアを目指すならPythonを学ぼう

Pythonと機械学習を学んでAI時代に対応できるエンジニアに

### Pythonを利用するための事前準備は？

Pythonを利用するための事前準備として、**Pythonの情報を入手しておき適宜参照する**のが良いでしょう。*Python公式サイトの日本語ドキュメント*は、以下のリンクから参照できます。
参考：[Python 3.9.4 ドキュメント](https://docs.python.org/ja/3/)
加えて、「*日本Pythonユーザ会*」においても*インストール方法*を紹介しています。こちらも参考になる情報です。
参考：[日本Pythonユーザ会 Python環境構築ガイド](https://www.python.jp/install/install.html)

その他の情報としては、*Python開発者向け日本語情報のTipsサイトやBlogサイトのリンク*が公式サイトで紹介されています。合わせて確認しておくのが良いでしょう。
参考：[Python JapaneseLanguage](https://wiki.python.org/moin/JapaneseLanguage)

### Pythonをダウンロードするには？

Pythonのソースコードやインストーラは、*Python公式サイトのDownloadリンク*にあります。現在**Python 3.9.6が最新**で、バージョンを指定してダウンロードすることが可能です。同様に、*プラットフォーム固有情報も整理されている*ため、Windows・Mac OS・他のプラットフォーム分類での情報が提供されています。
参考：[Python Download](https://www.python.org/downloads/)

## PythonをWindowsで利用するには？

Pythonの*Windowsリリース情報*は以下のダウンロードサイトで提供されています。現在WindowsのPython最新版は、**Python 3.9.6**です。
参考：[Python Relase for Windows](https://www.python.org/downloads/windows/)

### PythonのWindows版をダウンロードする方法は？

実際のモジュールやインストーラのダウンロードは**バージョンごと**にまとめられているため、最新版のダウンロードは*Python 3.9.6のダウンロードサイト*を用います。このサイトでは、リリースノートとダウンロードのリンクが掲載されています。
参考：[Python 3.9.6 Download](https://www.python.org/downloads/release/python-396/)

### PythonのWindows版をインストールする方法は？

PythonのWindows版をインストールするには、次の**2通りの方法**があります。

・*Python公式サイトから完全版インストーラをダウンロードする方法*
Windows版のPythonは、**zip形式のパッケージ並びにexe形式のインストーラが提供**されています。簡単にインストールすることが可能なため、インストーラをダウンロードしましょう。参考までに、Windows32ビット版/64ビット版のリンク情報をお伝えします。
参考：[Python 3.9.6 Download Windows installer (32-bit)](https://www.python.org/ftp/python/3.9.6/python-3.9.6.exe)
参考：[Python 3.9.6 Download Windows installer (64-bit)](https://www.python.org/ftp/python/3.9.6/python-3.9.6-amd64.exe)

・*Microsoft Storeからインストールする方法*
Microsoft Storeでpythonを検索すると、各バージョンの公式版Pythonが表示され、希望するバージョンのPythonがインストール可能です。Microsoft Storeを利用する方法は初心者でも簡単にインストールできます。

しかし、Microsoft Store提供版では、Pythonの最新バージョンを自動実行する*Python ランチャー（Python Launcher）*が同梱されていません。また、*Microsoft Storeのアクセス制限*によりTEMPへの書き込みやレジストリ書き込みが制限されています。これによって、使用する*Pythonアプリケーション動作に不具合が生じることもある*ため、本格利用には注意が必要です。
参考：[マイクロソフト Docs Windows での Python の使用についてよく寄せられる質問](https://docs.microsoft.com/ja-jp/windows/python/faqs)
参考：[Python 3.9.4 ドキュメント 3. Windows で Python を使う](https://docs.python.org/ja/3/using/windows.html)

## PythonをMac OSで利用するには？

Pythonの*Mac OSリリース情報*は以下のダウンロードサイトで提供されています。現在Mac OSのPython最新版は、**Python 3.9.6**です。
参考：[Python Relase for Mac OS X](https://www.python.org/downloads/mac-osx/)

### PythonのMac OS版をダウンロードする方法は？

PythonのMac OS版は、*Mac OSにプリインストール*されています。しかし、プリインストール版は*バージョンがPython 2.7やPython 3.7と古い*ため、**最新版をダウンロード**するのが良いでしょう。

実際の*モジュールやインストーラのダウンロードはWindows版と同じ考え方*で、バージョンごとにまとめられており、最新版のダウンロードは*Python 3.9.6のダウンロードサイト*を用います。このサイトではリリースノートとダウンロードのリンクが掲載されています。
参考：[Python 3.9.6 Download](https://www.python.org/downloads/release/python-396/)

### PythonのMac OS版をインストールする方法は？

PythonのMac OS版をインストールするには、次の**3通りの方法**があります。

・*Python公式サイトからインストールパッケージをダウンロードする方法*
Mac OS版のPythonはpkg形式のインストーラが提供されています。参考までに、Intel版とUniversal2版インストーラのリンク情報をお伝えします。
参考：[Python 3.9.6 Download macOS 64-bit Intel installer](https://www.python.org/ftp/python/3.9.6/python-3.9.6-macosx10.9.pkg)
参考：[Python 3.9.6 Download macOS 64-bit universal2 installer](https://www.python.org/ftp/python/3.9.6/python-3.9.6-macos11.pkg)
その他必要とされる追加手順については、以下のサイトに記載されています。
参考：[Python 3.9.4 ドキュメント 4. Macintoshで Python を使う](https://docs.python.org/ja/3/using/mac.html)

・*Homebrewを用いてインストールする方法*
HomebrewとはMac OSのパッケージ管理システムで、Rubyスクリプトを用いて動作しています。Homebrewをインストールするには、Mac OSのターミナル上でbashを用いて以下のコマンドを実行します。
*使用方法：（後述するypenvでもHomebrewを使います）*
$ /bin/bash -c  \\
\"$(curl -fsSL https\://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"
次にコマンド実行中に”Press RETURN to continue or any other key to abort”が表示されたらリターンキーを押して処理を継続します。
参考：[Homebrew](https://brew.sh/index_ja.html)

続いて、ターミナル上でインストールコマンド（brew install）を実行します。最新版のPythonをインストールする方法は以下の通りです。
*使用方法：*
$ brew install python3

ここで指定したpython3は最新版を指しますが、希望するバージョンのPythonがインストール可能です。Pythonを起動する際は標準インストールされているPythonではなく、インストールしたPythonのバージョンを指定する必要があります。
*使用例：*
$ python3

・*Homebrewおよびpyenvを併用してインストール管理する方法*
複数バージョンのPythonを使い分ける場合は、Homebrewに加えて**pyenvも追加インストールする**のが良いでしょう。pyenvもHomebrewからインストールできますので先ほどと同様の手順でHomebrew自体をインストールしておきます。Homebrewのインストールが完了したら、pyenvをインストールします。
*使用方法：*
$ brew install pyenv

続いて、pyenvを用いてPythonのインストール管理を行うので、以下のインストールコマンド（pyenv install）を実行しPythonをインストールします。pyenvは “install --list” 引数でインストールできるバージョンを表示することができます。
*使用方法：*
$ pyenv install Pythonのバージョン番号または--list
*使用例：*
$ pyenv install --list
$ pyenv install 3.9.6

続いて、インストールバージョンを全体のデフォルト実行するPythonに設定します。
*使用例：*
$ pyenv global 3.9.6
$ python -V
Python 3.9.6

これでバージョン番号の指定を気にせずにPythonを利用することが可能です。*Homebrewとpyenv*を利用する方法はとても簡単なため、**初心者におすすめの方法**です。

## Pythonインストール後は演習して理解を深めまよう

Pythonのインストールが完了し、Pythonが実行できたら*サンプルコード*を試してみましょう。サンプルコードは、ウェブサイトあるいは参考書籍に多数掲載されています。「習うより慣れろ」のスタイルで、*学習インプット*にめどが立ったら、*コード作成のアウトプット*を実践し**さらにスキルを高める**ことがおすすめです。

Pythonは簡単に記述できるため初心者でも人気が高まっています。ここではPythonのダウンロード方法およびインストール方法を説明します。Windows版およびMac OS版を中心に、必要となるインストール作業について詳しく解説していきます。

Pythonのインストールに関する情報は整備されており、作業は簡単に実施できます

Windows版のPythonは、Python公式サイトやMicrosft Storeからインストール可能です

Mac OS版のPythonは、Python公式サイト並びにフリーパッケージ管理システムを用いてインストールします

Pythonのインストール方法：初心者向けインストール方法を1から解説！

**CSSとは「Cascading Style Sheets」 の略称であり、スタイルシートと呼ばれることも多いです。**Webサイトを制作するには、HTMLとCSSのプログラミング言語が必要です。ここでは、HTMLとCSSの違いとCSSでできることについてわかりやすく説明します。

HTMLとは「HyperText Markup Language」の略称です。HTMLはタグで文章を囲うことで意味付けを行い、文章を構造化します。一方CSSは、HTMLで作成した構造に対して装飾する際に用いられます。つまり、**CSSは構造とデザインの役割を区分するためのプログラミング言語**と言えるでしょう。

CSSが存在していなかった時代は、HTMLを使用して文字の色や大きさなどを指定していました。しかし、ソースコードが長くなってしまい、編集がしにくいなどのデメリットがありました。そこで、誕生したのがCSSです。*CSSファイルを作成すれば、装飾に関することを一括して指定できる*ようになります。HTMLとCSSで役割を区分することで開発効率を向上させ、多種多様なデザインが作れるようになりました。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

これまでにも説明しましたが、CSSはHTMLで記載されたWebサイトの構造に対して装飾を行うためのプログラミング言語です。**例えば、文字の色・大きさ・行間・行揃え・背景の色・大きさ・ボーダー・角丸・余白調整・アニメーションの変更や追加などが可能です。**

また、*HTMLとCSSで役割が分けられているため、メンテナンスがしやすい*という特徴があります。他にもCSSファイルを別に作成するため、HTMLファイルには構造の指定だけを入力すれば良く、記述がシンプルとなり、内容がサーチエンジンにも理解されやすくなります。そのため、*SEO対策の面でもメリットがあると言えるでしょう。*

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

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

ここでは、CSSのメリットとデメリットについて解説します。**CSSを使用するとWebページのデザインや管理が簡単になる等のメリットがありますが、デメリットもあります。**メリットとデメリットを両方して理解して、CSSを効率良く使用しましょう。

### メリット1.デザインを一括で指定できる

HTMLだけでWebページを作成しようとすると、各WebページのHTML上でフォントの色を指定したり見出しスタイルを作成したりする必要があります。一方、**CSSはすべてのデザインを一括で指定できるため、個々のページでデザインを管理する必要がありません。**デザインを変更した際もすべてのページに適用されるため、デザインの管理がしやすいというメリットがあります。

### メリット2.メディアごとに表示スタイルを変更できる

**CSSは様々なメディアで最適化された表示が可能**です。パソコン・スマートフォン・タブレット・テレビ・印刷用など、異なるメディアやデバイスごとに適切なデザインで表示することができます。メディアによって異なるCSSを作成すれば、同じWebページでもメディアごとに最適なスタイル制御ができるでしょう。

### メリット3.効果的なSEO対策となる

HTMLでWebサイトのデザインを管理しようとすると、各WebページのHTML上でマークアップを付けるため、マークアップの量が膨大になり、Webサイトが重くなる・検索エンジンに正しく認識されないなどの問題が発生します。

しかし、デザインの設定をCSSで一括管理することで、HTMLのマークアップを最小限におさえることができます。そのため、Webサイトが軽量化され検索エンジンへも正しく認識されるなどのメリットがあります。**Webサイトの軽量化や検索エンジンへの正しい認識により、SEO効果やユーザーのアクセシビリティの向上が期待**できます。

### デメリット1.すべてのブラウザに対応できない場合がある

現在使用されているブラウザではあまり問題はありませんが、**NetscapeやNavigatorなどの昔のブラウザではCSSに対応しておらず、Webページを正しく表示できない**場合があります。もしCSSに対応していない昔のブラウザでWebページを表示させたい場合は、HTMLでデザインを指定するなどの対応が必要です。

### デメリット2.ブラウザによって表示が異なる場合がある

ブラウザにはGoogle Chrome・Firefox・MicrosoftEdgeなどさまざまな種類がありますが、**同じCSSを使用していてもブラウザによって表示が異なる**場合があります。例えば、Googleb Chromeでは見出しタイトルが青字で表示されているのに、Firefoxでは黒字で表示されるといったことがあります。

すべてのブラウザで同じデザインを表示させたい場合は、CSSの設定を見直す・HTMLで個別に対応するなどの対策が必要です。

### デメリット3.ミスがすべてのページに影響する

CSSのメリットの1つであるデザインの一括管理ですが、**1つのミスもすべてのWebページに影響することに注意**しましょう。例えば、見出しのフォントデザインを変更しようとして間違えて本文のフォントデザインを変更した場合、すべてのWebページの本文に影響します。対策として、CSSを編集する際は必ずバックアップをとる・こまめにプレビューを確認するなどをしましょう。

**CSSには「セレクタ{プロパティ:値;}」という基本書式があります。**この基本書式を利用して、「どの要素の（セレクタ）」「何を（プロパティ）」「どのようにする（値）」を指定します。ここでは、基本書式の詳細について紹介します。

**セレクタ（selector）には、日本語で「選択」という名の通り、どの要素に対してCSSを用いるかを決定する役割があります。**例えば、h1・h2・p・head・body・strongなどのタグ要素や、「id=”名前” 」「class=”名前”」のidやclassに指定した名前を指します。

ここで、idとclassの違いについて疑問を感じる方がいるかもしれません。idの場合、同じidの名前は1サイトの中に1度しか使用できません。一方classの場合、同じclassの名前は1サイトの中で何度でも使用することができます。idとclassの違いには注意して使用しましょう。

**プロパティ（Property）とは、使用するCSSに関するスタイルの種類を指します。**例えば、背景画像を指定したい場合には「background-image」、幅を変更したい場合には「width」、高さを変更したい場合には「height」を使用します。CSSには、さまざまなプロパティが用意されているため、*実現したいイメージのデザインに応じてプロパティを使い分けることが大切*です。

**値とは、セレクタに適用するプロパティを「どのようにするのか」を表現した数値を指します。**例えば、プロパティに背景色を変更する「background-color」が指定されている場合は「blue」「red」「green」などの色を値に設定します。*値は、Webサイトの目的に応じて設定することが重要*です。例えば、高齢者向けのWebサイトを制作する際には、文字サイズは大きく指定した方が良いでしょう。

例えば「p{background-color:yellow;}」のようにCSSを指定します。この場合、p要素の背景色をイエローに指定するという意味になります。**記述方法は、まずセレクタを先頭に要素を記述し、プロパティと値は、波括弧で「{ }」囲みます。**プロパティと値の間は、コロン「:」でつなぎます。

また、*複数のプロパティを同時に指定することも可能*です。セミコロン「;」を使用して、区切って記述します。なお、最終行のセミコロンは省略できます。ここからは、具体例を紹介します。

p{
	font-size:32px;
	font-weight:normal;
	font-style:oblique;
	background-color:red
}

上記のように、複数のプロパティをまとめて記述することができます。そして、最終行のセミコロンが省略されていることがわかるでしょう。ここでは、CSSの具体的な記述方法について詳しく紹介します。

CSSでは、文字の大きさや幅・高さを指定するためにさまざまな単位を使用します。**CSSでよく使用する単位は「px」「%」「em」「rem」の主に4つ**です。

「px」はピクセルとも呼ばれ、1pxはモニター画面の1ピクセルを指します。「%」はパーセントとも呼ばれ、em単位と同様で、パーセントによって幅や高さの割合を指定することができます。「em」はエムとも呼ばれ、1emの大きさはWebブラウザの「font-size」のデフォルト値で決定されます。ユーザーが変更しなければ、1emは16pxが一般的です。「rem」はルートエムとも呼ばれ、1remはルート要素の「font-size」の値と同様です。

CSSのemとは？フォントサイズ指定方法の違いを比較解説！

**CSSでよく使用される色指定の方法は「カラーコード指定」「RGB指定」「RGBA指定」の主に3つ**です。例えば、文字や背景、ボーダーなどのカラープロパティに対して指定します。

また、RGB値の確認方法について気になる方も多いでしょう。*RGB値の確認方法は、Photoshopなどの画像編集ソフトウェアを使用すると調べることができます。*ソフトウェアを持っていない場合には、Google検索で「カラーピッカー」と検索し、Google社が提供しているカラーピッカーを使用して簡単に調べることも可能です。

ここからは、それぞれの色指定方法について詳しく紹介します。

*1.カラーコード指定*
カラーコード指定とは、「#」から始まる16進数のRGB値によって色を指定する方法のことです。アルファベットは、小文字でも大文字でも問題ありません。RGBそれぞれの値がゾロ目の場合には、3ケタに省略することができます。ここからは、具体例を記載します。

・カラーコード指定の一例
赤色を指定：#FF0000
アルファベットは小文字でも大文字でも可能：#7B3CFF→#7b3cff
3ケタに省略可能：#00FF00→#0F0

*2.RGB指定*
RGB指定とは、10進数のRGB値によって色を指定する方法のことです。「0」が薄く、「255」が濃い色を示します。ここからは、具体例を記載します。

・RGB指定の一例
赤色を指定：rgb(255,0,0)
青色を指定：rgb(0,0,255)

*3.RGBA指定*
RGBA指定とは、RGB値に、透明度を加えて色を指定する方法のことです。「0.0」が透明で、「1.0」が不透明を示します。「0.1」から「0.9」までの小数点の値を使用して、透明度の割合を指定します。ここからは、具体例を記載します。

・RGBA指定の一例
赤色で透明度を50%で指定：rgb(255,0,0,0.5)

で囲まれた部分は、Webブラウザの表示には影響しないコメントになります。どのようなスタイルを指定したCSSなのかをコメントで残すことで、レビューや更新を行う際に、ソースコードについて理解しやすくなります。そのため、実務ではコメントが用いられることが多いです。また、コメントは複数行にまたがったとしても機能します。ここからは、具体例を記載します。

・コメントの一例
```
/`*コメントが1行のみ*`/
p{
	font-size:32px;/`*文字の大きさは32px*`/
	font-weight:bold;/`*文字の太さは太字*`/
	color:#000080;/`*文字の色はネイビー*`/
	background-color:#C0C0C0/`*背景の色は*`/
}
```

```
/`*コメントが複数行にまたがる場合*`/
p{
	font-size:32px;/`*文字の大きさは32px*`/
	font-weight:bold;/`*文字の太さは太字*`/
	color:#000080;/`*文字の色はネイビー*`/
	background-color:#C0C0C0/`*背景の色はシルバー*`/
/`*
複数行にまたがっても
コメントアウトは機能します
*`/
}
```

ここでは、CSSを効率的に学べるおすすめの学習方法を紹介します。**CSSはWebサイトを作成しながら学ぶことで、インプットとアウトプットを同時にできて知識を身に着けやすい**でしょう。それぞれの学習方法の特長を理解し、自分に合った方法でCSSを勉強してください。

独学で学ぶなら参考書がおすすめです。**初心者の方でもわかりやすいものが豊富にあるので、自分のレベルに合った本を選ぶと良い**でしょう。ここでは、おすすめの参考書をいくつか紹介します。

*HTML＆CSSとWebデザインが 1冊できちんと身につく本*
本書は初心者の方にはもちろん、未経験からWebデザイナーを目指す方におすすめの本です。HTMLやCSSの基本の記述方法に加え、よく使われている4つのレイアウト手法についても学べます。実務で使えるテクニックや最新の手法も載っているため、実用的な知識を身に着けたい方におすすめです。

【参考】[HTML＆CSSとWebデザインが 1冊できちんと身につく本：書籍案内｜技術評論社](https://gihyo.jp/book/2017/978-4-7741-9064-8)

*1冊ですべて身につくHTML & CSSとWebデザイン入門講座*
Webサイトを作成しながら学べる本書は、初心者の方にもやさしい内容となっています。説明に沿って実際にWebサイトを作成できるため、知識のインプットとアウトプットが同時に行え知識が身に付きやすいです。

【参考】[1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | SBクリエイティブ](https://www.sbcr.jp/product/4797398892/)

*世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書*
本書は15のレッスンに分けられており、段階的に学ぶことができます。カラー表記で分かりやすく、知識の理解度を確かめることができる練習問題も付いています。文字のスタイル変更・レイアウト手法などに丁寧な解説があるので、練習問題で間違ったところもすぐに解決できるでしょう。

【参考】[世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書：書籍案内｜技術評論社](https://gihyo.jp/book/2019/978-4-297-10302-6)

オンラインの学習サイトには、**わかりやすい動画で解説しているものや、実際にコーディングができて手を動かしながら学べるものまでさまざまなタイプがあります。**無料のものもたくさんあるため、「CSSを勉強したいけど何から手をつけたらいいのかわからない」という方も試しやすいです。

まずは初心者向けの学習サイトから試して、知識がついてきたら中級～上級者向けの学習サイトで学ぶといった段階的な学習方法がおすすめです。

ある程度CSSの知識がついたら、自分の好きなWebサイトのデザインを模写するのもおすすめです。**サイトを模写することによって「どんなコーディングをすればこんなデザインになるのか」といったことが理解しやすく、実践的なテクニックが身に付きます。**

また、参考書や学習サイトには載っていない手法がとられていることもあり、新しい知識や応用的な手法も学ぶことができます。

## CSSの基礎を押さえてWebサイトを作成できるようになろう！

これまでに、HTMLとCSSの違いやCSSでできること、メリット・デメリット、CSSの基本書式、CSSの具体的な記述方法、おすすめの学習方法について解説しました。**CSSとは、HTMLで記載されたWebサイトの構造に対して装飾を行うためのプログラミング言語**です。

*CSSには基本書式があり、「セレクタ」「プロパティ」「値」を利用して装飾します。*CSSには、さまざまな単位や色指定の方法があり、全てをいきなり覚えようとすると大変です。そのため、基礎をきちんと押さえることが重要です。HTMLやCSSの学習を行う際には、実際に自分で手を動かしながら学習することをおすすめします。そのため、書籍だけではなく、学習サイトやスクールなどを活用して勉強しましょう。

Webサイトを制作するには、HTMLとCSSのプログラミング言語が必要です。当記事ではHTMLとCSSの違いやCSSでできること、CSSの基本書式、具体的な記述方法について解説します。CSSの基礎を身に付けたい方は、ぜひこの記事を参考にしてください。

CSSとは、HTMLで記載されたWebサイトの構造に対して装飾を行うためのプログラミング言語

CSSには基本書式があり「セレクタ」「プロパティ」「値」を利用して装飾を行う

HTMLやCSSの学習を行う際は、実際に自分で手を動かしながら学習することがおすすめ

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

**PHPとは、Webサイトを動的に作成するためのサーバーサイドで動作するプログラミング言語を指します。**他のプログラミング言語と比較して文法・仕様が理解しやすいため、プログラミング初心者でも習得しやすいと言われています。また、データベースとの連携がしやすいため、CMSなどのWebアプリ開発にも使用されることが多い言語です。ここでは、PHP入門としてPHPの概要やPHPとJavaScriptの違いについて詳しく紹介します。

**PHPはスクリプト言語の1つです。**スクリプト言語とは、アプリケーションソフトウェアを開発するためのシンプルなプログラミング言語の一種を指します。 よってPHPでは、コンピューターに対して「どういう処理をしたいか」を、HTMLの中に記載するだけで簡単にプログラムを作成することが可能です。

PHPは、同様のスクリプト言語であるJavaScriptと比較されることが多いです。**PHPとJavaScriptの違いは、JavaScriptはWebブラウザの中で動作するプログラミング言語であるのに対して、PHPはサーバプログラムの中で動作する言語である点です。**

*JavaScriptの場合、どのようなプログラムで動作しているかを外部から確認することができます。一方PHPの場合、どのようなソースコードが記載されているのかは、外部から確認することはできません。*またPHPを使用する場合、WebサーバーがPHPのプログラミング言語に対応している必要があります。近年では、多くのWebサーバーがPHPに対応しているため、そこまで気にする必要はありません。

PHPでできること6選！作品例やアプリ、できないことも紹介！

ここでは、PHPを使用してプログラムを作成する際に、覚える必要があるプログラムの記述方法ついて詳しく紹介します。

これまでにも説明しましたが、PHPのプログラムはサーバーで行う処理を記述する際に用いられることが多いです。またPHPプログラムは、HTMLの中に埋め込まれる形で記載されます。*ユーザーからWebサイトに対してアクセスがあった際に、WebサーバーがHTMLページの中のPHPで記述したプログラムの処理を行い、処理結果をHTMLページと併せてユーザーへ返すのが一般的な流れです。*したがって、ユーザー側ではPHPのプログラムは見えず、その処理結果のみを確認することになります。

**HTMLページにPHPのプログラムを記載する場合には、PHPのプログラムがどこからどこまでなのかを明確にすることが必要です。そのため、開始記号と終了記号の間にプログラムを記載します。**開始記号と終了記号にはいくつかの記載方法があります。ここからは具体例を見ていきましょう。

````<`script language="PHP"`>`〇〇〇`<`/script`>`
`<`?php 〇〇〇 ?`>`
`<`? 〇〇〇 ?`>`
`<`% 〇〇〇 %`>````

*1つ目の記載方法は「<script>タグ」を使用した方法です。*JavaScriptのプログラムにもこの方法が利用されています。しかし、ソースコードが長くなってしまうことから実務ではあまり使用されていません。

2つ目の記載方法が最も使用されています。*「<?php」から「?>」までにPHPのプログラムを記載します。なお、記載するソースコードは複数行になっても問題ありません。*

3つ目の記載方法は2つ目の記載方法を簡略化したものです。ただし、「XML宣言」の際にもこの方法は使用するため、2つ目の記載方法を利用することがおすすめと言えます。

4つ目の記載方法は3つ目の記載方法と似ています。*PHPでは「?」の代用として「%」を使用することができます。*ただし、この方法も実務ではあまり使用されていません。また、特別この記載方法を採用する意味はありません。

HTMLページの拡張子は一般的に「.html」が使用されます。HTMLページ内にPHPのプログラムが記載されている場合でも、HTMLページであることには変わりありません。**しかし、PHPプログラムが含まれているHTMLページということをWebサーバーに認識させるために、ファイルの拡張子を変更する必要があります。**

*ただし、どのような拡張子を使用するか決まっているわけではありません。よってWebサーバーの設定で、PHPプログラムとして処理を行うファイルの拡張子を指定し、PHPプログラムが含まれているHTMLページに指定した拡張子を付けることになるでしょう。*一般的にPHPプログラムが含まれているHTMLページの拡張子には「.php」を使用します。よって、Webサーバーには「.php」を拡張子として認識させる設定を行います。

ここでは、PHPプログラムを作成する際に、覚えるべき文法の基礎について詳しく紹介します。

**コメントとは、プログラムの処理に影響を与えないものを指します。**コメントを使用すれば、ソースコードの意味を第3者が確認しても理解しやすいようにすることが可能です。コメントを記載する方法には3種類あります。

ソースコードの行頭を「//」もしくは「#」にすることで、その行をコメントにすることが可能です。また

の間にコメントを記述することで、複数行をコメントにすることもできます。ここからは、具体例を見ていきましょう。

```
<?php
echo '`<p>`Hello World!`</p>`';
// コメントになります
# コメントになります
/`*`
コメントが
複数行にまたがっても問題ありません
`*`/
?>
```

**ソースコードを記述している際に、同様のデータを使い回したいことがあるでしょう。このときに変数を使用するのが重要です。**変数とは、任意の文字列や数値を一時的に入力しておく箱に例えられることが多いです。箱の中に任意のデータを入力しておき、そのデータを必要な時に利用したり、変更したりすることができます。ここからは、具体例を見ていきましょう。

```
<?php
  $name="YamadaTaro";
  print ($name);
?>
```

この実行結果として、Webブラウザには「YamadaTaro」と表示されます。後に、「YamadaTaro」を「SuzukiTaro」などに変更することもでき、最初に変数で指定されたデータを編集することが可能です。

*変数のルールとして、まずドル記号「$」から記述し始める必要があります。使用できる文字は「a～z」「A～Z」「0～9」「_」です。また、数字を先頭に使用することはできません。*日本語を使用することも可能ですが、一般的に推奨はされていません。変数の名前の規則に決まったものはありませんが、できる限り短く理解しやすいものにしましょう。変数の名前とは、「$」の後の文字列を指します。

*WordPressをカスタマイズする際には変数がよく使用されますが、その中に定義済みのグローバル変数があります。*ここからは、具体例を見ていきましょう。

```
<?php
 $post`_`time = get`_`post`_`time(); 
?>
```

「$post_time」とは、投稿時刻を取得するグローバル変数を指します。この場合には、現在の記事の投稿時刻を取得することとなります。

**演算子とは、計算を行う上で必要な記号を指します。計算の種類には「算術演算子」「比較演算子」「論理演算子」などがあります。**ここからは具体例を見ていきましょう。

```
<?php
  $keisan = 10 + 20;
  echo "10 + 20 = $keisan\n";
?>
```

この実行結果として「10 + 20 = 30」とWebブラウザに表示されます。*他にもさまざまな演算子の使用方法があるため、学習サイトや書籍を利用して勉強することがおすすめです。*

**if文・while文はさまざまなプログラミング言語で利用されます。PHPの場合、WordPressでカスタマイズする際に使用されることが多いです。**if文とは、指定した条件に当てはまる場合には「〇〇〇」という処理を行い、当てはまらない場合には「×××」という処理を行うPHPの命令文のことです。ここからは具体例を見ていきましょう。

```
<?php
    $parameter = 5;
    if($parameter == 5){
    echo "5です。";
    }elseif($parameter == 10){
    echo "10です。";
    }
?>
```

「parameter」という変数は「5」であり、条件式に当てはまるため「5」という処理結果が表示されます。if文を使用すれば、上記よりも複雑な条件を作ることも可能です。*一方while文とは、指定した条件に当てはまる間は同じ処理を繰り返すというPHPの命令文のことです。*ここからは具体例を見ていきましょう。

```
<?php
　$num = 1;
　while（$num < 10）{
　echo "条件に当てはまる場合は処理を続行する";
　$num++;
　}
?>
```

「num」という変数の初期値は「1」であり、増減式は「$num++」です。よって、ソースコードを解読すると、「num」に1ずつ足していき、「10」以上になるまでは処理を続行するという意味になります。

**関数とは、処理を集めた命令の定義を指します。関数を使用すれば、処理がまとまっているため、複雑な処理を簡単に実行できるようになります。**WordPressでは、関数をPHPの記述と組み合わせれば、「WordPress テンプレートタグ」として容易に使用できるようになるため便利です。

例えば、WordPressのページで「最新の〇〇件」が表示されていることがあります。この〇〇を変更したい場合には、以下のようなテンプレートタグを記述します。

```
<?php
　wp`_`get`_`archives('type=postbypost&limit=5');
?>
```

テンプレートタグを記載すれば、「最新の5件」が表示されます。テンプレートは必要な場所にソースコードを貼り付けるだけで使用することが可能です。

## PHPの基礎をマスターしてWordPressをカスタマイズしてみよう！

これまでに、PHPの概要やプログラムの記載方法、文法の基礎について解説しました。**PHPとは、Webサイトを動的に作成するためのサーバーサイドの中で動作するプログラミング言語を指します。**他の言語と比較して文法が理解しやすいため、プログラミング初心者でも習得しやすいと言われています。また、近年のトレンド技術の1つでもあるCMSを構築する際にもPHPは使用されます。

ここで紹介したのはPHPの入門ということで、基礎知識のみです。*そのため、実務で役立つスキルを身に付けるには、書籍や学習サイトを使用して学習することがおすすめです。まずはPHPのスキルを習得して、WordPressをカスタマイズできるようになりましょう。*

PHPの資格は？資格の種類や特徴を難易度とともに詳しく解説！

PHPとは、サーバーサイドの中で動作するプログラミング言語を指します。PHPのスキルを習得すれば、WordPressなどのCMSを構築できるようになります。当記事では、PHPの概要やプログラムの記載方法、文法の基礎について解説します。

PHPはWebサイトを動的に作成するためのサーバーサイドで動作するプログラミング言語

PHPの文法はシンプルであるため、プログラミング初心者でも比較的習得しやすい

PHPのスキルを習得すれば、WordPressをカスタマイズできるようになる

PHPの入門として概要やプログラムの記載方法、文法について解説

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