マークアップ言語HTML/CSS入門前の前提知識【初心者向け】

プログラミング

マークアップ言語HTML/CSS入門前の前提知識【初心者向け】

悩める人
【今回のお悩み】
プログラミング学習する前に「HTML/CSS」について幅広い情報を知りたい。
【本記事で解決】
マークアップ言語の説明、メリットやデメリットまで総合的な情報をまとめたぞ。
うぬぼれ

 

<この記事を書いた人>
✔︎文系からエンジニア職
✔︎IT知識ゼロからIT企業に入社
✔︎現在はマネジメント業務も兼任
 (周囲に中途含みエンジニア多数)

 

本記事の内容

  • HTML/CSSの立ち位置
  • HTML/CSSのメリット、デメリット
  • HTML/CSSの効率的な学習方法はコレ

 

それでは内容に入っていこう。
>>就職を後悔している20代、30代向けプログラミングスクール【最新版ランキング】

 

入門前の前提知識【初心者向け】
①HTML/CSSの立ち位置

入門前の前提知識【初心者向け】
①HTML/CSSの立ち位置

ネット世界に必須なマークアップ言語

・HTMLはマークアップ言語
・webページはHTMLで作られている
・CSSでHTML装飾を行う事ができる

 

HTMLはマークアップ言語

HTMLはマークアップ言語と呼ばれる。プログラミング言語と分けて表現される場合が多いので認識しておこう。

 

言語区分 概要
プログラミング言語 python
ruby
など
コンピュータプログラムを記述
マークアップ言語 HTML 視覚表現や文章構造などを記述
スタイルシート言語 CSS 構造化文書の見た目を記述

 

 

webページはHTMLで作られている

ネットで表示される各webページはHTMLで作られている。ちなみにHTMLはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略。

 

この記事もHTMLによって記述された結果、表示できているのだ。
うぬぼれ

 

<HTML記述例>

<ul>
<li>HTMLで</li>
<li>リスト項目を</li>
<li>記述しています</li>
</ul>

<表示結果>

  • HTMLで
  • リスト項目を
  • 記述しています

 

ちなみに今この場で「(HTML)ソース表示」できるので覚えておこう。

種類 ソース表示ショートカット
Mac option + command + U
Windows command + U

 

 

CSSでHTML装飾を行う事ができる

HTMLにCSSを合わせて「HTML/CSS」と呼ばれる事が多い。HTMLと紐付けを行いCSSでテキスト装飾が可能になる。

 

【CSSとは】
Webページの要素の配置や見栄えなどを記述するための言語。
うぬぼれ

 

CSSを用いれば一瞬で「文字色変更」も可能。

・HTMLで
・リスト項目を
・記述しています

 

入門前の前提知識【初心者向け】
②HTML/CSSのメリット、デメリット

入門前の前提知識【初心者向け】
②HTML/CSSのメリット、デメリット

習得しやすくLP案件で稼げる見込みあり

・初学者でも独学しやすい
・副業の需要も高い(LPなど)
・他スキルとの掛け合わせが必要

 

初学者でも独学しやすい

HTML/CSSは他プログラミング言語と比べて、圧倒的に初学者向きの言語である。

 

・コードがシンプル
・LP(ランディングページ)が作れる
・開発途中でも出力結果が確認できる

 

 

webサービスを開発したい人は土台となる「HTML/CSS」を学習しておこう。
うぬぼれ

 

副業の需要も高い(LPなど)

ランサーズ(日本最大級のクラウドソーシング仕事依頼サイト)

 

HTML/CSSはwebサービス開発の土台の位置付けであるが、ランサーズなどでLP制作案件を受注すれば稼ぐ事ができる。

 

【ランディングページ(LP)とは】
サイト訪問者が最初にアクセスするページ。「特定の商品を売りたい」「LINE@に登録させたい」など特定の行動に誘導するための役割が多い。

 

ランディングページ(LP)はざっくり言うと「チラシ(フライヤー)」のイメージ。
うぬぼれ

 

他スキルとの掛け合わせが必要

初学者向きと言う事もあり多くの人が学習している。裏を返せば、HTML/CSSはそれ単体だけではスキルとしては少し弱いかもしれない。

 

<HTML/CSSに掛け合わせるスキル>
・デザインスキル(色彩や構成など含め)
・ライティングスキル(文章術など)
・他プログラミング言語(JSなど)

 

オンライン学習サイトやプログラミングスクールだとjava script(ジャバ スクリプト)という言語とセットで教えてくれるぞ。
うぬぼれ

※java script(通称:JS)…HTML/CSSで作成したWebページが「どのようにふるまうか」を命令できるプログラム言語。

 

入門前の前提知識【初心者向け】
③HTML/CSSの効率的な学習方法はコレ

入門前の前提知識【初心者向け】
③HTML/CSSの効率的な学習方法はコレ

独学OK。他スキルと掛け合わせよう

・書籍
・オンライン学習サイト
・プログラミングスクール

 

書籍

 

「とにかく早くwebサイトを作ってみたい」と言う人向けの一冊。高評価レビューも多いため安心して読み進める事ができる。

 

また、プログラミング初学者であったりIT知識0の人でも読み進める事ができるほど内容が噛み砕かれている。

 

いきなり分厚い専門書や辞典サイズのものを購入する必要なし。手元に良書一冊置いて繰り返していくのが近道だ。
うぬぼれ

 

オンライン学習サイト

progate(プロゲート)

「手っ取り早くHTML/CSSの挙動を見たい」「イメージを掴みたい」と言う人はprogate(プロゲート)がおすすめだ。

 

ただし、あくまでも初学者向けの入門サイト。副業やフリーランスを目指しているのであれば次の一手を考えよう。
>>エンジニア志望がprogate(プロゲート)を行うデメリット【激白注意】

 

無料コースならば最短一日で体験し終える事ができる。
うぬぼれ

 

プログラミングスクール

Code CampのWebマスターコース

転職や副業まで通用させるスキルを身に付けたい人はプログラミングスクールを知っておこう。HTML/CSSだけでなくjava scriptについても教えてくれる。

 

習得しやすい言語とはいえ挫折者が0な訳ではない。また、カリキュラムに沿って体系的に学ぶ事で独学勢に圧倒的な差をつける事ができる。
>>Code Camp(コードキャンプ)を徹底調査【現役エンジニアが解説】

 

いきなり入塾を決めず、体験レッスンを受けてから考えてみよう。
うぬぼれ

 

入門前の前提知識【初心者向け】
HTML/CSSまとめ

入門前の前提知識【初心者向け】
HTML/CSSまとめ

本記事のまとめ

  • HTML/CSSの立ち位置
    →ネット世界に必須なマークアップ言語
  • HTML/CSSのメリット、デメリット
    →習得しやすくLP案件で稼げる見込みあり
  • HTML/CSSの効率的な学習方法はコレ
    →独学OK。他スキルと掛け合わせよう

>>就職を後悔している20代、30代向けプログラミングスクール【最新版ランキング】

 

  • この記事を書いた人

うぬぼれ(管理人)

都内在住の29歳。大手IT企業にてデータ分析者として勤務中。ブログ内では副業解禁に先駆け2,30代サラリーマン向けに有益な情報を発信中。半年でフォロワー6000&1ヶ月でnote200部超えた実績あり。ちなみにMARCHの文系出身。

-プログラミング
-

Copyright© うぬぼれblog , 2020 All Rights Reserved.