新卒で自社開発企業にエンジニア就職

HTML/CSSとはなにかを1から解説してみた【勉強法も紹介】

ノロノロ

どうも、プログラミング学習にハマっているノロノロです。
HTML/CSSってなに?よくわからないから詳しく説明してくれ。

読者

という人に向けて記事を書きました。
記事の内容
・HTML/CSSとはなにかを1から解説してみた【勉強法も紹介】
今まさにプログラミング学習を始めようとしている人にとって「HTML/CSS」は謎の英語羅列にしか見えないと思います。

HTML/CSSは比較的簡単なのですが、かつての僕は全く理解してなかったですし、理解しないままコードを書いてました。

「HTMLとかCSSは簡単すぎる。理解できないのはちょっとあり得ない」みたいにいう人もいますが、僕は「え、難しいんだけど」と内心思ってましたね。

なので、今回は「HTML/CSS」はなにかを解説していきます。

・❶:HTML/CSSの簡単な説明
・❷:HTML/CSSはなぜ大事なのか
・❸:HTML/CSSでなにができるのか
・❹:HTML/CSSの勉強方法

上記の順番で解説していきます。あまり専門用語は使わずに説明していくので安心してください。




・❶:HTML/CSSの簡単な説明

HTMLとCSSを簡単に説明すると次のような感じになります。

・HTML→Web上にある文字や物体。
・CSS→HTMLのサイズ・色・形を変えるための言語
文字で説明するとこんな感じです。

ただ、文字だけではなんのことかよくわからないと思うので、視覚で理解してみましょう。


上の画像は僕が遊びで作ったマッチングアプリですが、形がボックスで色もついていて見やすいと思います(多分)。

文字は「HTML」で作られていて、「CSS」で黄色い枠や長方形が作られています。「身長」とか「職種」の横並びには「display:flex;」というCSSが使われています。

こう見るとHTML/CSSの重要性がわかってきますよね。これらの言語がないとこういったサービスは作れないんですよ。

そして、もう1つ例を出します。


※上のパンくずはrenderで呼び出しているため正常にCSSがかかっています

上の画像はさっきと同じものです。違いは「CSSが書かれているかどうか」なんですよ。

CSSがないともはやなんのサービスかわかりませんよね。ただの文字が並んでいるだけです。

ノロノロ

質素すぎる。。

全てのサービスやアプリケーションでHTMLとCSSは使われていて、これらの言語がなくなればWeb上に表示されるものは全て消えます。

それくらい重要な言語なんですよね。

・❷:HTML/CSSはなぜ大事なのか

ここまで読んだ方は、HTML/CSSがなぜ重要かはわかると思います。

・①:HTML/CSSがないとサービス・アプリケーションを作ることができない
・②:バック側の言語勉強するときもHTMLとCSSの知識は必要になってくる
②は特に大事ですね。

例えばですが、仮に自分が「Ruby」という言語と「Ruby on Rails」というフレームワークを使ってアプリケーションを作るとします。

このときにバック側の知識だけではなく、HTML/CSSの知識も必要になってくるんですよ。


これは僕がRubyという言語で書いたコードですが、HTMLの記述もがっつりされています。

こんな感じで、Rubyだけ勉強していても「HTML」や「CSS」の知識がないとアプリ開発はできないんですよね。

ポートフォリオを作るときも、自分で運用するサービスを作るときも、HTML/CSSの知識は必須です。

・❸:HTML/CSSでなにができるのか

HTMLとCSSがあれば、静的なサイトを作ることができます。動的なサイトは難しいですね。

・静的なサイト:デザインはされてあるけど、動きが全くないサイト
・動的なサイト:投稿、予約、検索、レビュー等ができるサイト
おそらく、完全な静的サイトを見つけるのはかなり難しいと思います。

動きがないとサービスの質として低いですし、なにより需要を生み出すことが難しいからですね。

ただ、プログラミングを学習するために「静的なサイト」を作るのはいいことだと思います。

自分で一からコードを書く作業というのは、プログラミングスキルを伸ばしていく上でかなり有効な手段ですからね。

僕自身HTML/CSSの理解が全くなかったときは、無理やりコードを書いて感覚的に理解していきました。

・❹:HTML/CSSの勉強方法

結論、Progateで勉強しましょう。


上記のHTML/CSSコースを3周程度してみてください。それくらいすると、HTML/CSSがどういう役割をしてくれるかがわかると思いますよ。

最初は多少の躓きはあるかもしれませんが、コードを書いていれば慣れてくるのでまずは耐えるのがいいですね。

HTMl/CSSがあらゆる言語の中で簡単とはいえ、初学者からすれば難しいのは事実ですから。
そして、Progateが終わったらHTML/CSSをさらに深掘るのではなく、バック側の言語を勉強していきましょう。
・①:PHP
・②:Ruby
・③:Python
・④:Golang
・⑤:Java
個人的にはRubyがわかりやすくておすすめですが、自分の興味がある言語があるならそれを勉強してみてください。

サービスに機能をつけるためには上記のような言語を勉強するのは必須なので、段階を上げて勉強していきましょう。




・HTML/CSSを勉強してプログラミング基礎スキルを身につけましょう

HTML/CSSはプログラミングの入り口と言っても過言ではないです。

C#とかから入る猛者も結構いるんですが、プログラミングがよっぽど好きじゃないと挫折します。

なので、まずはHTML/CSSから始めてプログラミングの楽しさを感じてみてください。

Progateなら挫折することはないと思いますよ。

ノロノロ

この記事が参考になったら嬉しいね。
40代未経験者でも受講・自走可能なプログラミングスクールを紹介 20代後半のエンジニア転職で失敗しにくい「3つ」のポイントを紹介 【2週目】テックキャンプ (エンジニア転職)の記録 【精神崩壊】 【3週目】テックキャンプ (エンジニア転職)の記録 【楽しい】 【4週目】テックキャンプ (エンジニア転職)の記録 【ワクワク】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA