プログラミング学習する前に「HTML/CSS」について幅広い情報を知りたい。
マークアップ言語の説明、メリットやデメリットまで総合的な情報をまとめたぞ。
✔︎文系からエンジニア職
✔︎IT知識ゼロからIT企業に入社
✔︎現在はマネジメント業務も兼任
(周囲に中途含みエンジニア多数)
本記事の内容
- HTML/CSSの立ち位置
- HTML/CSSのメリット、デメリット
- HTML/CSSの効率的な学習方法はコレ
それでは内容に入っていこう。
>>就職を後悔している20代、30代向けプログラミングスクール【最新版ランキング】
入門前の前提知識【初心者向け】
①HTML/CSSの立ち位置
ネット世界に必須なマークアップ言語
・webページはHTMLで作られている
・CSSでHTML装飾を行う事ができる
HTMLはマークアップ言語
HTMLはマークアップ言語と呼ばれる。プログラミング言語と分けて表現される場合が多いので認識しておこう。
| 言語区分 | 例 | 概要 |
| プログラミング言語 | ・python ・ruby など |
コンピュータプログラムを記述 |
| マークアップ言語 | HTML | 視覚表現や文章構造などを記述 |
| スタイルシート言語 | CSS | 構造化文書の見た目を記述 |
webページはHTMLで作られている
ネットで表示される各webページはHTMLで作られている。ちなみにHTMLはHyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略。
<HTML記述例>
<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でテキスト装飾が可能になる。
Webページの要素の配置や見栄えなどを記述するための言語。
CSSを用いれば一瞬で「文字色変更」も可能。
・リスト項目を
・記述しています
入門前の前提知識【初心者向け】
②HTML/CSSのメリット、デメリット
習得しやすくLP案件で稼げる見込みあり
・副業の需要も高い(LPなど)
・他スキルとの掛け合わせが必要
初学者でも独学しやすい
HTML/CSSは他プログラミング言語と比べて、圧倒的に初学者向きの言語である。
・LP(ランディングページ)が作れる
・開発途中でも出力結果が確認できる
初めてのプログラミング
— Ruu (@RuXr_) May 18, 2020
1番簡単なHTMLを学んで、書くこと思いつかなかったのでテキストの文字うつしてみました。
楽しかったことは沢山あって、少しずつ理解できていってる時の感覚が最高です
辛かったことは、腰が痛かった。それだけです。
次はCSSでこれをデザインする作業です。 pic.twitter.com/LcpTZyvdT0
PHPとかの言語で挫折しそうな人は、１回HTML/CSSに戻るのもありだと思います🤔
— セイタ@ブログ廃人 (@seita_blog) August 4, 2019
ログイン機能を作ろうとしても、会員登録ページがHTML/CSSで作れないとイメージが出来ずに、コーディング段階で億劫になってしまうから(体験談)。
一定数同じ境遇の人がいると思うので、参考に🙌#プログラミング
副業の需要も高い(LPなど)
HTML/CSSはwebサービス開発の土台の位置付けであるが、ランサーズなどでLP制作案件を受注すれば稼ぐ事ができる。
サイト訪問者が最初にアクセスするページ。「特定の商品を売りたい」「LINE@に登録させたい」など特定の行動に誘導するための役割が多い。
他スキルとの掛け合わせが必要
初学者向きと言う事もあり多くの人が学習している。裏を返せば、HTML/CSSはそれ単体だけではスキルとしては少し弱いかもしれない。
・デザインスキル(色彩や構成など含め)
・ライティングスキル(文章術など)
・他プログラミング言語(JSなど)
※java script(通称:JS)…HTML/CSSで作成したWebページが「どのようにふるまうか」を命令できるプログラム言語。
入門前の前提知識【初心者向け】
③HTML/CSSの効率的な学習方法はコレ
独学OK。他スキルと掛け合わせよう
・オンライン学習サイト
・プログラミングスクール
書籍
「とにかく早くwebサイトを作ってみたい」と言う人向けの一冊。高評価レビューも多いため安心して読み進める事ができる。
また、プログラミング初学者であったりIT知識0の人でも読み進める事ができるほど内容が噛み砕かれている。
オンライン学習サイト
「手っ取り早くHTML/CSSの挙動を見たい」「イメージを掴みたい」と言う人はprogate(プロゲート)がおすすめだ。
ただし、あくまでも初学者向けの入門サイト。副業やフリーランスを目指しているのであれば次の一手を考えよう。
>>エンジニア志望がprogate(プロゲート)を行うデメリット【激白注意】
プログラミングスクール
転職や副業まで通用させるスキルを身に付けたい人はプログラミングスクールを知っておこう。HTML/CSSだけでなくjava scriptについても教えてくれる。
習得しやすい言語とはいえ挫折者が0な訳ではない。また、カリキュラムに沿って体系的に学ぶ事で独学勢に圧倒的な差をつける事ができる。
>>Code Camp(コードキャンプ)を徹底調査【現役エンジニアが解説】
入門前の前提知識【初心者向け】
HTML/CSSまとめ
本記事のまとめ
- HTML/CSSの立ち位置
→ネット世界に必須なマークアップ言語 - HTML/CSSのメリット、デメリット
→習得しやすくLP案件で稼げる見込みあり - HTML/CSSの効率的な学習方法はコレ
→独学OK。他スキルと掛け合わせよう
>>就職を後悔している20代、30代向けプログラミングスクール【最新版ランキング】
