![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はHTMLの【改行】と【段落】ついて勉強するッピよ~~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
改行と段落?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
インターネットのページで、
このように
文章を
区切ったりすることを
【改行】というッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そして
こんな風に文章や画像を
![遊んで学んでじゃんけんぽん](https://janken.asotetu.work/wp-content/uploads/2021/05/jan-1024x1024.png)
コンテンツごとに区切って、グループ分けすることを
【段落】を作るというッピよ~~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
へ~ なんかよくわかんないけど
いっちょやってみるか~!
- インターネットのページでの改行(文章を区切って次の行に移動すること)
- ページでの段落の作り方
改行と段落ついて学ぼう
インターネットページの仕組みについて学ぼう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはインターネットのページの仕組みについて説明するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
みんながみているインターネットのページは
HTMLというもので作られているッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
HTMLファイルは、<head>や<body>・・・たくさんのタグで作られているッピ!
その タグ をいっぱい積み上げて、
たくさん タグ の【積み木】を『ブラウザ』で表示しているあるね~
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-07_3.jpg)
HTMLのサンプル
<html>
<head></head>
<body></body>
</html>
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
ん?? 『ブラウザ』って??
聞いたことないんだけど??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
『ブラウザ』は、ユウキくんが今、
インターネットを見るために使っている【アプリ】のことッピヨ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
これか~~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
代表的なのは、
![](https://janken.asotetu.work/wp-content/uploads/2020/07/ブラウザアイコンIE.png)
windows のパソコンに最初から入っている Microsoft Edge
![](https://janken.asotetu.work/wp-content/uploads/2020/07/ブラウザアイコン(Google-Chrome).png)
Android のスマホやタブレットに入っている Google Chrome
![](https://janken.asotetu.work/wp-content/uploads/2020/07/ブラウザアイコン2-Safari.png)
i phone や i Mac に使われてる Safari
それ以外で有名なのは、Firefox というブラウザが人気ッピネ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
へ~ いろんなのがあるんだな~
必要な道具を用意しよう
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- パソコン
元になるコード
<html>
<head></head>
<body>
Hello World
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-06-28_2.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
メモ帳に上のコードをコピーしておくッピ!
準備ができたらさっそく学習に入るッピよ~
文章の改行をしてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ではさっそく
文章を区切る【改行】をしてみるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
Hello worldの間を区切って、
【world】を次の行に移動するッピネ!
Hello <br /> world
と入力してみるッピよ~~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
オッケー!
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-18_01.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた~!!
<html>
<head></head>
<body>
Hello <br />world
</body>
</html>
解説:改行するタグ <br>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
改行のおさらいッピ!
文字と文字を区切って、改行するには
<br> もしくは <br /> タグを使うッピネ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
<br>と<br />
この2つは何が違うんだ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
結果は一緒ッピが、
<br>タグはちょっと古い命令文で、今はあまり使わないほうが良いとされてるッピ!
<br />のほうが新しく、バグを防止するために、今はこっちを使いましょうということになってるッピネ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
プログラミングにも新しいとか古いとかがあるんだなあ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ちょっと長くなりそうッピ!
次のページに移るッピよ~!