第2回 HTMLとCSSってなに? 

元気100倍( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ

普段は医療職で働きながら、趣味でプログラミングを始めたズダです!

今回のテーマはウェブページを作るために使われるプログラミング言語、「HTML」と「CSS」についてです。細かいことはさておき、なんとなく理解してもらえばOKです!

  • HTMLって何?
    ⇨骨格
  • CSSって何?
    ⇨肉付け
  • 結局何するの?
    ⇨HTMLで文章を作って、CSSでオシャレに編集する

HTMLって何?

HTMLとは、「Hyper Text Markup Language」の略で、ウェブページの基本的な構造を作るための言語です。「Hyper Text」はクリックすると他のページに飛べるようなテキストのことです。「Markup Language」は、特定の記号やコードを使って文書の構造を示す言語のことを意味します。(ムズい・・笑)

ざっくりいうと、HTMLはウェブページの「骨格」を作ります。例えば、「ここに見出しがあって、その下に段落がある」とか、「ここに画像がある」という指示をHTMLで書きます。

では、どうやってHTMLを書くのでしょうか?それは、「タグ(< >)」と呼ばれる特殊な記号を使います。例えば、「<h1>」というタグは、大きな見出しを作ります。「<p>」というタグは、新しい段落を作ります。タグは大体、「<タグ名>」の形で始まり、「</タグ名>」の形で終わります。これらのタグを使って、ウェブページの構造を作ります。(↓こんな感じ)

<html>
  <head>
    <title>私の初めてのウェブページ</title>
  </head>
  <body>
    <h1>こんにちは、世界!</h1>
    <p>これは私の初めてのウェブページです。</p>
  </body>
</html>

このコードは、こんなウェブページを作ります。

<title>タグでページのタイトルを設定(www.の所に記載されます)、<h1>タグで大見出し、<p>タグで段落を作ります。これがHTMLの基本的な骨格です。

でもこれじゃシンプルすぎて味気ないですよね・・こんな時はCSSを使ってリッチなサイトにします。

CSSって何?

CSSとは、「Cascading Style Sheets」の略で、ウェブページのデザインや見た目を整えるための言語です。HTMLがウェブページの「骨格」を作るのに対して、CSSはその「皮膚」や「服装」を作ると思ってください。

HTML単体とHTML&CSSでは上記写真の骨と人くらい変わってきます笑。CSSでは、「色は何色にする?」、「文字はどのくらいの大きさにする?」、「画像はどこに配置する?」といった指示を書きます。これらの指示は、「セレクタ」(どこの骨に対して)「プロパティ」(どんな肉付けをする)を使って書きます。例えば、すべての「<h1>」タグに対して、文字色を赤にしたい場合、CSSでは以下のように書きます。

h1 {
    color: red;
}

ここで、「h1」がセレクタ、「color: red;」がプロパティになります。このコードを入れると、さっきのサイトがこんな感じで変わります。

HTMLとCSSを一緒に使うことで、ウェブページは形と色を持つことができます。例えば、HTMLを使って文章の構造を作り、CSSを使ってその文章をきれいに色付けしたり、大きさを変えたりすることができます。このように、HTMLとCSSは、一緒に使うことでウェブページを作る上で非常に重要な役割を果たします。

結局何するの?

それぞれの役割を理解するために、人間の体に例えてみました。HTMLは骨格、つまり、体の基本的な形を作ります。一方、CSSは皮膚や服装、つまり、見た目やスタイルを決めます。まぁシンプルに言うとHTML=文章、CSS=装飾です。HTMLだけだとシンプルすぎてつまらないし、CSSはHTMLがなければ装飾できないです。

最初は難しく感じるかもしれませんが、HTML&CSSを少しずつ学んでいけば、自分だけのウェブページを作ることができるようになります。コンピューターは、あなたが書いた指示を正確に実行します。だから、少しでも間違えると、思った通りに動かないこともあります。でも、それもプログラミングの楽しみの一部です。間違えることで学び、それを修正していくことで、上手になっていきます。そして今は「ChatGPT」が的確にアシストしてくれます!自分で書けなくても、ChatGPTが書いたことがなんとなく理解出来ればOKです!!

これがHTMLとCSSの基本的な概要です。次回は、もっと具体的にHTMLとCSSのコードをみていきましょう!

楽しみにしていてくださいね!バイバイキーン!( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ  

コメント

タイトルとURLをコピーしました