htmlタグを使ってみる

さっそく、ホームページを作ってみよう

基本的なHTMLタグ、よく使われるHTMLタグを使って、ホームページを作る練習をしてみます。

また、HTMLタグだけではホームページのデザインを細かく設定することができませんので、CSS（シー エス エス）というもの使って、デザインの設定をしてみます。

今回やることは、

  • 背景の色を変える
  • 文字の色を変える
  • 画像を表示する
  • リンクを付ける

です。

それでは、「homepage.html」のファイルをテキストエディタ（Emedtor）で開いて、その中に書いていきましょう。

背景の色を変えてみる（CSS）

bodyタグに背景の色を変える設定を入れてみよう。



背景に画像を表示させたい場合は、background-imageを使います。


background-image: url("./momopro.png");


「./momopro.png」の部分は、表示したい画像ファイル名を指定してください。

「./」は画像ファイルがhtmlファイルと同じフォルダにある、という意味です。


背景に画像を表示させた時に使えるプロパティは以下のようのものもあります。

どんな表示になるか試してみましょう。


background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;


文字の色を変えてみる（CSS）




色を変えたい文字をタグ（pタグ）に入れて、「color」で色を指定します。


ここの文字は青色です。


ここの文字は青色です。


文字の大きさを変えてみる（CSS）




大きさを変えたい文字をタグ（spanタグ）に入れて、「font-size」で大きさを指定します。


ここの文字は大きめです。


ここの文字は大きめです。


文字の太さを変えてみる（CSS）




太さを変えたい文字をタグ（spanタグ）に入れて、「font-weight」で大きさを指定します。


ここの文字は太とめです。


ここの文字は大きめです。


画像を表示してみる




画像を表示するには「imgタグ」を使います。


<img src="https://momo-pro.jp/wp-content/uploads/2016/04/960-250x250.jpg">


画像のサイズを変えてみる




横幅の指定は「width」、高さの指定は「height」を使います。




<img src="960-250x250.jpg" style="width:100%;">




<img src="960-250x250.jpg" style="width:50%;">




<img src="960-250x250.jpg" style="width:100px;height:300px;">


画像を真ん中に表示してみる




imgタグの外側にdivタグを書きます。

そして、divタグ内に「text-align」を使って、imgの表示位置を指定します。







<div style="text-align:center;"><img src="960-250x250.jpg"></div>







<div style="text-align:right;"><img src="960-250x250.jpg"></div>


表示した画像の角を丸くしてみる


まずは普通に画像を表示してみます。




<img src="960-250x250.jpg">




<img src="960-250x250.jpg" style="border-radius:50px;">




<img src="960-250x250.jpg" style="border-radius:50%;">



css（シーエスエス）のborder-radius（ボーダー　レイディアス）を使います。


後ろの数字を変えると、丸み具合が変わります。

border-radius:50px;


画像を真ん丸にしたい場合は「50%」にします。

border-radius:50%;


音を鳴らしてみる


音声を鳴らすには「audioタグ」を使います。




<audio src="crossing1.mp3" controls></audio>


「crossing1.mp3」は音声ファイル名です。使いたい音声ファイル名に書き換えましょう。


リンク（クリックすると違うページに移動するもの）をつけてみる




まず、リンク先（移動先）のページを「page2.html」というファイル名で作成します。


作成できたら、「homepage.html」に以下のコードを追加してみます。


<a href="page2.html">ここをクリックするとページが変わるよ</a>


tableタグを使ってみる






１列目
２列目
３列目
























<table>

<thead>

<tr><th>１列目</th><th>２列目</th><th>３列目</th></tr>

</thead>

<tbody>

<tr><td><img src="960-250x250.jpg"></td><td><img src="960-250x250.jpg"></td><td><img src="960-250x250.jpg"></td></tr>

<tr><td><img src="960-250x250.jpg"></td><td><img src="960-250x250.jpg"></td><td><img src="960-250x250.jpg"></td></tr>


</tbody>

</table>


おさらい




    

  1. CSSの設定方法（HTMLタグの中に書く方法）
    2. 

  2. 背景や文字の色を変える方法
    3. 

  3. 画像を表示する「imgタグ」、リンクを付ける「aタグ」
    4.