ProgateでHTML&CSSを勉強してみた①<HTML・段落・見出し>

こんにちは。Kazu(@bs_0318)です!

今回から、私がProgateで学んだ内容を発信していきたいと思います。

前回の記事でもお話ししましたが、
私は現在、オンラインプログラミング学習サービス❝Progate❞で勉強をしています。
学んだ内容をアプトプットして定着させるため、これからプログラミングを勉強しようとしている皆さんのために書いていきたいと思います。

今回はHTML&CSSの初級編で学んだ内容を書いていきます。

HTMLとは

そもそも「HTMLが何なのか」というお話ですが、

HTML・・・Webページを作るための、最も基本的なマークアップ言語。CSSと組み合わせることで、Webページを作ることができる。

例えば、Progateの以下のようなページがありますが、このようなページを作ることができます。

このページは以下のようにHTMLを書き込むことで作られています。

 

ものすごい文字列ですよね…
最初は圧倒されるかもしれませんが、Progateで学んでいけば、しっかりと理解することができます。

かなりざっくりですが、HTMLとは、このようなものです。
HTMLは、ある言葉の略なんですが、そこまで覚える必要はないと思うので、HTMLで何が作れるのか」だけは、知っておいてください。

 

HTMLの仕組み

HTMLは、「テキスト」「タグ」という印をつけることで、初めて意味を成します。
例えば以下のような文字列を打ちます。

<h1>Hello World</h1>

 

そうすると、このように表示されます。

Hello worldという「テキスト」を<h1> </h1>のタグで囲むことで、文字が表示される仕組みです。

また、<h1>を開始タグ、</h1>を終了タグといいます。終了タグには「/(スラッシュ)」が付きます。
「/」は忘れがちになので、しっかりと覚えておきましょう。

<h1>のhはheadingの略で、見出しを書く際に使います。<h1>が最も大きい見出しで、<h6>が小さい見出しです。

どうですか?簡単ですよね?
「タグ」は他にも種類がありますが、基本的な仕組みは同じなので、難しくはありません。

 

段落のつけかた

さて、見出しのつけかたはわかりましたね?

次は、段落のつけかたについてです。

見出しの「タグ」は、<h1> </h1>でしたが、
段落は、<p> </p>を使います。
<p>のpはparagraphの略です。<h>もそうでしたが、「タグ」は英語の頭文字を取る場合が多いので、覚えやすいと思います。

では、実際に使ってみます。以下のように打ってみました。

<h2>Progateとは</h2>
<p>オンラインプログラミング学習サービスです。</p>

 

この場合、以下のように表示されます。

 

 

どうですか?<h1>と同じ仕組みなので、理解しやすいですよね。

 

まとめ

いかがでしたでしょうか。

「プログラミングって難しそう・・・」
「覚えられる気がしない・・・」

そう思っていた人も、「案外簡単かも!?」と感じたのではないでしょうか。

今回はHTMLの触りだけを説明しましたが、次回からは

  • 画像を表示するためには
  • リンクを貼るには
  • リストを作成するには

など、今回より少し実践的なことを書いていきたいと思います。

今回の記事をご覧になってプログラミングに少しでも興味を持たれた方は、ぜひ次回もご覧ください。

最後までご覧いただき、ありがとうございました。

 

コメントを残す

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