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

演習1.4 文字を強調する

文字を強調する

演習1.4 文字を強調する

ここで学ぶ内容

☑文章に見出しをつける <h1~7>文章</h1~7>
☑文章のサイズを変えて表示する <font size=”文字のサイズ”>文章</font> 
☑文字を強調する <strong>文章</strong>
☑文字に下線を引く <u >文章</u> 
☑文字を斜体にする <i >文章</i>
☑水平な罫線を挿入する <hr width= “ピクセル数”> 

続いて、Webページを見た人が一目で内容を把握できるようなタイトルをつけ、また文字に強弱をつけて、印象を強くしていきましょう。タイトルは「子猫と子犬の部屋」、サブタイトルは「かわいい動物たちの写真館」にします。

また、文章の一部に下線を引いたり太字にするなどのアクセントをつけて、注目を引きたい部分としてアピールしてみましょう。

1. タイトルやサブタイトルなどの文字を強調する

タイトルとサブタイトルを記述して、それぞれを見出しに設定します。見出しに設定する方法は、第2章で学習した<h>タグを利用します。タイトルには<h1>タグ、サブタイトルには<h3>タグを設定します。

また、フォントサイズを変更する<font size>タグを利用して、文章の一部の文字の大きさを変えてみます。

以下のように、ソースコードに文章の追加、またはタグの追加をしてください。

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

➢ index.html

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

2. 文字に特徴をつける

続いて、文字を強調する<strong>タグと、文字に下線を引く<u>タグを使って、文章にメリハリをつけてみます。

次のように、記述の一部を変更してください。

	~前略~
<font size="5"> <strong> 子猫と子犬の部屋にようこそ!</strong></font><br> 
<strong>子猫と子犬 </strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。<br><br> 
	~後略~
        

「とってもかわいい写真」という文章を<strong>タグで強調し、さらに<u>タグで下線の設定を行いました。

3. 罫線を引いて内容が分かれていることを示す

ページのなかで、わかりやすく内容を区切るために、罫線を引いてみます。罫線を引くには、<hr>タグを利用します。10行目の記述のすぐ下に、以下のように記述を追加してください。

	~前略~
今後も色々と紹介していきますので、楽しんでください。<br>
<hr width="540">
</body>
        

<hr>タグを利用して、幅540ピクセルの罫線を指定しました。

4. ブラウザで表示

では、これまで記述した内容がブラウザでどのように表示されるか、確認してみましょう。

図 1.4.1

見出しや、太字・下線などに設定した部分が、正しく表示できましたか?

もし、上の図のような表示になっていない場合には、ゆっくりで構いませんので、ここまで記述したソースコードを1行1行見直してみてください。

NEXT>> 演習1.5 文字と背景に色をつける

HTMLとCSSの入門 目次

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

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

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

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

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

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

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

ホームページ制作・保守

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