CSS

【CSS】Google Fontsの利用方法について解説します！新UIに対応2023年11月更新

2023-11-29 By プログラミング入門ナビ編集部

この記事は、オンライン講座Udemy「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」とProglus「CSS入門」のサポート記事です。

2023/11あたりでGoogle Fonts ウェブサイトのUIが変更になりましたので、解説いたします。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

方法

Potta Oneフォントに設定する方法です。
(1) Google Fontsにアクセス

(2) 検索ボックスに「potta one」と入力して検索

(3) potta oneをクリック

(4) 「Select Regular 400」をクリック※既に選択されていて「Remove Regular 400」と表示されていればOKです

(5) 右上のカバンのアイコンをクリック

(6) 必要なテキストをコピーして利用

※アクセスの時期によっては、「CSS rules to specify families」の記載が無い場合がございます。
その場合は、以下のテキストをご利用ください。

font-family: 'Potta One', cursive;

また操作方法がわからない場合には、レクチャーの添付資料（リソースや補足説明）に、コピペ用のCSSのコードを用意しておりますのでご利用ください。

補足：画像はUdemyの場合。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Emmetとは？HTMLを素早くコーディングする方法を習得しよう！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

HTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。

簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。

Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。

このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。

動画でEmmetについて学ぶ

フォローしてね！

Emmetとは？

Emmet（読み：エメット）は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。

若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。

略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。

具体的に見た方が早いので下記の例を見てください。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  ul#nav>li.item$*4>a{Item $}
</body>
</html>

7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  <ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
  </ul>
</body>
</html>

たった1行だったのが6行のコードに早変わりしました。

「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字＋展開ボタン」の手間で199文字分のコーディングができることになります。

この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。

これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。

公式サイト：Emmet — the essential toolkit for web-developers

VSCodeでの使い方

プログラマーから絶大な人気を得ているテキストエディタであるVSCode（Visual Studio Code）でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。

「展開」はTabキーでできます。

VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。

なお他のテキストエディタ（Sublime TextやAtom等）では外部プラグインとして導入が必要になります。

公式サイトからダウンロード可能です。

主な記述方法

ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。

まずは初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。

初級編

タグ単体

要素名だけ入力し「展開」（VSCodeではTabキー押下）すると、開始タグと（必要に応じ）終了タグが補完されます。

<!-- 展開前 -->
h2

Tabキーを押すと

<!-- 展開後 -->
<h2></h2>

入れ子構造

入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。

<!-- 展開前 -->
div>a

Tabキーを押すと

<!-- 展開後 -->
<div><a href=""></a></div>

兄弟構造

入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。

<!-- 展開前 -->
h2+div

Tabキーを押すと

<!-- 展開後 -->
<h1></h1>
<div></div>

繰り返し

特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。

繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。

入れ子表記との組み合わせも可能です。

<!-- 展開前 -->
ul>li*3

Tabキーを押すと

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML雛形

HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。

一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。

<!-- 展開前 -->
html:5

Tabキーを押すと

<!-- 展開後 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

なお、デフォルトでは言語設定部分（<html lang=”ja”> ）が日本語（”ja”）でなく英語（”en”）となっていることが多いです。

適宜直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。

VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう｜プログラミング入門ナビ

中級編

idを付加

要素にidをつけるには「#」で指定します。

<!-- 展開前 -->
div#item1

Tabキーを押すと

<!-- 展開後 -->
<div id="item1"></div>

クラスを付加

要素にクラス名をつけるには「.」で指定します。

<!-- 展開前 -->
p.content

Tabキーを押すと

<!-- 展開後 -->
<p class="content"></p>

テキストを指定

コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。

<!-- 展開前 -->
p{ここが本文です}

Tabキーを押すと

<!-- 展開後 -->
<p>ここが本文です</p>

属性を指定

属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。

<!-- 展開前 -->
img[src="dog.jpg" alt="犬の画像"]

Tabキーを押すと

<!-- 展開後 -->
<img src="dog.jpg" alt="犬の画像">

上級編

グルーピング

いくつかの表記の組み合わせを（）で囲めば、一つのグループとして扱うことができます。

繰り返したい要素が1つだけでなく複数要素である場合などに有効です。

