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>タグを使って、文字を強調することができる

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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