東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.3 文字を入力して改行する

文章を入力して改行する

演習1.3 文章を入力して改行する

☑本文を記述する <body>○○○</body>
☑テキストを改行する <br> 

Webページに表示させたい内容は、<body>○○○</body>で囲まれた部分に記述していきます。

また、内容(文章)には適切な箇所に、改行する<br>タグを使用しましょう。

1. HTMLファイルに文章を記述

<body>と</body>の間に、以下のように文章を記述してください。

①ソース・フォルダー :html/ch06
②ファイル名     :index.html

➢ index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子猫と子犬の部屋</title>
<body>
    子猫と子犬の部屋にようこそ!
    子猫と子犬のとってもかわいい写真をご用意しました。
    今後も色々と紹介していきますので、楽しんでください。
</body>
</html>
	

6行目から8行目に、文章を記述しました。
まずはこの状態で上書き保存をしてから、ブラウザの表示を確認してみます。ブラウザ上で、文章が左詰めで表示され、文章がすべてつながって表示されます。

図 1.3.1

2. <br>タグを挿入して改行する

文章は改行しないと文字が続けて表示され、とても見難くなります。文章の区切りの良い所で<br>タグを入れて、文章を読みやすくしてみます。以下のように、6行目~8行目に、<br>タグを記述してください。

	~前略~
子猫と子犬の部屋にようこそ!<br>
子猫と子犬のとってもかわいい写真をご用意しました。<br><br>
今後も色々と紹介していきますので、楽しんでください。<br>
	~後略~
	

「子猫と子犬のとってもかわいい写真をご用意しました。」の後には、<
br>タグを2つ続けて記述しています。こうすることで、1行分のスペースを確保しています。

3. HTMLファイルを保存

上の記述が終わったら、再度上書き保存をしてください。

4. ブラウザで表示

では、ブラウザで確認してみましょう。

図 1.3.2

<br>タグを挿入することで、文章が改行され内容が見やすくなりました。

NEXT>> 演習1.4 文字を強調する

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.