HTML/CSS

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

投稿日:2020年11月15日 更新日:

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像

 

あなた
HTMLとCSSの意味って何でしょうか?言葉は聞いたことがあるのですが実際の意味がわかりません。

 

HTMLとCSSの学習をスタートしようとしているあなたは「そもそもHTMLとCSSの意味って何?」という状態だと思います。

 

HTMLとCSSの初心者の方はまずHTMLとCSSの意味をおさえてから学習をスタートさせましょう。

 

この記事では実際にHTMLとCSS初心者の状態から学習を始めてWEBエンジニアになった僕がHTMLとCSSの意味について詳しく紹介していきます。

 

この記事を読むのにかかる時間は5分ほどです。

【この記事でわかること】

✔ HTMLとCSSの意味

✔ HTMLとCSSの学習の進め方

 

【この記事を読んでほしい方】

✔ HTMLとCSSの初心者の方でそれぞれの意味がよくわからない方

 

【この記事の信頼性】

この記事を書いている僕は現役のWEB系エンジニアです。

HTMLとCSSの初心者状態からスクールに通って習得しエンジニアになりました。

現在は平均年収以上もらいながら服装も時間も場所も自由に働けています。

 

ではさっそく見ていきましょう。

 

HTMLとCSSの意味についてエンジニアが解説

CSSのコーディング画面

 

HTMLとCSSの意味がよくわからない初心者の方のためにこの章ではHTMLとCSSの意味とそれらを使ってできることについて解説していきます。

 

初心者の方は焦らずにHTMLとCSSの意味をしっかりと理解しておくことで今後の学習の効率もよくなるのでしっかり理解しておきましょう。

 

【この章でわかること】

✔  HTMLの意味

✔  CSSの意味

✔  HTMLとCSSでできること

 

HTMLとは

 

まずはじめにHTMLの意味について解説です。

HTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、WEBページの骨組みに使われるものです。

 

WEBページを人間に例えるとHTMLは骨の部分です。

HTMLはタグというものを使ってWEBページの要素を書くことができます。

 

例えば<h1>という見出しタグを使うとこのように表示できます。

 

htmlで表示させたページ

 

こちらは以下のHTMLコードで表示されています。

 

index.html

<h1>初めてのHTML</h1>

 

次に<h2>、<h3>の見出しタグと<p>タグ、<a>タグを使って表示させてみます。

 

HTMLの複数要素を使って表示されたページ

 

コードは以下です。

 

index.html

<h1>初めてのHTML</h1>
<h2>ファーストステップ</h2>
<h3>表示させよう</h3>
<p>ここはpタグの中身です。<a href="#">コチラ</a>をクリックするとリンクが開けます</p>

 

なんだか味気ないWEBページに感じるかもしれませんが、すべてのWEBページのもとはこのような何も色がついておらず、要素だけが並んだHTMLでできています。

 

さきほどHTMLの意味について、人間でいうところの骨だと言った意味がわかったのではないでしょうか?

 

とりあえず今はWEBページの土台部分で味気ないものだなという認識でかまいません。

 

CSSとは

 

次にCSSの意味について解説です。

CSSは、Cascading Style Sheets(カスケーディング・スタイルシート)の略でHTMLで書かれた部分のデザインを担当します。

 

WEBページを人間に例えるとCSSは肉や目などの部分です。

さきほどHTMLが骨だということは話しましたよね。

CSSがあることで人間の見た目になっていくのです。

 

同様にWEBページではHTMLだけで書かれた味気ないページに色やフォントの強弱をつけることによって良い見た目にしてくれます。

 

CSSはHTMLの要素を指定してデザインをできます。

 

例えばさきほど作ったHTMLファイルの<h1>という見出しタグを指定して、赤字にしてみました。

 

CSSでタイトルを赤字にしたHTML

 

コードは以下です。

 

index.html

<h1 style="color: red;">初めてのHTML</h1>
<h2>ファーストステップ</h2>
<h3>表示させよう</h3>
<p>ここはpタグの中身です。<a href="#">コチラ</a>をクリックするとリンクが開けます</p>

 

「style="color: red;"」の部分でh1の文字を赤色にしています。

別にCSSファイルを用意して、読み込む方法が主流ですが今回はCSSの意味を解説することが目的なのでここでは解説しません。

 

次に、文字を真ん中に寄せてみます。またリンクの下線を消して太い文字にしてみます。

 

cssで文字を中央に寄せたHTMLファイル

 

まだまだシンプルではありますが最初より「WEBページっぽく」はなってきましたね。

 

コードは以下です。

index.html

 
<h1 style="color: red;text-align: center;">初めてのHTML</h1>
<h2 style="text-align: center;">ファーストステップ</h2>
<h3 style="text-align: center;">表示させよう</h3>
<p style="text-align: center;">ここはpタグの中身です。<a href="#"
style="text-decoration: none;font-weight: bold;">コチラ</a>をクリックするとリンクが開けます</p>

 