<!-- 展開前 -->
table>(tr>th+td*3)*3

Tabキーを押すと

<!-- 展開後 -->
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

連番をつけて展開

クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。

<!-- 展開前 -->
h2.item${見出し$}*3

Tabキーを押すと

<!-- 展開後 -->
<h2 class="item1">見出し1</h2>
<h2 class="item2">見出し2</h2>
<h2 class="item3">見出し3</h2>

兄弟要素のテキストを指定

次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。

<!-- 展開前 -->
p>{お申し込みは}+a{こちら}+{から}

Tabキーを押すと

<!-- 展開後 -->
<p>
  お申し込みは
  <a href="">こちら</a>
  から
</p>

まとめ

HTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。

CSSにも応用可能なので興味のある方は調べて活用してみてください。

コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

ウェブ開発でわからないことがあったらどうすればいい？MDNの使い方やメリットを紹介！

2020-07-28 By プログラミング入門ナビ編集部

はじめに

HTMLやCSS、JavaScript等を学習していると「このタグはどういう意味なんだろう？」「この記述は必須？不要？どっちだったっけ？」といった疑問が出ることがよくあります。

全てを熟知し覚えておく必要はないのですが、こういった場合に自分で調べられるようにしておくと学習が捗りますね。

この記事ではウェブ開発においてわからないことが出てきた時のおすすめの調べ方を紹介します。

動画解説

本記事の内容を動画でも解説しています。

https://youtu.be/eQBXwLYrXXc

MDNとは

MDNはMozilla Developer Networkの略称で、ブラウザのFireFoxなどを開発しているMozilla Foundationが運営している公式サイトです。

ウェブ開発に携わる人々の役に立つよう、関連する技術情報を公開しています。

わからないことがあったら、まずはこのMDNを参照するのがおすすめです。

強くおすすめする理由としては次のようなものがあります。

信頼性の高い情報が手に入る

ウェブ開発の学習をしていてわからないことがあった場合、基本的には検索サイトで調べる方が多いですね。

それ自体は問題ないのですが、検索結果に多く出てくる個人の方が書いたブログや技術系投稿サイトの情報を鵜呑みにしてしまうのは少々問題です。

よくまとまっていて大変参考になることも多いのですが、情報が古かったり、正確性が担保されていないといった懸念があります。

結局、そういった情報を参考にあの手この手を試してみたものの、なかなかその記事に書いてある通りにならず、よく調べてみるとかなり古いバージョンについての話だった、といったケースはよくある話です。

こうなってしまうと貴重な時間と労力の無駄ですね。

一方、MDNは情報の質が高いので実際の業務で参照しているエンジニアも多く非常におすすめのリファレンスです。

個人発信の記事と比較すれば多少取り付きにくい部分はあるかもしれませんが、こういった信頼性の高いサイトで調べることにも慣れていくことを強くおすすめします。

ウェブ開発に関する情報が一通り揃っている

MDNのサイトで「テクノロジー」というメニューをクリックすると、取り扱っている情報のカテゴリが見られます。

HTML・CSS・JavaScriptといったウェブ開発に必須の技術に加え、グラフィックやHTTPプロトコルの話題もありますね。

特定の分野に絞って詳しく解説しているサイトは多くありますが、このように必要な情報が体系立てて網羅されているのがMDNの利点です。

HTMLならここ、CSSならこっち、というようにいろんなサイトを調べなくとも、MDNを参照すれば一通りの情報が揃うのは学習効率を上げるための大きなメリットといえます。

無料で使用可能

ここまでの信頼性と網羅性を兼ね備え、かつ日本語版もあるという便利なMDNですが、無料で参照することが可能です。

教科書にすれば数冊分の情報に匹敵することを考えると、素晴らしい価値のあるサイトですね。

リファレンスという立ち位置である以上、ウェブ開発学習の全てを担うことは難しいですが、プログラミング講座や教材で開発の流れを掴みながら、わからないことがあったときに参照するにはうってつけです。

取り組んでいる講座や教材と組み合わせて使用すれば抜群のコストパフォーマンスを発揮します。

MDNを使ってみよう

早速、MDNの使い方を見てみましょう。

ブックマークしておくのがおすすめ

