HTML入門講座|見出しと強調ついて学ぼう

HTML
うさタブ
うさタブ

今回は見出しの付け方や文章を強調するやり方について学ぶッピよ~

ユウキ
ユウキ

見出し

うさタブ
うさタブ

文章やコンテンツのタイトルみたいなものッピネ!

この【見出し】をちゃんと書いているかそうでないかで、検索エンジンで見つけやすくなるかどうかのカギにもなる重大なモノッピ!

覚えておいて損はないッピよ~

この記事で学べること
  • 見出しの付け方<h1>~<h6>
  • 文字の強調の仕方
  • 文字を太字にする方法

ホームページの顔・【見出し】や【強調】について学ぼう

必要なもの

メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザ

元になるコード

<html>
<head></head>
<body>

</body>
</html>
うさタブ
うさタブ

上のコードを元に勉強していくッピ!

メモ帳にコピーして用意するッピネ!

文章に見出しをつけてみよう

うさタブ
うさタブ

さっそく文章に見出しをつけてみるッピよ~

うさタブ
うさタブ

<body></body>の間に

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
普通の文章

と入力するッピよ~

サンプルコード
<html>
<head></head>
<body>

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
普通の文章

</body>
</html>

ユウキ
ユウキ

オッケー! できたぜ

サンプルコード
<html>
<head></head>
<body>

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
普通の文章

</body>
</html>

ユウキ
ユウキ

おおお! なんか文章が超デカくなってる!!!

うさタブ
うさタブ

ふふふふ、これが見出しというやつッピよ~!

<h1>~<h6>といった【見出し】解説

うさタブ
うさタブ

【見出し】タグ ついて説明するッピ!

うさタブ
うさタブ

<h1><h2><h3>…..

これらはホームページの文章やコンテンツに【見出し】をつけ、

文章にメリハリをつけるもの、ページを読みやすくするものッピよ~

うさタブ
うさタブ

今回は<h1>~<h3>までのタグを使用したッピが、

本来【見出し】タグ<h1>~<h6>まであるッピ!

ユウキ
ユウキ

へ~ でも今回は全部使わなかったけど・・・

うさタブ
うさタブ

新聞でも見出しは使って2つ3つ・・・

見出しタグもそんなにたくさんは使わないッピからナ~

ユウキ
ユウキ

ふーん、そんなもんかぁ

文章を強調してみよう

うさタブ
うさタブ

次は文章を強調するタグを勉強するッピ!

うさタブ
うさタブ

<body></body>の間に

今日お魚を食べていたら、<strong>横から猫に</strong>奪われてしまった!

と入力するッピよ~!

ユウキ
ユウキ

どういう状況!?

サンプルコード
<html>
<head></head>
<body>

今日お魚を食べていたら、<strong>横から猫に</strong>奪われてしまった!

</body>
</html>

ユウキ
ユウキ

おおお、ちゃんと文章が強調されてるぜ!

文章を太字にしてみよう

うさタブ
うさタブ

最後は文章を太字にするタグを学んでいくッピよ~!

というか最初にやった【あれ】ッピ!

ユウキ
ユウキ

アレ?

うさタブ
うさタブ

Hello World】 を<b>で囲むやつッピ!

どうせだからおさらいするッピネ!

<b>Hello World</b>

<body></body>の中に入力するッピよ~!

ユウキ
ユウキ

あー、アレか! やったやった!

強調タグ<strong>/太字タグ<b>の解説

ユウキ
ユウキ

太字<b>タグ強調<strong>タグって何が違うんだ??

結果は同じにみえるけど・・・

うさタブ
うさタブ

それはッピね~

ぶっちゃけ、変わらないッピ!!!

ユウキ
ユウキ

ええええ・・・変わらないのかよ!?

うさタブ
うさタブ

強いていうなら、コンピュータがどう識別するかが一番の違いッピね~!

ネットの文章の読み上げソフトとか、

<b>太字タグより<strong>強調タグだと、より声を大きく、タメを作って話してくれるだとか、ブラウザが認識しやすいとか・・・

うさタブ
うさタブ

コンピュータにとっては、違いがわかって楽チン!

というもので、人間にはさして違いがないものッピヨ~

ユウキ
ユウキ

そんなもんか~

うさタブ
うさタブ

プログラミングのおさほう的には、

<b>より<strong>のほうがよりわかりやすくて推奨されているタグであることは間違いないッピネ~

全体のコードの確認

<html>
<head></head>
<body>

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
普通の文章

</body>
</html>
学習のまとめ
  • <h1>~<h6>までのタグを使って、文章に見出しをつけることができる
  • <b>タグを使って太字にすることができる
  • <strong>タグを使って、文字を強調することができる

うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

HTMLプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました