あっぷっぷ携帯ホームページ講座TOP - あっぷっぷ
STEP1

◆HTMLとは
◆TOPページを作ろう
◆タイトルを表示しよう
◆リンクを貼る
◆画像をはる
◆改行する
◆縦書きにする
◆文字の位置
◆文字の色とサイズ


◆HTMLとは

htmlってとっても簡単です。プログラムの経験がなくとも作れます。htmlとはHPをつくる上での言語のことです。これをつかってHPを完成させてください。
携帯のhtmlはパソコン用のhtmlとは若干違っており、それなりに制約があります。
なぜかといいますと、パソコンのような大きな画面ではなく小さな画面の中で表現する必要があるためより複雑な機能は使えないようになっています。
その内容については徐々に記載しますので今はあまり気にしないでついてきて下さい。

またこの講座でのhtmlはどの携帯キャリアでもおそらく使えるだろう？ものを記載しておりますので大抵はiモード・vodafone・ez-web対応できますのでそのつもりで！！

最低限のhtmlを覚えましょう。

<html>
<head>
</head>
<body>
ここから本文
</body>
</html>

上の<>でかこまれた言語で構成されたのがhtmlです。<>をタグといいます。上記のタグ構成は絶対必要なものです。あとは上記の「ここから本文」というところにコンテンツを作成していけば言いわけです。

これらの全体を「ソース」とも言います。

◆TOPページを作ろう

１．まずページを作成するまえにひとつのフォルダを作ります。名前は何でもいいですがわかりやすいものにしましょう。例えばmyhomeとかhomepageとか。名前はかならず半角英数のみで書くように。このフォルダはあなたの整理しやすいところにおいておきそのショートカットをデスクトップにおいて置けば楽です。


ちなみにフォルダの作り方
Windows の場合はどこでもいいですが、例えばマイドキュメントの中で右クリックし「新規作成」-「フォルダ」　そして名前の変更を行なえます

Macの場合は[ファイル]→[新規フォルダ]で作成可能です。

２．さあそれではTOPページを作りましょう。まず、先程作成したフォルダ内で新規にテキストファイルを作成し、名前の変更で「index.txt」としておいてください。
「え？ファイル名ってindex.htmlじゃないの？」って思った方そのとおりです。ですが、ここではテキストエディタで基本から作成する講座なのでまあ、いらない人は飛ばしてください。

テキストファイルでhtmlを制作していきます。
テキストファイルとはwindowsでいうメモ帳のことです。
Macの場合SimpleTextです。

３．さあ、上の「HTMLとは」で説明した
<html>
<head></head>
<body>
ここから本文
</body>
</html>

を書いていきます。ここから本文というところにタグ（<>でかかれたやつ）をかいていくか文字を書いていくことでページができます。上の文はホームページを作る上での一つのルールだとおもってください。
<html>はここからhtmlをかきますよーーってこと</html>でここまでですよーってな感じ。
<head>〜</head>はヘッダー情報（いろいろありますがここでは気にせずに）を書きます。
<body>〜</body>は実際のホームページを表現するところです。

必ずこれらのタグは必要ですので覚えておいてください。PCではこのタグ類を書かなくてもホームページは見ることができますが、vodafoneやez-webはこのあたりはシビアにチェックしますので書いていなければ正常に動作しません。また大文字・小文字はどちらでもかまいません。ただし半角英字でないと正常にタグと認識されませんので注意してください。

４．ではさっそく作成してみましょう。1行目（本文の）に表現したい文字を記述します。例えば
<html>
<head></head>
<body>
あっぷっぷへようこそ
</body>
</html>

こうすれば

あっぷっぷへようこそ

このようにホームページ上に表記されます。

５．さあ、上のようにページをプレビューしたい場合、どうするのでしょう？
まずはindex.txtを保存してください。そして別に“名前を付けて保存”をします。その際にファイル名は絶対にindex.htmlにします。そしてそのindex..htmｌを開いてみてください。上のように表記されましたでしょ？されない場合htmlが間違ってます。
この保存の際に注意することは半角英数で保存すること。全角文字で保存しないこと。また_(アンダーバー)や-ハイフン、など記号も使わないようにしてください。機種によってはファイルを読み込めない場合があります。

