携帯サイトの基礎
こちらでは携帯サイトの基本的なHTMLから、作成までの流れを順を追ってご説明していきます。
既に携帯サイトを作成されている方や、ある程度のHTMLやタグ等の知識をお持ちの方には不必要な部分も多数あると思います。そういった方は次のステップへ進んで下さい。
HTMLとタグがわからない方のために・・・
HTMLとはWEBサイトを作成する為の言語のようなものです、インターネット上にWEBサイトを表示させる場合は必ずこのHTMLが使われています。
WEBサイトや携帯サイトの製作にはHTMLは必須科目みたいなものです。
タグとはHTMLの中で使われる言語の一つを指したものです。
初めての方には少し難しく感じてしまうかもしれませんが理解してしまえば簡単ですので軽い気持ちで取り組んで下さい。
全くHTMLの知識が無い方でもわかるように説明しようと思います。
どうか最後までお付き合い下さい。
携帯サイト基本タグ
まず最初に携帯サイトを作成するための基本的タグをご紹介します。
HTMLとタグの大まかな構造は以下のようになります。
まず、HTMLタグは必ずから始まりで終わります。
※上記に表示しているアルファベットがHTMLつまりサイトを作成する為のタグになります、これらはコピーして頂ければそのまま利用できるようになっています。
これが基本ですのでまずはなんとなくでいいので覚えて下さい。
の間に記述したタグがWebサイト（インターネット画面）に表示される形になります。
との間にはページタイトルやどういったサイトなのかをコンピューターに読み取ってもらう為の情報を入力します。
との間にはサイトの内容を記述していきます。
たとえば画像であったりテキストであったり、サイトの内容のことです。
どんなWEBサイトも一部を除いて全てこの基本タグによって構成されています。
スポンサードリンク
携帯サイトのタイトル
携帯サイトのタイトルはとの間に
サイトのタイトルとはサイトを表示した際に、一番左上に表記されるテキストの事です。
当サイトだと下記画像の「携帯サイトのタイトル」の部分になります。
次に
上記例ではとの間に
というテキストを記入することによりサイトのタイトルを指定しています。
この記述を入力するとInternet Explorerの場合左上のラインに記入したタイトルが表示されます。
このページの左上には「携帯サイトのタイトル」と 表示されています。
これはこのページのタイトルを 「携帯サイトのタイトル」と記入しているからです。
タグを確認してみましょう。
ちなみにタグの確認方法はサイト左上の「表示」⇒「ソース」で確認することができます。
実際にこれらのHTMLの記述をメモ帳にコピーしファイル名を「index.html」と
いう名前に変更し、起動してみてください。
タイトルが「サイトのタイトル」に変更されているはずです、当然内容は何も書き込んでないので画面は真っ白のはずです。
携帯サイトの作成
ではここから携帯サイトのタイトルを決めテーブルの中に文字を入力して実際に携帯サイトを作成してみましょう。
携帯サイトのタイトルは各自、自由に決定して下さい。
| 携帯サイトの内容 |
先ほどもご説明したとおりとの間に入力した内容が携帯サイトのメイン画面に表示されます。
上記に記載されている
ちなみに
|
携帯サイトの内容 |
まず、テキストを中央に揃える方法です、これは中央に揃えたいテキストを
と
かこめば完了です。中央揃えにしたいテキストや画像など全て同じ要領でかこめば完了です。
テーブルなども同じように囲むことによって中央に寄せることができます。
背景色の設定は
例では"red"＝"赤色"に設定してあります。
文字色の設定は、色を変えたい文字をとで囲めば終了です。
例では"blue"＝"黒色"に設定してあります。
上の例の場合、携帯サイト作成基礎マニュアルとしています。
サイトの表示例
サイトの内容
サイト作成のための主要な色は以下に表示してあります。
これらのタグを参考に色の変更を行ってください。
白色＝"white"
銀色＝"silver"
茶色＝"maroon"
緑色＝"green"
黄色＝"yellow"
灰色＝"gray"
水色＝"aqua"
青色＝"blue"
ﾋﾟﾝｸ＝"fuchsia"
ｵﾘｰﾌﾞ"olive"
黄緑＝"lime"
深い青＝"navy"
赤色＝"red"
紫色＝"purple"
薄い青＝"teal"
黒色＝"black"
携帯サイトの作り方
デザインや簡単な装飾が理解できたところで実際にサイトの内容を記入して携帯サイトを作っていきたいと思います。
なおここからが本当の携帯サイトの作り方だと考えて下さい。
今までの説明は携帯サイトを作るための土台のようなものです。
|
サイトのトップ内容 |
ここに記事や、文などのテキストを書き込みます１
ここに記事や、文などのテキストを書き込みます２
先ほどもご説明したとおり本文はとの中に記入することによってサイト内に表示することができます。
ここがサイトの骨格そしてサイトの閲覧者が見える部分です。
事項でも簡単に説明していきますが、後は本文とタグを組み合わせることにより携帯サイトを作ることができます。
上記例ではホームページタイトルの「サイトのトップ内容」の部分がサイトのトップにくるようになっています。
そして
ここに記事や、文などのテキストを書き込みます１
ここに記事や、文などのテキストを書き込みます２
上記の部分がサイトの内容になります。
ここにサイトの記事や本文、その他内容を書き込んでいきます。
ちなみに
～のタグは文字を太くするためのタグとなります。
～使用例
携帯サイトの作り方
のタグは文章を改行するためのタグになります。
スポンサードリンク
携帯サイトのタグ 1
ここでは携帯サイトを製作するために必須となるタグを説明していきます。
それぞれのタグは役割が違います、必要かどうかは自分で判断して使って下さい。
綺麗で見栄えのよいサイト作りにはタグの知識は必ず必要です。
よく使われるものから、必要なものは全て説明していきます。
タグの使い方のコツとしては、タグの使い方やスペルを覚えるのではなく、
タグを使うと何ができるのかだけを覚えておくことです。
必要なタグがあればネットなどを利用して調べればいいという訳です。
一度に全てのタグを覚えるなんてなかなかできることではありません。
では基本的なものから説明していきます。
1.文の改行
を文中に記入することにより文を改行することが可能です。
もっとも基本的なタグですので覚えておいたほうがよいでしょう。
改行前の文
改行後の文
使用例
改行前の文
改行後の文
2．文字色の指定
とで囲むことにより文字色の指定が可能です。
色の種類はこちらを参考にして下さい。
白色＝"white"
銀色＝"silver"
茶色＝"maroon"
緑色＝"green"
黄色＝"yellow"
灰色＝"gray"
水色＝"aqua"
青色＝"blue"
ﾋﾟﾝｸ＝"fuchsia"
ｵﾘｰﾌﾞ"olive"
黄緑＝"lime"
深い青＝"navy"
赤色＝"red"
紫色＝"purple"
薄い青＝"teal"
黒色＝"black"
文字色の指定
使用例
文字色を青に変更
3．太字の設定
とで囲むことにより囲んだ文字を太字にする事が可能です。
太字の設定
使用例
太字に設定
4．文字の斜体
とで囲むことにより文字を斜体にすることが可能です。
文字の斜体
使用例
斜体に設定
5.文字の下線
とで囲むことにより文字に下線をつけることが可能です。
文字の下線
使用例
下線を設定
6.文字に取消し線
で挟みます。
使用例
取消し線を設定
7.段落の設定
と
で囲むことにより文字列ごとに段落別けすることが可能です。段落分けをすると文字列の前後に1行程度のスペースが入ります。
段落の設定
使用例
段落を設定・段落1
段落を設定・段落2
8．フォントサイズの変更
とで囲むことによりフォントサイズを変更することが可能です。
フォントサイズは1～7まで調整可能です、通常のサイズは3になります。
フォントサイズの変更
使用例
フォントサイズを5に設定
携帯サイトのタグ 2
携帯サイトを製作するために必須となるタグを説明していきます。
それぞれのタグは役割が違います、必要かどうかは自分で判断して使って下さい
9．背景の色を変更
に変更することにより、背景の色を変更することが可能です。
色の種類はこちらを参考にして下さい。
白色＝"white"
銀色＝"silver"
茶色＝"maroon"
緑色＝"green"
黄色＝"yellow"
灰色＝"gray"
水色＝"aqua"
青色＝"blue"
ﾋﾟﾝｸ＝"fuchsia"
ｵﾘｰﾌﾞ"olive"
黄緑＝"lime"
深い青＝"navy"
赤色＝"red"
紫色＝"purple"
薄い青＝"teal"
黒色＝"black"
10．区切り線
をサイト内に記載することにより、区切り線を入れることが可能です。
画面の区切りはテーブルなどで区切るよりも区切り線のほうが見やすくお勧めです。
使用例
--------------------------------------------------------------------------------
文章
文章
11．区切り線の太さの変更
と記入することにより区切り線の太さを変更することが可能です。
特定の数値を入力することで太さを変更可能です。
と記入することで10ピクセルの太さに変更可能です。
使用例
の場合
--------------------------------------------------------------------------------
12．区切り線の長さを調節
を区切り線のに追加して記入することにより区切り線の長さを調整することが可能です。
記入する数値は直接長さを記入しても「%」を記入しても構いません。
携帯サイトの場合「%」のほうが便利な場合が多いです。
区切り線は常に中央揃いで表示されます。
と記入することにより、画面の半分の大きさで表示することが可能です。
使用例
--------------------------------------------------------------------------------
と記入することにより右に揃える事も可能です。
使用例
--------------------------------------------------------------------------------
13．区切り線の色の変更
と記入することにより区切り線の色を変更する事が可能です。
使用例
の場合
--------------------------------------------------------------------------------
の場合
--------------------------------------------------------------------------------
14．文章をスクロール
と記入することにより記入した文章を画面内で右から左にスクロールさせる事が可能です。
上記の場合は右から左にスクロールしますが、逆にしたい場合は"RIGHT"を"LEFT"と変更します。
下から上にスクロールしたい場合は"UP"その逆は"DOWN"と記入します。
WEBサイトではあまり見かけませんが、多くの携帯サイトでこのタグが使われているのを見たことがあると思います。
使用例
の場合
文章
15．スクロールする回数を指定する
と記入することにより、スクロールする回数を指定することが可能です。
と記入すると文章が20回スクロールします。
16．スクロールエリアに背景の色を設定する
を記入することによりスクロールエリアに色を設定することが可能です。
使用例
スクロールエリアに"red"を設定した場合
文章
17．その他の必須タグ
・・・中央寄せ
テキスト・・・リンク
以上である程度必須のタグの説明は終わります。
タグの種類はたくさんありますが、これらのタグだけでもある程度の携帯サイトの作成は可能だと思います。
もっと携帯サイトのタグを知りたいという方はこちらをご覧下さい。
⇒タグの部屋
サイトのデザインを向上させるために欠かせないいろいろなタグを紹介したサイトです。
インターネットを利用すれば簡単に調べられるので、是非いろいろ試してみて下さい。
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment