htmlタグを使ってみる

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

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

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

今回やることは、

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

です。

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

背景の色を変えてみる(CSS)

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

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

「./momopro.png」の部分は、表示したい画像ファイル名を指定してください。
「./」は画像ファイルがhtmlファイルと同じフォルダにある、という意味です。

背景に画像を表示させた時に使えるプロパティは以下のようのものもあります。
どんな表示になるか試してみましょう。

文字の色を変えてみる(CSS)

色を変えたい文字のタグ(pタグ)に入れてみよう。

画像を表示してみる

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

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

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

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

後ろの数字を変えると、丸み具合が変わります。
border-radius:50px;

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

音を鳴らしてみる

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

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

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

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

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

おさらい

  1. CSSの設定方法(HTMLタグの中に書く方法)
  2. 背景や文字の色を変える方法
  3. 画像を表示する「imgタグ」、リンクを付ける「aタグ」