MDNは下記のリンクから閲覧可能です。ブックマークしておくとわからないことがあった際にすぐ調べられるので便利ですね。

MDN web docs

特定のワードについて調べたい場合は「テクノロジー」メニューからカテゴリを選ぶ方法がおすすめです。

例えばHTMLのアンカー要素<a>のタグに指定できる属性はどんなものがあるのか調べたい場合について見てみましょう。

「テクノロジー」メニューでHTMLをクリックし、左側の「HTML elements」をクリックして展開すると<a>がありますね。

これをクリックするとアンカー要素<a>の詳細ページに入り、指定可能な属性一覧を確認できます。

Google検索も便利

もしくは、調べたいワードが決まっているならばGoogle検索でMDNページを見つけ出すのも手っ取り早いです。

たとえばHTMLの段落要素<p>について調べたいとき「mdn html p」とGoogle検索してみましょう。

検索結果に出たMDNのサイトをクリックすると、直接詳細ページに飛ぶことができます。

まとめ

ウェブ開発でわからないことがあった際、おすすめの調べ方としてMDNの使い方やその利点を紹介しました。

自分で調べる癖が付けられると、学習スピードがぐんと上がります。

ぜひプログラミング学習のお供に活用してください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

CSSのclearプロパティとは？そもそも必要ないのでは？疑問を徹底解説！

2020-03-31 By プログラミング入門ナビ編集部

はじめに

CSSで左寄せや右寄せのレイアウトを行いたい時は、floatプロパティを使ったフロートレイアウトが便利ですよね。

これに関連したプロパティの一つに、clearがあります。

フロートレイアウトにおける回り込みを解除するためのものですが、clearをしてもしなくてもレイアウトが変わって見えないことがあり、混乱してしまうケースが多いようです。

ここでは、フロートレイアウトの基本とclearプロパティの使用有無による違いを解説します。

フロートレイアウトとは

まず、フロートレイアウトについておさらいしていきましょう。

CSSではfloatプロパティに適切な値を指定することで左寄せや右寄せを行い、後に続く要素を反対側に回り込ませることができます。これをフロートレイアウトと呼び、例えば左側に画像を掲載して、右側にそのコメントや説明のテキスト文を並べたい時などに便利です。

フロートレイアウトをしないとき

理解のために、まずフロートレイアウトをしない場合の例を見てみましょう。まず、下記のようなHTMLファイルを作成します。