CSSを使えばHTMLを装飾して見た目を華やかにできることは理解していただけたかと思います。

 

他にもCSSでできることは以下のようなことがあります。

 

・ボックスの作成

・ボタンの作成

・要素の中央寄せ

・要素の左右寄せ

・背景色の変化

・横幅、縦幅指定

などなど多くのこと

 

HTML=土台

CSS=デザイン

 

という点についてはしっかり抑えておきましょう。

 

HTMLとCSSでできること

 

あなた
HTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?

 

HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。

・WEBページ制作

・仕事

 

HTMLとCSSでできること①WEBページ制作

 

さきほども実際にHTMLとCSSを書きましたがHTMLとCSSを使えばWEBページを制作することができます。

世の中のWEBページもこのHTMLとCSSですべてできていることがわかるとなんだかワクワクしてきませんか?

 

HTMLとCSSでできること②仕事にできる

 

HTMLとCSSができれば仕事としてそのスキルを生かせることもできます。

特にPCさえあればどこでも働けるので自由な働き方をしたい方にはオススメです。

 

ちなみにHTMLとCSS、その他のスキルを身につければ需要のある人材になれます。

その結果年収も大きく上げることができます。

 

少し先の話ですがあなたがHTMLとCSSのスキルを生かして2~3年実務経験を積めばフリーランスとして高い年収をもらうこともできます。

 

フリーランスエンジニアは平均年収が800万円以上もあります。

 

2020年7月時点でレバテックフリーランスが取り扱っているSE案件の平均月額単価は、約74万円です。これを単純に12ヶ月分に換算すると、フリーランスSEの平均年収は、約888万円というのが目安になります。

引用:レバテックキャリア

 

実際にHTMLとCSSのフリーランスエンジニアの案件にも月に60万円〜80万円もらえるものが普通にあります。

 

HTMLとCSSのフリーランス案件

 

【HTMLとCSSの意味】

・HTML=WEBページの土台

・CSS=HTML部分のデザイン

・HTMLとCSSが使えるようになるとWEB制作や仕事につなげることができる

 

今すぐHTMLとCSSの学習をスタートさせたいという方はコチラの記事を参考にしてみてください。

 

入門方法はコチラ

>>HTMLとCSSの入門方法【現役エンジニアの僕が解説】

初心者がすべきことについてはコチラ

>>HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

独学方法はコチラ

>>HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

 

コチラではHTML、CSSの学習にオススメのスクールをランキング化しています。

>>HTML/CSSを習得できるプログラミングスクールランキング

 

HTMLとCSSの意味を理解するのはファーストステップ

リモートワークする女性

 

あなた
HTMLとCSSの意味はどの程度理解しておくべきですか?理解したら次は何をしたらいいですか?

 

HTMLとCSSのスキルを身に着けたい方はHTMLとCSSの意味をどの程度理解すればOKなのか気になりますよね。

 

この章では現役エンジニアの僕がHTMLとCSSの意味を理解すべき程度とより深く理解するための方法について解説します。

 

【この章でわかること】

✔  HTMLとCSSの意味はどの程度理解しておけばいいのか

✔  HTMLとCSSの理解の仕方

 

最初は軽い認識でOK

 

HTMLとCSSの意味をどの程度理解すべきかについてですがぶっちゃけ軽い認識でOKです。

 

具体的にはこの記事のHTMLとCSSの意味についてエンジニアが解説の章で解説してあることを理解しておけばOKです。

 

周りの人に「HTMLとCSSって何?」と聞かれたときに概要を答えることができればOKですね。

 

使いながら意味を理解すること

 

HTMLとCSSの理解をもっと深めるための方法はとにかくHTMLとCSSを使うことです。

プログラミングの学習もそうですがHTMLとCSSは使った分だけスキルが伸びますし理解もできます。

 

ある程度意味を理解したらとにかく学習して使いこなすことを意識してみましょう。

学習方法については次の章で詳しく解説します。

 

HTMLとCSSのアウトプット方法についてはコチラの記事で詳しく解説しています。

>>僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

 

・HTMLとCSSの理解はある程度でOK

・スキルを習得するにはとにかくアウトプット

 

コチラではHTML、CSSの学習にオススメのスクールをランキング化しています。

>>HTML/CSSを習得できるプログラミングスクールランキング

 

HTMLとCSSの学習方法

勉強中 女性

 

あなた
HTMLとCSSのスキルをもっと身につけたいです!どうやって勉強したらいいですか?

 

HTMLとCSSの意味をある程度理解できたら次は学習を本格的にはじめましょう。

しかし初心者の方はどうやって学習を開始すればいいかわからなくて悩みますよね。

 