６．さあ文字表現ができたところでコンテンツ（項目）を加えていきましょう。
あなたのHPでいいたいメニュー項目みたいなものですね。例えばプロフィールとか掲示板とか・・・。
いろんなHPをみて参考にしてください。
次項からそのコンテンツ作りを書いています

◆タイトルを表示しよう
<title>タイトルタグを使います。

このタグは必ず<head></head>の間に書く必要があります。
<title>タイトルです</title>
PCのブラウザの場合下のようにタイトルバーに出てきます。


携帯では上のようにはなりませんが、ブックマークなどをする際自動的にページ名として挿入されます。タイトルは必ずかくクセをつけましょう。

◆リンクを貼る
<a>エータグを使います。
リンクとはページとページを繋げるものです。いわゆるHPから他人のページにもしくは、自分のサブページにジャンプすることを言います

タグの書き方
<a href="http://www.******.co.jp">ここをクリック</a>
上記のhttp://www.******.co.jpがURLになります。

URLとはアドレスのことです。必ず半角英数で入力のこと。また上の場合を絶対パスといいます。絶対パスとはhttp://ではじまるURLのことです。かならず最後は</a>で閉じること。ここをクリックというところがリンクする文字になります

それに対し相対パスというものがあります。これは自分のページ内でのみ使えるものでURLを簡単に省略できます。


◆画像をはる
<img>イメージタグを使います。

画像の貼り方は
<img  src="http://www.****.co.jp/img.gif>
のようにを使います。＝のあとに画像のURLを書き最後に画像ファイル名を入れます。

例えば

は<img src="../img/imode.gif">
というタグで画像が表現できます。
../img/imode.gifの部分がパスといいます。このページからみてどこにあるかを簡単に省略したものです。
http://www.****.co.jp/img/img.gifのようにURLで表示するのは「絶対パス」
./img/imode.gifのような省略型を相対パスといいます。

・画像を中央・もしくは右寄せにする場合

<center><img border="0" src="../img/imode.gif"></center>
と書けばしたのようにブラウザ上で中央になります。

<center>〜</center>は中央揃え。
<right>〜</right>は右寄せになります。
とくに宣言しなければ左寄せになりますがあえて<left>〜</left>としてもＯＫです。

◆改行する
<br>ビーアールタグ
文章を書いている際に携帯ですと画面が小さいので改行が必要になります。その際使うのがこのタグになります。

改行します<br>
1行改行しました<br>
2行改行しました

上のようにかけば実際は下のように表示されます。

改行します
1行改行しました
2行改行しました

<p>ピータグを使います。

を使えば<br>と違いその行の上と下に空行ができます。

<p>改行します</p>
<p>1行改行しました</p>

上のようにかけば実際は下のように表示されます。


改行します

1行改行しました

　
vodadfoneで一部直後の空行が入らないものがあります。

◆縦書きにする

改行のタグを使用することによって縦書きに見せることもできます。
あまり使用しませんが・・・

あ<br>
い<br>
う<br>
え<br>
お<br>

このように書けば

あ
い
う
え
お

と表示されます。

◆文字や画像の位置

・中央揃え・右寄せ
<div align=center>、<div align=center>タグを使います。
もしくは<center>センタータグ、<right>ライトタグ(このタグはiモードとEz-Webのみ対応。vodafoneは未対応)

文字は通常は左に揃っているのですが、見だしなどを作る時は中央にしたほうがいいでしょう。

<div align=center>中央ぞろえ</div>
      or
<center>中央ぞろえ</center>このように書けば

中央ぞろえ

と表現されます。

<div align=right>中央ぞろえ</div>
<right>右寄せ</right>

右寄せ

と表現されます。


◆文字の色とサイズ
<font>フォントタグを使います。

・文字の色をつける

<font color=red>文字の色</font>
color="色指定"
文字の色
と表現されます。
色の指定は通常色コードを使います。 色コードは色見本を参照してください

文字色を指定しなければ初期値は黒になります。


・文字の大きさを変える

<font size=2>文字の大きさ</font>
size="大きさ"
数値は1,2はサイズ小、3は中でデフォルトの大きさ、4,5,6,7,は大を表します。
iモードは505以上の機種(N506iなど一部未対応)
vodafone・ez-web未対応
あっぷっぷ携帯ホームページ講座TOP - あっぷっぷ
Copyright (C) あっぷっぷ All Rights Reserved