[test.html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>float test</title>
        <link rel="stylesheet" href="css/no-float.css">
    </head>
    <body>
        <h1>フロートの練習</h1>
        <div id="wrap">
            <div id="box1">BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト</div>
            <div id="box2">BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト</div>
            <div id="box3">BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト</div>
        </div>
    </body>
</html>

次に、上記HTMLファイルと同じ階層に”css”ディレクトリを作成し、その中に下記のようなCSSファイルを作成します。

[no-float.css]

/* no-float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
}
#box3 {
    background-color: blue;
    color:  white;
}

HTMLファイルをブラウザで見ると下記のようになり、上からbox1・box2・box3の順でレイアウトされます。

フロートレイアウトをするとき

それでは、CSSでfloatレイアウトの指定をするとどうなるでしょうか。”css”ディレクトリに新たに下記ファイルを作成します。

[float-noclear.css]

/* float-noclear.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
}

box1ではfloat: leftを、box2ではfloat:rightを指定していることに注目してください。これはそれぞれ左寄せ・右寄せを意味し、その後に続く要素を逆側に回り込ませるようレイアウトします。

HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float-noclear.css">

下記のように表示されるはずです。box1が左寄せされ、後に続くbox2はbox1の右側に回り込む形で右寄せされ、box3はその逆側である左側に回り込んでいますね。

clearプロパティとは

floatプロパティの関連プロパティとして、clearがあります。

通常、直前の要素がfloatで左寄せもしくは右寄せされている場合、その逆に回り込む形でレイアウトされるのですが、何らかの理由で回り込みを解除したい場合に使用されます。

clear: left　左寄せされた要素に対する回り込みを解除する
clear: right　右寄せされた要素に対する回り込みを解除する
clear: both　左寄せまたは右寄せされた全ての要素に対する回り込みを解除する
clear: none　回り込みを解除しない（デフォルト値）

clearしてもしなくても同じに見える？

clearの効果を確認するため、”css”ディレクトリにさらに下記ファイルを作成してみます。21行目、box3でclear:bothが指定されていることに注目してください。

[float.css]

/* float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
    clear:  both;
}

HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float.css">

box1とbox2の高さが同じ場合

ウィンドウ幅によっては、box1とbox2の高さが同じになります。この時、clearを指定しても、表示結果はclearを指定しなかった場合と全く同じです。

[float.cssを指定した場合の表示]

box1の方がbox2より高い場合

しかし、文字数はbox1の方が多いため、ウィンドウ幅を広くしたり狭くしたりするとbox1の方がbox2より高さが高くなることがあります。

clear有無による違いはこの時明確になります。HTMLファイル(test.html)の6行目で指定するcssファイルを変更してウィンドウサイズを調整してみてください。

[float.cssを指定した場合の表示]

[float-noclear.cssを指定した場合の表示]

このように、一見clearの有無によって見え方が同じでも、ウィンドウサイズが変わると見え方は大きく変わります。

このことを意識してclearを明確に指定しないと、意図と異なる表示になることがあるので注意が必要です。

clearの設定は必要

上記のケースで、例えばbox1にバラの写真、box2にバラの説明、box3にまた別の花の写真を載せるのであれば、box3からは別の話題になるのでclearして新しい行から始めるべきですね。

また、余白にはwrapで指定した背景を見せたい場合でも、clearなしでは余白が生まれないので背景を表示することができません。

回り込みの解除をしたい場合は、プレビューでの表示に差がなかったとしても必ずclearの設定を行いましょう。

まとめ

フロートレイアウトの基本ルールとclearプロパティの使用有無による違いについて解説しました。

clearは指定してもしなくても表示が変わらないので、そもそも必要ないのでは？と思われることも多いですが、どんなサイズで表示されても意図通りのレイアウトとなるように、必要な場合は必ず使用しましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

初心者からWebエンジニアへ転職するために必要なスキルセットは？優先順位別に紹介！

2020-03-31 By プログラミング入門ナビ編集部

はじめに

Webエンジニアへの転職、やることが多くて何から始めたらいいか悩んでしまいますよね。

ひとまずプログラミングの学習を始めたはいいものの「これだけでいいのだろうか」「あれもやっておくべき？」など、考え始めるときりがありません。

この記事では、Webエンジニアに最低限必要なスキルセットとして何を押さえるべきかについて、講師のおすすめを紹介します。

Webエンジニアリングの全体像

まずはWebエンジニアの仕事ではどういったことをするのか、ざっくりと見てみましょう。

Webサイト制作時の役割分担として、フロントエンドとサーバーサイド（バックエンドとも呼ばれます）があります。

フロントエンドはWebサイトがユーザからどう見えるかを司るユーザーインターフェイス部分の実装です。

サーバーサイドはその名の通り、Webサイトが動くサーバー上で必要な機能の実装部分となっています。

また、どちらの場合も、基本的な開発ツールを使いこなせるようにしておくことも重要です。

Webエンジニアへの転職後はこのいずれかもしくは両方を担当することになります。

全体の動きを把握するためにも、まずは次項以降のスキルセットを一通り身に付けて簡単なWebサイトを開発してみるのがおすすめです。

フロントエンド

最初に、フロントエンド開発に必要なスキルセットを紹介します。ブラウザ上で簡単に挙動が確認できるので、まずはフロントエンドから入ると理解が進みやすいです。

HTML + CSS

文章や画像など、Webページの見た目を記述するための言語がHTML、そのレイアウトを制御するのがCSSです。

Webエンジニアリングにおいて一番基礎の部分であり、初心者の方でも学校の授業等で触れたことがあるかもしれません。

新HTML入門

WE05-CSS入門

JavaScript

Webサイトには、ユーザがただ読んだり見たりするための静的なコンテンツだけではなく、アンケートやファイルアップロードなどユーザが操作するコンテンツもありますね。

このようなコンテンツではユーザの操作に応じた動的な処理が必要で、これを記述するための言語がJavaScriptです。

実に世界の95%以上のWebサイトでJavaScriptが使用されており、初めて学ぶのに適しています。

WE09-JavaScript入門

Bootstrap

HTML、CSS、JavaScriptはいずれもプログラミング言語ですが、自分でデザインも実装も行うとなると手間がかかります。

Bootstrapは、表示先のウィンドウサイズに合わせてレイアウトを動的に変化させるレスポンシブデザインなど、定番のレイアウトを簡単に実装するためのCSSフレームワークです。

これを覚えればデザイン性の高いサイトをサクサクと作れるようになります。

WE08-Bootstrap4 入門

サーバーサイド

フロントエンドを一通り理解したら、サーバーサイドの技術を身に付けましょう。サーバー環境を構築し、実際に動かしながら学んでいくのが良いでしょう。

SQL

一定以上の規模であれば、データベースを使わないWebサイトはほとんどないと言っても過言ではありません。例えばECサイトならば顧客情報や商品情報を管理するのに必要です。

SQLはデータベースを操作するためのプログラミング言語で、こちらも習得することを推奨します。

後述するスクリプト言語のフレームワーク等ではActiveRecordという仕組みが導入されており、オブジェクト（アプリケーション内の実体）とデータベースをスムーズに繋ぐORM（Object-Relational Mapping）が可能です。

この機能を用いればSQLを意識することなくデータベースを扱うことはできますが、不具合が発生した際のデバッグやパフォーマンスを上げるためのチューニングはSQLを知らなければ難しいでしょう。

SQ01-SQL入門

Ruby

サーバー側の処理を記述するためのスクリプト言語にはPerl、PHP、Python、Java等様々なものがありますが、中でもおすすめしたいのがRubyです。

日本人のまつもとゆきひろ氏が開発された言語ということもあり、日本語のドキュメントが充実していて人気が高く、後述する通り便利なフレームワークもあるため初心者の学習に適しているといえます。

RB01-新・Ruby入門

Ruby on Rails

Rubyでの開発を簡素化するために、よく使われる機能等をまとめて使いやすくしたフレームワークがRuby on Railsです。

これを使うとコード量が少なく開発スピードが上がるため、実際の開発現場では必ずといっていいほど導入されています。

RR01-新・Ruby on Rails入門

サーバー構築技術(１)heroku

サーバーの構築や運用についても学ぶ必要があります。サーバー用の機器を購入して自宅で構築する方法もありますが、手軽に始められるPaaS(Platform as a Service)を活用するのが良いでしょう。

herokuではハードウェアの準備やOSのインストール等を行わず、アプリケーションのデプロイに集中できるので習得スピードを早められます。

heroku

サーバー構築技術(2)AWS

もう一つのおすすめはAmazon社が提供するAWSです。導入している企業が多いため、習得しておくと良いでしょう。

認定試験もあるので、転職活動を有利に進めるために取得を目指すのも良いかもしれません。

Amazon Web Service

開発基本ツール

開発に欠かせない基本ツールの使い方も習得する必要があります。Webエンジニアに限らず全てのエンジニアに必須のスキルです。

Git/GitHub

Gitはソースコードのバージョン管理システムです。

開発を進めていくとコード量が膨大になり複雑になってきますよね。

後から不具合が起きた場合の対応のため、どのバージョン以降から発生したのかを確認・修正したり、別の機能を派生的に追加したりする目的でソースコードを管理する必要があります。

ローカル環境で使用するバージョン管理システムとしては、SubversionやCVSといったものも有名ですが、より便利なGitが現在の主流です。

また、Gitのクラウド版であるGitHubは数千万人規模のユーザが利用しており、ソースコードの公開やそれを通した交流の場となっています。

WE16-Git / GitHub入門

Linux

サーバー環境はLinux上に構築されることが多いため、基本的なLinux操作方法について学ぶ必要があります。

まずは重要なコマンドを覚えることから始めると良いでしょう。

LS01-はじめてのLinuxサーバ（ローカル環境編）

まとめ

Webエンジニアになるために必要なスキルセットについてご紹介しました。初心者の方におすすめの講座情報も掲載していますので、ぜひチェックしてみてください。

学習方針確認のお助けになれば幸いです。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する