そんなあなたに向けてこの章ではHTMLとCSSの初心者の状態から学習を開始してエンジニアになった僕が具体的な学習方法を解説します。

 

【この章でわかること】

✔  HTMLとCSSの学習方法

 

書籍で学ぶ

 

HTMLとCSSの学習方法の1つ目は書籍で学ぶ方法です。

オススメの書籍はmanaさんの「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」です。

 

 

この本では以下を学べます。

・HTMLの基本

・CSSの基本

・HTMLとCSSを使ったWEBページの作成方法

 

ざっくり言えばHTMLとCSSについて全体的に学べます。

そしてこの参考書が初心者の方にオススメな理由は何よりもわかりやすいことです。

具体的には以下の通りです。

 

初心者の方にオススメポイント

・図が多い

・写真が多い

・親切

・書いている方がプロの方

 

僕自身もHTMLとCSSのスキルを身につけるにあたってはお世話になりました。

 

ネットの教材で学ぶ

 

HTMLとCSSの学習方法の2つ目はネットで学ぶ方法です。

コチラの場合は参考書を買う必要がないので今日にでもスタートできます。

 

ただしネットで学ぶ場合には注意点があります。

それは正しい情報かどうかわからないということです。

 

僕は現役エンジニアですが、中にはエンジニアでもWEB制作者でもない方が発信している情報もあります。

そのような情報を正しいと思い込んで学習すると初心者の状態から間違ったスキルを身に着けてしまうことになります。

このことは絶対避けてください。

 

このことを避けれるオススメの教材はテックアカデミーの無料教材です。

大手プログラミングスクールのテックアカデミーは自社アピールのためにプログラミングの無料教材を提供しています。

 

・大手で信頼できる

・現役エンジニアが講師のスクール

 

上記の点からも信用できます。

 

テックアカデミーの無料教材を手に入れる方法についてはこちらで公開しました。気になる方は参考にしてみてください。

>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

 

独学でも学べますか?

 

あなた
HTMLとCSSって独学できるんですか?

 

HTMLとCSSの意味を理解してこれから学習を開始させようとしている方の中にはHTMLとCSSを独学で学べるかが気になる方もいると思います。

 

結論から話すとHTMLとCSSの学習に関しては独学も可能です。

>>HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

 

ただし学習のスピードは落ちますのですぐにスキルを身に着けたい方はやはりスクールを選ぶべきでしょう。

>>HTML/CSSを習得できるプログラミングスクールランキング

 

また、将来的にエンジニアになりたい方はHTMLとCSSだけではエンジニアになるのは難しいので最初からスクールに通うべきです。

 

ちなみにエンジニアになるのには学歴は全く関係ありません。

>>年収の高い仕事をしたいならエンジニアがオススメ【学歴不要】

 

スキルがあればいい&人材が不足していることから高年収の仕事なのです。

もしあなたがHTMLとCSSのスキルを生かして年収を上げたいと思っているのならぜひエンジニアを目指してみましょう。

>>プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

【HTMLとCSSの学習方法】

・ 参考書を使う

・テックアカデミーの無料教材を利用する

。独学も可能だがスピードは落ちる

 

HTMLとCSSの勉強をはじめよう

スタートする男性

 

今回はHTMLとCSSの意味を実際に画面に表示させたりして解説しました。

いまこの画面を目の前にしているあなたはHTMLとCSSの学習をスタートさせるところかもしれません。偉いですね。

 

そんなあなたに伝えたいことは「ぜひ始めよう」ということです。

 

僕は完全未経験の状態からHTMLとCSSの学習を開始させてエンジニアになりました。

今は平均年収以上のお金をもらいながら好きな場所、好きな時間、好きな服装で自由にはたらいています。

 

あなたも学習をすればそのような生活を手に入れることができます。

 

はじめている方も多いです

 

実際に需要のあるスキルであるHTMLとCSSの学習をはじめている方は多いです。

 

働き方が自由・服装も自由・年収も高いといったメリットがあるエンジニアやその他WEB系の仕事を目指してHTMLとCSSの学習をはじめているかたもいます。

 

始めるのに難易度は高くはありませんので、気になったり学習を始めようと思っている方は今日始めてみましょう。

 

入門方法はコチラ

>>HTMLとCSSの入門方法【現役エンジニアの僕が解説】

初心者がすべきことについてはコチラ

>>HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

【テックアカデミーの無料教材を手に入れる方法についてはこちらで公開しました。】

>>テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

 

その他HTML/CSSに関する記事

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

 

続きを見る

2020年最新プログラミングスクール おすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【失敗しない】と書かれた画像
HTMLとCSSのオススメ教材を紹介【失敗しない】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコチラで詳し ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コースを受講す ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2020 All Rights Reserved.