【画像付き】HTMLってなに?CSSってなに?意味と違いを分かりやすく説明します!

HTML&CSS

よっす!へこすです!

ぼく最近、趣味でHTMLCSSの勉強をしておりまして、学んだことをこのブログで
分かりやすく丁寧にアウトプットしていこうかなと思っております。

この記事ではHTMLとCSSについての説明ですが、次回からはそれぞれの書き方やタグの使い方などを説明していきます!

「HTML?CSS?(゜o゜)ナンジャソラ」って方にも分かりやすい説明を心がけていきます。

  • HTMLやCSSについてこれから勉強を始めようと思っている方
  • HTMLやCSSに少しでも興味がある方
    ぼくと一緒に学んでいきましょう!!

 

HTMLとは?

HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略で、

ウェブページを作成するために開発された言語のことです。

ウェブページを作るには、ただ文字を打ち込めばいいわけではないのです。HTMLという言語を使って書かないと読み込んでくれません。

インターネット上で公開されているウェブページのほとんどはこのHTMLで作成されています。

ぼくのブログもHTMLが使われています。

この言語を使って作られたHTMLファイルにはウェブページに表示される文章や関連ファイルの情報が書き込まれており、

Google ChromeやInternet Explorerなどのブラウザで開くと文章と一緒に画像などが埋め込まれた状態で表示されます。

この記事も、画像や文章が表示されていますよね?HTMLファイルの中にそれらの情報が書き込まれているのです。

HTMLはこんなモノ

では具体的にHTMLはどのようなモノなのかといいますと、、、

このようなものです↓

PCにもともと入っているアプリケーションの「メモ帳」を使って

このようにHTMLファイルを作ることができます。

<○○></○○>で文章を囲んで、その囲んだ文章に役割をもたせます。

例えば、

<title>で囲んだ文章はページのタイトルになります。

<h1>で囲んだ文章は大見出しになります。

さて、このHTMLファイルをGoogle Chromeで表示させてみましょう。

どうですか?

<title>で囲まれた文章はページタイトルに、

<h1>で囲まれた文章は大見出しになってますよね?

これがHTMLです。

他にも<p><ul>などたくさんありますが、

それぞれの説明はこれからどんどん発信していきますね!

実際HTMLを理解していなくても問題はない

ちなみにぼくのこのブログもHTMLで作成されていると言いましたが、

ぼくはこのHTMLを全て理解しているわけではありません。

というのも、文字を書くだけで自動的にHTMLとして反映してくれるブログサービスがあるからです。

大見出しを作りたければ、大見出しを作るボタンを押せば作れるし、

文字を太くしたければ太くするボタンを押せば簡単に太くすることができます。

だからHTMLを理解せずともブログを作成することができます。

しかし、自動的に反映してくれると言っても完全ではなく、

改行する際にずれたり関係の無いところがに太字になったりといった不具合が発生します。

それを防止するためにはHTMLを少しは理解する必要があります。あと、知ってたらカッコいい笑

だから、HTMLについてお勉強するっていいよね!って話!

CSSとは?

Cascading Style Sheets(カスケーディングスタイルシート)の略で、

ウェブページのスタイルを指定する言語のことです。

”スタイルを指定する”とは色・サイズ・レイアウトなどの表示スタイルなどのことです。

ここの文字は赤色、サイズは大きめ、というように指定したければCSSを使います。

簡単に言えば、HTMLは文章構造を作成するものであるのに対し、CSSは見た目を作成するもの

って感じですね!

CSSはこんなモノ

CSSとは具体的にこんなモノです

HTML同様に、メモ帳を使ってCSSファイルを作成することができます。

○○{~}という形をとり、○○には指定する部分を、{~}には指定する内容を記述します。

上の例では、h1(大見出し)の色を赤に、文字の大きさを250%に指定しています。

このCSSファイルをGoogle Chromeで表示させてみます。

h1の色は赤色に、文字の大きさは大きくなっていますね?

これがCSSです。

他にも、ウェブページに枠線をつけたり、ボタンに影をつけたり、写真の角を丸めたりと色々なことができます。

勉強を進めて、これからどんどん発信していきますね!

 

まとめ

HTMLとCSSについて理解できましたでしょうか?

興味をもってもらえたらなお幸いです!

ぼくはこの2つを少しずつ勉強をして、分かりやすくアウトプットしていこうと思っているので、
是非参考にしてください!

一緒にマスターしていきましょ!!

 

それでは!!

 

超初心者向けHTML講座その1:HTMLの基本タグとその書き方