HTML&CSS プログラミング

【HTML&CSS】のh1〜h6タグで見出しをつける事ができる

投稿日:

こんにちは新札幌周辺情報です。今回から早速「Progate」でプログラミングの勉強を開始していきたいと思います。何のプログラミング言語からやっていこうか迷った挙句HTML&CSSから始めていこうと思います。ちなみにHTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)、CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略だそうです。略しても略さなくてもピンときません。

Progateの解説はスライド画像つきで見やすい

上の写真は実際の説明画面です。スライド形式になっていてみやすいです。このスライド画像を見た後で実際に問題に取り組むようになっています。

これが実際にコードを入力していく画面です。画面左側にある手順の指示に従って入力していきます。正しく入力できると右側にあるプレビューが見本と同じようになります。

h1タグで見出しをつけてみる

h1タグを使う事で文字を大きくして、見出しに使う事ができるようです。このへんは著者にもなんとかわかります。実際にブログを書いていると見出しをつけていく事がたくさんあるので、このタグの意味は理解できます。

ただ著者が使っているブログサービスは素人でも使いやすいようになっているので、<h1></h1>とわざわざ入力しなくても見出しのボタン一つでできちゃいます。

因みに<h1>Hello World</h1>とか書かれている背景が黒い部分をテキストエディタと呼ぶらしいです。この部分に色々書き込んでいくと右上のプレビューのところに反映されるらしいです。

スポンサーリンク

一文字でも間違えたらプログラムが機能してくれない

一文字でも間違えてるとちゃんと機能してくれないんですね。

例えば上の写真で2行目の<h1>プログラミングの世界へようこそ<h1>と入力した部分が間違っていたみたいです。

最初どこが間違っているのか発見できず、困惑して2、3分にらめっこしてようやく発見できました。

この<h1>タグは最後</h1>としないといけないみたいで、/が抜けていただけでプログラムが実行されないらしいです。ちょっとはオマケしてくれてもいいような気もしますが、これがプログラミングというものなのですね。

もしかして、実際のプログラミングは何百行も入力した言語の間違いを探さなければいけないケースもあるのでしょうか?

覚えたことのまとめ

<h1></h1>(headingの略で見出しの意味)は<h1>〜<h6>まであって1が一番大きく、6が一番小さい見出しになっている。重要度によって使い分ける。

そのほかに、<p>(paragraphの略で段落の意味)があり、普通の文章を書くときに使う。このタグを使うと段落がかわる。

まだ始めたばかりで全然身になっていませんが、とりあえずこの2種類を覚えました。

スポンサーリンク

-HTML&CSS, プログラミング

Copyright© 新札幌周辺情報 , 2020 All Rights Reserved Powered by STINGER.