ホームページ作成/携帯・スマートフォンサイト作成入門

携帯サイトの作り方 第1回 作成方法の基礎(5ページ目)

携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

5. 文字色・背景色・文字サイズなどの装飾

ここでは、ボックスに背景色を加えたり、文字に色を付けたり、ボックス内の文字列を右寄せ・センタリングしてみる方法をご紹介いたします。 この辺の記述方法は、PC向けサイトを作る場合とほとんど変わりません。ただし、文字サイズの調整には注意が必要です。

文字色・背景色などボックスや文字の装飾
 

■ボックスに文字色と背景色を指定

div要素で作るボックスに、colorプロパティで文字色を、background-colorプロパティで背景色を指定するだけです。

<div style="background-color:#cc0000; color:white;">
ボックスの中身
</div>

上記ソースでは、ボックスの背景色が濃い赤色(#cc0000)になり、文字色が白色(white)になります。

■一部の文字色だけを指定

ボックス全体ではなく、一部の文字だけに対して色を指定したい場合は、span要素を使って以下のように記述します。

<span style="color:#ff0080;">ここだけ</span>変わります。

上記ソースでは、span要素で囲んだ「ここだけ」の文字だけが赤紫色(#ff0080)で表示されます。

■センタリング・右寄せ

ボックスの中身をセンタリング(中央寄せ)したり右寄せしたりするには、以下のようにtext-alignプロパティを使います。

<div style="text-align:center;">センタリング</div>
<div style="text-align:right;">右寄せ</div>

何も指定しなければ左寄せで表示されますが、値に「left」を指定することで左寄せを明示できます。

■文字サイズ

文字サイズは、font-sizeプロパティを使って指定します。指定する大きさは、「larger」・「smaller」などの相対指定や「x-small」のようなキーワードによる絶対指定などのほか、 「12px」や「18pt」など単位を使った数値で指定する方法があります。 しかし、docomoの端末では数値を使った指定は使えず、「smaller」や「xx-small」のようなキーワードで指定するしかありません。

<div style="font-size:smaller;">
文字を小さめで表示
</div>

キーワードによる絶対指定では、小さい順に以下のような値があります。
xx-small < x-small < small < medium < large < x-large < xx-large

■見出し

見出しを表す要素は、<h1>~<h6>まで使えます。標準の文字サイズは携帯端末によって異なります。 auとSoftbankは、font-sizeプロパティを使うことで文字サイズの変更が可能ですが、docomoでは変更できませんので注意して下さい。

■区切り線(水平線)

区切り線は、hr要素を使います。hr要素は空要素(内容のない要素)なので、XHTMLで記述する際にはタグの終わりに「/」を加えて、以下のように記述しなければならないので注意して下さい。

<hr />

改行を作る br要素も同様に <br /> と記述します。

次に、マーキー(流れる文字)を作ってみましょう。

【携帯サイトの作り方 第1回 目次】

1. はじめに・サンプル
2. XHTMLでベースを作る
3. HTTPヘッダでMIMEタイプを出力
4. 使える装飾方法と使えない装飾方法
5. 文字色・背景色・文字サイズなどの装飾基本 (このページ)
6. マーキー(流れる文字)を作る
7. サイズに気をつけて画像を掲載する
8. リンク・ページ内リンクを作る
9. ソースのまとめ

  • 前のページへ
  • 1
  • 4
  • 5
  • 6
  • 10
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます