*[【マイナビITエージェント】あなたの転職活動を無料でサポートいたします](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=banner&utm_campaign=acv01)*

## HTML編集ソフト（エディタ）を活用する

HTML/CSSを学び始めると、HTML作成ツールとしてHTML編集ソフトが必要になってきます。ここでは、*HTML/CSSの初心者の方に向けて、使い勝手が良く、GUIに優れたHTMLエディタを紹介していきます。*皆さんに合うHTMLエディタ選定の参考にしてください。

**HTMLエディタは、HTML/CSSの作成や編集を効率的に行えるテキストエディタです。**そもそも「テキストエディタ」とは、ソースや文書ファイルなどを編集するためのプログラムのことです。HTMLエディタは、HTMLの作成ツールと考えて良いでしょう。

WindowsやMacに標準搭載されているテキストエディタは、主にテキストの編集を行うためのアプリですが、*HTMLエディタにはテキストの編集に加えてソースコードの入力補助・タグの自動補完・エラーチェック・ファイル連携などの機能が備わっています。*

これらの機能を用いて効率的なHTML記述やWebページの制作を行えますので、HTML/CSSを日常的に使うエンジニアの方にはHTMLエディタの利用がおすすめです。

### なぜHTMLエディタにこだわる必要があるのか

Windwos標準の「メモ帳」、Mac標準の「テキストエディット」でもHTML/CSSの作成や編集は可能です。しかし、これらの標準ソフトはHTML/CSSに特化したものではないので最低限の機能しか搭載しておらず、HTML/CSSの作成・編集に最適とは言えません。

ITエンジニア、プログラマーの仕事は常に時間との勝負です。しかも、スピードだけではなく高い品質も求められます。プログラムの品質とボリュームを保ちながら納期までにシステムを完成させなければなりません。

**ITエンジニアは高い生産性が求められる職種であり、それを実現するには使い勝手の良いテキストエディタに出会う必要があります。**自分に合う良いエディタを使うことは、自らの仕事の生産性を上げるために欠かせません。

では、HTMLエディタを使うことで具体的にどのようなメリットがあるのでしょうか？まずはHTMLエディタの一般的なメリットについて確認しておきましょう。

**HTMLエディタには自動補完機能が付いており、入力ミスや入力漏れを防いでくれるため、HTMLの記述をスムーズに行うことができます。**

自動補完機能とは、開始タグを打つと自動的に終了タグが記述されるなど、打ち込んだ記号や文字の関連タグを自動で入力してくれる機能です。この機能があることで、効率的にHTMLの記述作業ができます。

HTMLは記述ミスをしても思い通りの表示がされないだけで、プログラムのように重大なエラーにはなりにくいです。そのため、うっかりミスに気付かずに記述を進めてしまうことがあります。しかし、仕事でHTMLを記述する際に、そのようなミスは許されません。

HTMLは階層構造が複雑になればなるほど、記述ミスが起きやすくなります。**HTMLエディタでは、構成要素ごとに異なる色で表示してくれるなど、複雑な階層でも構成が分かりやすくなる機能がついているので記述ミスが減ります。**こうした機能は一般のテキストエディタにはありません。

### Webページをプレビューできる

一般のテキストエディタでHTMLを記述する場合は、Web形式のファイルで一旦保存し、そのファイルをWebブラウザで開き直して正しく表示されているかどうかを確認する必要があります。

一方、**HTMLエディタにはプレビュー機能があり、HTMLを記述しながら同時にプレビュー機能でWeb画面を確認できます。**微調整をする際もすぐに確認ができるので、非常に便利です。

### CSSやJavaScriptの記述に利用できる

最近のWebサイトの作成では、HTMLに加えて「CSS」が必須であり、さらに「JavaScript」も扱うケースが多くなっています。「CSS」はWebのデザインを作るための言語で、「JavaScript」はWebに動きを与えてくれる言語です。

HTMLエディタはCSSやJavaScriptにも対応していることが多いです。複数のプログラム言語を扱えるため、**HTMLエディタを扱えるようになると仕事の効率が一気に上がります。**

