2020-08-24

【解説です】HTML は本体。CSS は装飾。簡単にイメージすると理解できる。

CSS,HTML,プログラミング

daiki

こんにちは、daiki です。

今回は、HTML は本体であり、CSS は装飾というイメージをすれば分かりやすいですよ。
と言った内容をお話しします。

HTML & CSS の基礎を復習しながらアウトプットします。
そのついでに誰かの役に立てればと思っています。

僕がプログラミングを学んだサービスは Progate です。
そちらを参考にしながら解説します。

早速ですが結論。

HTML は本体。CSS は装飾。

こちらを深堀解説😌

HTML & CSS を簡単にイメージして理解しよう


HTML & CSS は難しくありません。
むしろ簡単です。

難しいと思っている人は、HTML & CSS という言葉だけ知っていて、イメージができていないんです

なので、ここを解決しましょう。

HTML は本体

HTML を簡単に言えば、本体ですね。
というより、本文と言った方が伝わりやすいかな。

web ページに載っている文章や色付けなどは HTML で書いた本文に CSS で装飾することによって表示されている。

こちらを理解していきましょう。
まずは HTML 。

<h1>daikiblog</h1>
<p>こんにちは daiki です</p>

上が実際に書いた HTML 。
これを表示させてみます。

※ Progate から引用しています。以下略

h1 と p タグに囲まれた文字が表示されていますね。
これが HTML 。

タグに囲まれたものを表示させる。
といった解釈でOK。

指定のタグは色々あるので、調べてみてください。
参考までにこちらもどうぞ↓

HTML & CSS の基礎を解説。見出し、段落、リンク、画像、リスト作成まで。

CSS は装飾

次は CSS です。
CSS は HTML に装飾を加えるもの

文字の色や形、背景などを加えることができます。
実際に見てみましょう。

<h1>daikiblog</h1>
<p>こんにちは daiki です</p>

上の HTML に CSS を追加します↓

h1 {
	color: red;
}
p {
	color: blue;
}

h1 タグを赤色、p タグを青色、という意味です。
こちらを表示。

HTML で書いた文字が CSS で装飾されていますね。
これが CSS の用途です。

他にもいろいろできるので調べてみてください。
僕の記事でも解説しています↓

【HTML & CSS の解説】文字の色、大きさ、種類、高さ、幅、背景の色、タグに名前を付ける。

こんなものが作れます

HTML & CSS を学ぶと、自分で web ページを編集できるので楽しいですよ。
どんなものが出来るか見てみましょう。

まずは HTML ですね。

これは一部です。
こんな感じのを5枚分ぐらい書きますね。

そして CSS で装飾する。
すると下のようなものができます。




本格的に web ページが出来上がっていますね。
こういったものを作るためには HTML & CSS が必要というわけです。

まだまだいろんなことができますので、実際に学んでみてください😌

初心者の方がプログラミングを学ぶなら Progate はおすすめのサービスですよ。

プログラミングは簡単


HTML & CSS については解説したので、すこし雑談します。
「もう理解したのでいいよ」という方はスルーしてもらっても大丈夫です。

話をするのはプログラミングは簡単ですよ。
と言った内容。

底辺高卒の僕でもできた

僕は偏差値30程度の高校を卒業しています。
大学には行っていません。

そんな僕でも Progate でプログラミングを学んだら、HTML & CSS 、JavaScript 、SQL が書けるようになりました。

しかも2カ月ほどで。

Progate の宣伝みたいになってしまうんですけど、それだけいいものだと思っています。

別にお金とか頂いているわけではないですよ。

単純に良いサービスなので。

「プログラミングを学びたい」という人は多いですが、「自分にできるかな?」という不安を抱えている人が多いですよね。

そんな方の勇気になればと思って、僕の経歴を書きました。

例え大学に通っていなくてもできますし、むしろ偏差値30以下でもできる。

そう思えば、ハードルが低くなるんじゃないかと。

繰り返しやるだけ

ただ根気は必要ですね。
何度も繰り返しやる必要はあります

プログラミングは慣れてしまえば簡単なんですけど、それまでが大変なんです。
何でもそうですけどね。

特に初めてコードを見たときは、「何この暗号、、、。」と思ったのを覚えています。

それでも毎日2時間以上、繰り返し復習することで徐々に慣れました。
今では、何が間違っているのかすぐに発見できるレベル。

こうなれたのも、諦めずに何度も復習を積み重ねたからです。
これとしか言えないですね。

未来を見ましょう

僕は自分の未来のためにプログラミングを学んでいます。
このままではいけないと思ったので。

今はパート社員なんです。
時給制の。

1時間1050円で雇われて、5時間労働を週5日。
以前までは一日10時間以上働いていました。

いくら働いても時給は変わらず、上がっても数十円ていど。
ここで頑張る必要があるのか、、、。

未来は変わらない」そう思ったんです。

だから僕はプログラミングを学んでいます。
他にも理由はありますけどね。

何よりもプログラミングは自分の未来を変えるためのものだと僕は思っています。
その可能性にかけて、日々精進するのみ。

ちょっと、カッコつけました🙇
では。