HTML入門講座|改行と段落ついて学ぼう

HTML
うさタブ
うさタブ

今回はHTMLの【改行】と【段落】ついて勉強するッピよ~~

ユウキ
ユウキ

改行段落

うさタブ
うさタブ

インターネットのページで、

このように

文章を

区切ったりすることを

改行】というッピ!

うさタブ
うさタブ

そして

こんな風に文章や画像を

遊んで学んでじゃんけんぽん

コンテンツごとに区切って、グループ分けすることを

段落】を作るというッピよ~~

ユウキ
ユウキ

へ~ なんかよくわかんないけど

いっちょやってみるか~!

この記事で学べること
  • インターネットのページでの改行(文章を区切って次の行に移動すること)
  • ページでの段落の作り方

改行と段落ついて学ぼう

インターネットページの仕組みについて学ぼう

うさタブ
うさタブ

まずはインターネットのページの仕組みについて説明するッピ!

うさタブ
うさタブ

みんながみているインターネットのページ

HTMLというもので作られているッピ!

うさタブ
うさタブ

HTMLファイルは、<head>や<body>・・・たくさんのタグで作られているッピ!

その タグ をいっぱい積み上げて、

たくさん タグ の【積み木】を『ブラウザ』で表示しているあるね~

HTMLのサンプル

<html>
<head></head>
<body></body>
</html>
ユウキ
ユウキ

ん?? 『ブラウザって??

聞いたことないんだけど??

うさタブ
うさタブ

ブラウザは、ユウキくんが今、

インターネットを見るために使っているアプリのことッピヨ~!

ユウキ
ユウキ

これか~~!

うさタブ
うさタブ

代表的なのは、

windows のパソコンに最初から入っている Microsoft Edge

Android のスマホやタブレットに入っている Google Chrome

i phonei Mac に使われてる Safari

それ以外で有名なのは、Firefox というブラウザが人気ッピネ~

ユウキ
ユウキ

へ~ いろんなのがあるんだな~

必要な道具を用意しよう

メモ帳
  • メモ帳
  • パソコン

元になるコード

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

Hello World

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

メモ帳に上のコードをコピーしておくッピ!

準備ができたらさっそく学習に入るッピよ~

文章の改行をしてみよう

うさタブ
うさタブ

ではさっそく

文章を区切る【改行】をしてみるッピ!

うさタブ
うさタブ

Hello worldの間を区切って、

【world】を次の行に移動するッピネ!

Hello <br /> world

と入力してみるッピよ~~!

ユウキ
ユウキ

オッケー!

ユウキ
ユウキ

できた~!!

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

Hello <br />world

</body>
</html>

解説:改行するタグ <br>

うさタブ
うさタブ

改行のおさらいッピ!

文字と文字を区切って、改行するには

<br> もしくは <br /> タグを使うッピネ!

ユウキ
ユウキ

<br><br />

この2つは何が違うんだ?

うさタブ
うさタブ

結果は一緒ッピが、

<br>タグはちょっと古い命令文で、今はあまり使わないほうが良いとされてるッピ!

<br />のほうが新しくバグを防止するために、今はこっちを使いましょうということになってるッピネ~

ユウキ
ユウキ

プログラミングにも新しいとか古いとかがあるんだなあ~

うさタブ
うさタブ

ちょっと長くなりそうッピ!

次のページに移るッピよ~!

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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をコピーしました