HTMLエディタは大別すると以下の2種類があります。それぞれメリット、デメリットがあるので環境に応じて使い分けると良いでしょう。

### インストールして利用するタイプ

**HTMLエディタのソフトをネット上からダウンロードし、インストールして使うタイプのエディタソフトです。**一旦インストールすれば、オフラインでも利用でき、しかもPC上で独立して動くため動作が軽いといったメリットがあります。

一方、インストールの手間が掛かる点と、作成したデータの管理を自分のパソコン上でしか行えないため共同作業に向かない点はデメリットです。

### オンラインで利用するタイプ

**ネットワークに接続したパソコンのWebブラウザ上で利用するHTMLエディタです。**インストールは不要でWeb上で管理でき、場所に縛られず利用できるため、リモートワークや共同作業では便利です。

その反面、ネットワークに依存するためネットワークの状況次第では使えない、動作が重くなるなどのデメリットがあります。

## HTMLエディタを選ぶ際のポイント

HTMLエディタは数多くリリースされており、それぞれ特徴が異なるため、自分に合ったエディタを見つけるのは簡単ではありません。

ここでは、数あるエディタの中から、自身に適したエディタを見つけるためのポイントについて説明をします。自分に合うエディタを見つけるための参考になれば幸いです。

### 自分の使っているOSに対応しているか

エディタを選ぶ際には、**自分が普段使っているパソコンのOSに対応したHTMLエディタか否かを確認する必要があります。**エディタの選定や検討でミスがないよう、自分のパソコンのOSや、OSのバージョンに合ったエディタかどうかをよく確認しましょう。

多くのHTMLエディタは外国製品であり、標準製品は英語での表記が一般的です。**英語に不安がある方は、日本語対応のエディタを選ぶのが無難です。**

英語版のHTMLエディタでも日本語化キットなどがあれば簡単に日本語化できますので、日本語化の可否については確認するようにしましょう。

それぞれのHTMLエディタには製品ごとに異なる標準機能、拡張機能があります。自身のスキルが上がってくると、追加機能が必要になる場合もあります。**標準機能や拡張機能の内容、ツールの有無なども確認しておいた方が良いでしょう。**

エディタは慣れるに従って使い勝手が変わっていきます。自分が求める機能が整っていると長く使えますので、よく比較検討してから選びましょう。

### 調べたい時にすぐに調べられるか

HTMLエディタは使い慣れるまでにさまざまな疑問や壁にぶつかります。そのような時、しっかりした解説サイトや情報共有の場があると早く解決できます。

調べたい時にすぐに調べられるのは、エディタ選択の際の重要な条件です。**サポートサイト、解説サイトの有無はしっかり確認しておきましょう。**

## 初心者におすすめしたいHTMLエディタ5選

ここからは、初心者から中級者まで幅広く利用されている人気のHTMLエディタを5つに絞って紹介します。基本的には無料で利用できるエディタを中心に紹介しますが、*一定期間利用すると有料になるものもありますので、予算に応じて検討しましょう。*

**「サクラエディタ」は、Windows向けの高機能でシンプルなHTMLエディタです。**日本人によって開発されたもので、日本語の会議室や情報共有の場もあります。また、GitHub上にあることから、開発に参加することもできます。

サクラエディタには、キーワードの強調・アウトライン解析・補完入力などの特徴的な機能があります。

▪タイプ：インストール
▪対応OS：Windows
▪料金：無料で使用できます。

【参考】：[サクラエディタ](https://sakura-editor.github.io/)

**「Visual Studio Code」は、マイクロソフトが2015年にリリースしたHTMLエディタです。**マイクロソフト製だけに安心感があります。

HTML以外にも、JavaScript・Python・PHP・Java・C#などの主要なプログラミング言語に対応可能で、プログラマーやエンジニアの強い味方となるでしょう。

▪タイプ：インストール
▪対応OS：Windows、Mac、Linux
▪料金：無料で使用できます。

【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code)

