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

演習1.7 画像表示をセンター揃えにする

画面表示をセンター揃えにする

演習1.7 画面表示をセンター揃えにする

☑画面のセンターに表示する <center>○○○</center>

ページ全体のレイアウトは、左寄せ、右寄せ、センター揃えなどに指定できます。目的に応じて使い分けますが、ここでは中央に揃えてみます。

1. 文章と写真をセンター揃えにする

現時点では、文章や画像がブラウザ上で、左寄せで表示されています。(ただし、罫線だけは、ブラウザによっては中央に表示されます)


図 1.7.1

全体をセンター揃えにするために、<center>タグを挿入します。

2. すべてをセンターに揃える

センター揃えにするには、<body>タグの中で全体を<center>タグで囲みます。以下のように、ソースコードに記述を追加してください。

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

➢ index.html (※必要部分のみ記載)

	~前略~
<body bgcolor="#FFFFCC">
<center>
<h1><font color="#2A7e55">子猫と子犬の部屋</font></h1> 
<h3><font color="red">かわいい動物たちの写真館</font></h3>
<img src="img/img01.jpg" border="0" alt="メイン写真"><br><br>
<font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ!</strong></font><br>
<strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。
<br><br>
<hr width="540">
</center>
</body>
</html>
        

<body>タグの中の記述を、<center>と</center>で囲みました。

3. HTMLファイルを保存

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

4. ブラウザで表示

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


図 1.7.2

<center>タグを挿入することによって、ページの中身がセンター揃えになり、見た目がすっきりとしました。

NEXT>> 演習1.8 テーブルを使って画像や文章を並べる

HTMLとCSSの入門 目次

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

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

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

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

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

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

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

ホームページ制作・保守

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