**「Brackets」は、ブラウザの設計が簡単にできる軽量のテキストエディタです。**Webデザイナーやフロントエンドのデベロッパーのためにゼロから開発されたもので、「クイック編集機能」など各種便利機能が豊富に備わっています。

また、環境を問わず動作するため、どのOSでも使うことができます。2021年9月1日をもって開発元であるAdobe（アドビ）によるサポートは終了しましたが、現在はコミュニティによる開発が行われています。

【参考】：[Brackets](https://brackets.io/)

**「CotEditor」は、macOSのために作られたテキストエディタで、macOSのアプリケーションに合わせた振る舞いをします。**

また、日本で開発されたこともあり、エンコーディング判定や和英が混ざった文書、縦書き表示など、日本語特有の問題にも対応しています。

▪タイプ：インストール
▪対応OS：Mac
▪料金：無料で使用できます。

【参考】：[CotEditor](https://coteditor.com/)

**「Sublime Text」は豊富な拡張機能とカスタマイズの自由度の高さ、さらにその動作の軽さからエンジニアには人気が高いことで有名です。**主要なプログラミング言語にはほぼ対応しており、プログラマーの方は重宝するでしょう。

なお、日本語化も可能ですが、拡張機能の利用にはコマンドラインの利用が必要です。単純にHTML/CSSのみを記述しプレビューするというレベルでの使い方を求める方にはやや難しく感じるかもしれません。

▪タイプ：インストール
▪対応OS：Windows、Mac、Linux
▪料金：無料で使用できますが、登録から3年経過した後にバージョンアップを行うには、有料ライセンス購入が必要です。

【参考】：[Sublime Text](https://www.sublimetext.com/)

**「Livewave」は、リアルタイム (ライブ) プレビューを備えた HTMLエディタです。**記述したHTMLをプレビュー画面でリアルタイムに確認できるため、練習やテストなどに向いているでしょう。

また、ブラウザ上でコーディングできるため、ソフトウェアをインストールする必要がなく、気軽に利用できます。

▪タイプ：オンライン
▪料金：無料で使用できます。

 【参考】：[Liveweave](https://liveweave.com/)

**「Online HTML Editor」は、オンライン上でコーディングができるテキストエディタです。**他のエディタとは異なり、ドキュメント編集結果から、テキスト入力や画像の挿入、装飾などのHTMLソースを得ることができます。

そのため、ワープロ感覚で扱いやすく、初心者の方にもおすすめです。記述したHTMLをプレビュー画面でリアルタイムに確認することもできます。

【参考】：[Online HTML Editor](https://onlinehtmleditor.dev/)

## 自分好みのエディタを見つけて、快適なコーディングを実現しよう

この記事では、おすすめのHTMLエディタについてご紹介しました。仕事ができるエンジニアは必ずお気に入りのエディタを持っています。

良いエディタに出会うことが皆さんの活躍に大いに役立ちますので、当記事を参考に皆さんご自身にとって最適なエディタを見つけていただければ幸いです。ただし、*職場によっては自分に合ったエディタを使用できない可能性があることは留意しておくべきです。*

ルールが厳しい職場だと、エディタなどを自由にダウンロードすることができず、用意されているツールだけで開発を行うことも少なくありません。

HTML/CSSを学ぶと、多くの方は使い勝手の良いHTMLエディタが必要だと感じるようになります。ここでは、HTML/CSS初心者の方に向け、おすすめのHTMLエディタを5つ紹介していきます。自分に合うHTMLエディタを見つけてHTMLの達人を目指しましょう。

HTML/CSSを効率的・効果的に作成するためには、HTMLエディタを利用することが早道になる。

HTMLエディタにはオンライン・インストールタイプがあるが、状況に応じて使い分けるとよい。

HTMLエディタはさまざまなプログラム言語のコーディングに適したものがあり、エンジニアの武器として活用したい。

【2023年版】初心者向けのHTML編集ソフトおすすめ7選！

## HTMLとCSSは独学で習得できる？

Webサイトやアプリ開発において、HTMLとCSSのスキルや知識は欠かせません。これらの言語は制作物の見栄えに大きく影響するため、ITエンジニアはもちろん、Webデザイナーなどのクリエイターなども習得しておきたいプログラミング言語です。

*これからHTMLとCSSを勉強したい場合、スクールなどには通わずに独学で習得できるのでしょうか。*この記事では、HTMLとCSSの学習において独学が可能なのか、学習方法やおすすめの参考書について紹介します。また、後半ではHTML・CSS以外に身につけたいスキルについても解説しますので、ぜひ参考にしてください。

### 学習のポイントを絞ることが大事

HTMLとCSSを独学で習得する場合、大事なのは「学習のポイントを絞ること」です。詳しくは後述しますが、例えば習得において最初から完璧な理解を求めないようにしたり、エディタを活用してコーディングを楽にしたりするなど、どれも共通点は頑張りすぎないことです。

プログラミングの学習は挫折しやすい側面があるため、習得の難易度に関わらず、どこかで力を抜く箇所を設定することでモチベーションが維持しやすくなるでしょう。また、便利なツールなどを頼り、効率的な学習を意識するのも重要です。

<center>[エンジニア転職を成功させるため<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とは「Hyper Text Markup Language」の略で、Webサイトの文書作成やレイアウト調整に使われる言語です。**

例えば、文章に見出しをつける・画像を挿入する・ボタンやリンクなどの位置を変更するといったことが可能です。HTMLはWebサイト制作に欠かせないものであり、WebエンジニアやWebデザイナーを目指すなら優先的に習得したい言語です。

HTMLではタグというものを使ってレイアウトの調整を行います。例えば、```<B>```というタグを使うことで指定した文章を太字にすることが可能です。HTMLを扱う場合、タグの使い方を一通りマスターする必要があります。

HTMLでできることは少ない？できないことやタグも一覧でまとめた

CSSとは「Cascading Style Sheets」の略で、Webサイトのレイアウト調整に使われる言語です。HTML単体でもレイアウト調整は可能ですが、ソースコードが煩雑になってしまうことがあるため、レイアウト調整はCSSの方で行うことが多いです。

また、**CSSの方がWebサイトの色や形を変更したり場所を入れ替えたりといった調整が簡単に行えます。**CSSもWebサイト制作に携わるなら習得するべきスキルでしょう。

CSSでは、セレクタ・プロパティ・値の3つを指定することでレイアウト調整を行います。例えば、「p {color: red; }」と記述することで、pタグの色（color）を赤（red）に変更することが可能です。HTMLと違いpタグ箇所をまとめて変更できるため、効率的にレイアウト調整ができます。

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

HTML・CSSを習得する上での難易度は、そこまで高くはありません。ITスキルのある方（ITの基礎知識がある・プログラミング言語を1つ程度習得している）であれば、1日2〜3時間の学習で、2週間程度でブログサイトが作れるレベルには達することができます。*IT知識のない初心者の方でも1ヶ月程で習得できるでしょう。*

HTML・CSSを習得するには、とにかくひたすら実践的にコードを書く方法がおすすめです。参考書や学習サイトの活字を読むだけでは習得しにくく、手を動かして知識を後から補足する体系的な学習方法が身につきやすくなります。

まずはどのようなWebサイトやアプリを作成したいのかを明確にし、それができる方法を紹介している参考書や学習サイトを活用しましょう。

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

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

### フロントエンドエンジニアの年収

HTMLとCSSを頻繁に扱うITエンジニアとして、フロントエンドエンジニアを例に挙げて平均年収を算出してみました。

「マイナビエージェント職業別年収ランキング」によるフロントエンドエンジニアの平均年収は385万円（※2023年4月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収と比較すると、やや低めであることが分かります。

フロントエンドエンジニアは、スキル・資格・実績によって年収の幅が大きい職種であるため、年収アップにはこれらを充実させることが重要です。**おすすめの資格としては、Webクリエイター能力認定試験があります。**HTML・CSSを扱うエンジニアであれば、取得して損はないでしょう。

【参考】：[マイナビエージェント職業別年収ランキング](https://mynavi-agent.jp/it/jobindex/05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)
※【平均年収 調査対象者】2020年1月～2020年12月末までの間にマイナビエージェントサービスにご登録頂いた方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)
【参考】：[Webクリエイター能力認定試験](https://www.sikaku.gr.jp/web/wc/)

## HTML・CSSを最短で学ぶおすすめの方法

続いて、HTML・CSSのおすすめ勉強方法を解説します。HTML・CSSを実務レベルまで上げていく効率的な方法をまとめましたので、これから勉強をはじめる方はぜひ参考にしてください。

まずは、学習サイトで基礎を学ぶのがおすすめです。オンラインで学習できるサービスには様々な種類があり、HTML・CSS未経験者向けに基礎に絞って分かりやすくまとめられています。いきなり参考書に手を出すと難しくて挫折する可能性があるので、まずは学習サイトで基礎を習得しましょう。

また、*学習サイトはスマホでも閲覧できるため、移動中や休憩中に手軽に学習できるのもメリットです。*費用については、無料だったり月額1,000円程度で利用できたりするサービスが多いので、まずは1度試してみましょう。

学習サイトで基礎を習得したら、参考書で応用を学びましょう。HTML・CSSの細かいタグの知識を参考書で補強します。**HTML・CSSの参考書には様々なものがありますが、できるだけ出版日が新しいものを選んでください。**

なぜなら、HTML・CSSはバージョンによって書き方が少しずつ異なるため、古い本だと今は使われていない書き方を学んでしまうからです。参考書は辞書としても活用できますので、1冊は手元に置いておきましょう。

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

HTML・CSSの文法をある程度覚えたら、サイトを模写してみましょう。*好きなWebサイトのソースを確認し、コードを実際に書いて自分の環境で実行します。*

サイトを模写することで実践的なHTML・CSSのテクニックを知ることができたり、見やすいサイトデザインにするにはどうすれば良いか分かったりするメリットがあります。模写を繰り返し、自分だったらどうするかを考えながらデザインを変更し、デザインスキルを高めていきましょう。

**模写が終われば、実際に1からサイトを作りましょう。**まず、作りたいWebサイトの種類を決めます。練習では自分のプロフィール紹介など簡単なものがおすすめです。次に、サイトデザインをどうするかPowerPointなどにまとめます。

後は、それを参考にコーディングを行います。分からない箇所は随時参考書で確認し、知識の穴埋めを行いましょう。1からサイトを作ることでWebサイト制作の知識がまんべんなく身につき、実務レベルまで到達することが可能です。

<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・CSSを完璧に理解する必要はありません。ベテランのエンジニアであっても、HTMLの細かいタグなどを全て覚えている人は少ないからです。

**ある程度基礎をマスターしたら、制作物の作成に取り掛かってください。**その方がHTML・CSSを学ぶ楽しさも実感できますし、実務レベルに到達する速度も早くなります。

### 参考書を見ながら書いて良い

HTMLのタグなどは主要なもの以外は暗記する必要はなく、Webサイト制作時は参考書を見ながら行っても問題ありません。HTML・CSSに限らずプログラミングの勉強は暗記することよりも、理解することが大切です。*参考書を見ながらでも良いのでひとまず制作物を完成させましょう。*

### 一緒に学習する仲間を見つける

HTML・CSSを独学する場合、一緒に学習する仲間を見つけるのもおすすめです。1人で黙々と学習していると、どうしても途中で飽きてしまい挫折しやすくなります。*SNSやコミニュティなどで仲間を見つけて切磋琢磨することで、途中で飽きず学習を続けることが可能です。*

### おすすめのエディタでコーディングを楽に

ここでは、効率的なコーディングを行うためのHTMLエディタをいくつか紹介します。**エディタを使用することで、コードミスのチェック・タグの種類ごとの色分け・作業のサポートなどを行ってくれます。**初心者の方におすすめしたいHTMLエディタは以下の3つです。

*1.Atom*
定番ともいうべきHTMLエディタです。ベースは英語ですが、日本語化プラグインもあり、初心者から熟練者まで幅広く使えます。
【参考】：[Atom](https://atom.io/)

*2.サクラエディタ*
日本人が開発したエディタです。日本語の解説サイトもあり、使い方に困った際には大きな力になります。
【参考】：[サクラエディタ](https://sakura-editor.github.io/)

*3.Visual Studio Code*
マイクロソフト社提供の無料のエディタです。様々なプログラム開発で重宝します。
【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

テキストエディターとは？エンジニア初心者におすすめのエディタも紹介！

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

ここでは、HTML・CSSの独学におすすめの本を紹介します。学習サイトやネットの情報などと合わせて、本で勉強すると効果的に知識をつけることができます。難しい内容だと挫折しやすいため、簡単でわかりやすい本を中心に紹介します。

### HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉

HTML・CSSの知識がない初心者向けの本です。**基本をしっかり学べるのはもちろん、コードやデザインの詳細といった応用部分も学べます。**フルカラーイラストなので、字体だけでは理解しにくい概念や考え方についても分かりやすく学べます。また、最新のHTML Living Standardにも対応しているため、今時に必要な知識を習得できます。

▪著者：株式会社アンク
▪ページ数：200ページ
▪出版社：翔泳社
▪発売日：2023/03/22

【参考】：[HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉 ](https://www.shoeisha.co.jp/book/detail/9784798181059)

### できるポケット Web制作必携 HTML&CSS全事典 改訂3版

本書は、HTMLの要素（タグ）とCSSのプロパティを解説したリファレンスの書籍です。**Webサイトのコードが読めるようになったり、理解できるようになったりすることを目的としています。**タグやプロパティの解説のみならず、HTMLやCSSの仕様・記述方法・文字参照・URLなど、基礎知識についてしっかり解説しています。

サンプルコードをダウンロードできる読者特典も付いています。

▪著者：加藤 善規、できるシリーズ編集部　
▪ページ数：592ページ
▪出版社：インプレス
▪発売日：2022/08/22

【参考】：[できるポケット Web制作必携 HTML&CSS全事典 改訂3版](https://book.impress.co.jp/books/1121101140)

### 教科書では教えてくれないHTML&CSS

参考書や講座の学習だけでは現場で活躍できるレベルに達せないことが多い傾向がありますが、本書はこれまでに培った知識を現場で使えるレベルに引き上げることを目的としている本です。**初心者からプロになるためのレベルアップを目指します。**ある程度他の参考書などで知識を身につけた方におすすめです。

▪著者：狩野 祐東
▪ページ数：336ページ
▪出版社：技術評論社
▪発売日：2021/07/17

【参考】：[教科書では教えてくれないHTML&CSS](https://gihyo.jp/book/2021/978-4-297-12193-8)

### これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本

**学校のテキストとして使用されるなど、参考書としての信頼度の高い1冊です。**フルカラーかつイラストも豊富なので直感的に理解しやすく、1つ1つの解説も丁寧なのが特徴です。読破することで、HTML・CSSの基礎知識を一通り網羅できます。

▪著者：Capybara Design 竹内 直人/竹内 瑠美
▪ページ数：288ページ
▪出版社：翔泳社
▪発売日：2021/10/14

【参考】：[これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本](https://www.shoeisha.co.jp/book/detail/9784798170114)

## HTML・CSS以外に身につけたいスキル

最後に、HTML・CSS以外に身につけたいスキルを解説します。WebエンジニアやWebデザイナーとして活躍したいなら、HTML・CSS以外にもいくつか必要なスキルがありますので以下で詳しく紹介します。

JavaScriptはプログラミング言語の1つであり、Webページ上の動きをつけるために使われるものです。例えば、フォームに書き込んだ際にアラートを表示したり、ページにアニメーションやスライドショーをつけたり、といったことができます。

**HTML・CSSだけでなくJavaScriptも扱えることで、作成できるWebサイトの幅が広がり獲得できる案件の種類も増えるでしょう。**

JavaScriptはHTML・CSSに比べると難しいですが、習得すれば市場価値の高いエンジニアを目指すことができます。ある程度HTML・CSSを理解できたら、JavaScriptにも挑戦しましょう。

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

Webデザイナーを目指すならデザインスキルも身につけたいところです。*まずは、PhotoshopやIllustratorなどのデザインソフトの使い方をマスターしましょう。*これらのソフトの使い方は動画サイトなどで分かりやすく解説された教材もあるため、それらを参考に実際に使いながらマスターするのが良いです。

加えて、他のサイトをよく観察し、美しいデザインにするにはどうすれば良いかを学習しましょう。ボタンやリンクの位置を使いやすくしたり、写真を目立たせるレイアウトにしたりするテクニックを学び、実際にWebサイトを作成します。

制作物をいくつか作ったらポートフォリオとしてまとめ、転職的に企業に提出してアピール材料とすることが可能です。未経験からWebデザイナーを目指す場合、制作物を見せてスキルレベルを証明することは重要になります。

独学でWebデザインを学ぶ方法とその注意点について徹底解説！

Webサイトやアプリ開発において、HTML・CSSの存在は欠かせません。難易度は高くありませんが、覚えることが多いため、しっかりとした学習時間の確保が必要です。今回は、初心者の方が独学でHTML・CSSを習得するための勉強方法やポイントについて解説します。

HTML・CSSはWebサイトの文書作成やレイアウト調整に使われる

学習サイトや参考書で基礎・応用を学び、その後実際にWebサイトを作っていくのが良い

必要に応じてJavaScriptやWebデザイン、PHPなども併せて学習していくと良い

HTML・CSSは独学で習得できる？初心者におすすめな最短の勉強方法

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

*そこで、ここではHTML・CSSの基礎知識について解説します。*HTMLとCSSの違いやそれぞれの役割、HTMLとCSSの関係やつなげるやり方についてまとめていますので、HTMLやCSSについてもっと深く知りたいという方は、まずはこちらから読み進めてください。

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

HTMLとは、Webページを作成するための言語のことです。タグを使ってWebページの書式を表します。たとえば、表・画像・リンクなどのWebページに必要な要素を、任意の位置に配置することが可能です。

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

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

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

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

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

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

CSSはHTMLに埋め込んで使うことも可能ですが、ソースコードの可読性を上げるために別ファイルに記述することが多いです。

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

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

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

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

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

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

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

上記で説明したテキストエディタ（メモ帳）とWebブラウザの2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバが必要です。Webサーバは自分で立てたり、レンタルしたりして準備します。

なお、今回は自分が作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。

次に、*HTMLの雛形を作ります。*HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。

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

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

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

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

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

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

### ④記述した内容が正しく表示されるかをブラウザでチェックする

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

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

次に、*CSSファイルを作成します。*なお、CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。CSSを読み込ませるには、headタグにCSSのファイル名を指定します。次のように記述してください。

linkタグは関連する文書を指定するためのものです。ここでは「test.css」を関連ファイルとして指定します。このように記述することで、HTMLにCSSを読み込ませることができます。

最後に、*CSSファイルを作成しましょう。*テキストエディタを開き、以下のように記述してください。

記述したらファイルを保存します。ファイル名は「test.css」にしてください。先程同様、「test.html」を開いて確認しましょう。「Hello World」という文字が太字になっています。これはCSSファイルによって、Webページ上の文字を太字に変更したからです。

**CSSは「セレクタ{プロパティ:値;}」というように記述するのが基本です。**セレクタに「何を変更するのか」を記述します。上記の場合、bodyタグの中に書かれた文章全てが対象となっています。プロパティと値には、「何をどのように変更するのか」を記述します。上記の場合、文章を太字に変更しています。

これがCSSの書き方の基本です。

HTMLの記事（1ページ目）