-はじめてのhtml ホームページの作り方- 初心者でも簡単なタグの使い方!慣れたらCSSも覚えてカッコイイホームページ作り

CSSでカッコイイホームページの作り方では、ホームページの装飾となるCSSの説明から、
実際にそれを使ってホームページを作るまでを順々に説明していきます。

タグ辞典

  • html一覧
  • ブロックとインライン
  • ブラウザ独自タグ
  • 無料HPスペース比較
  • 機能比較表
  • コミュニティー

  • 掲示板
  • PC用の為には

    言うまでもなく、携帯向けホームページサービスを利用して、そのままでもPCでも閲覧する事は出来ます。
    ですが、本来携帯用のホームページなので当然それはもうどうしようもないぐらい見栄えが悪いです。PCで見ればなおさらに。
    携帯用ホームページと言う物は基本的に横幅が極端に狭く、ただ文章の列が縦にダラダラと続いてるものが多くなります。
    無論、そこで絵文字やら線やら文字色を変えたりして細かい事をする訳ですが、だとしても一般的なPCサイトに比べると見劣りします。
    その原因となるのはhtmlに装飾タグしか使えずに、またその装飾タグ自体も極めて限られるからです。
    そこで外部CSSを使い、PC用のホームページにリデザインする必要があります。(魔法のiランドではjavaですが、本来はCSSが好ましい)
    まずやるべき事は外部CSSをアップロードする場所を探すと言う事です。
    CSSを利用してリデザインを行っているサイトにはまったく別のサーバーからファイルを呼び出している物もあります。
    またアップローダーのある携帯向けホームページサービスの場合は通常ではCSSと言う拡張子のファイルをアップロードできないので、
    拡張子をjpgなどに変換してアップロードしているケースもあります。(拡張子とはindex.htmlのhtml部分の事を言います。)
    webブラウザの中でもっとも有名なIEなどは例え拡張子が異なっていても、中身のデータがjavaやCSSであれば無理やり読み込みます。
    これを利用した手法が上記の拡張子変えとなります。(魔法のiランドではこれが普通の手法)
    つまり、別のサーバーにアップロードするか、アップロードのあるサービスで拡張子を変えてアップロードするかの選択肢になります。
    アップローダーがあるサービスかどうかは機能比較表を参照してください。

    形を作ってみよう

    このホームページのソースを見ると解かりますが、微妙にテーブルが混ざっています。
    厳格なhtmlとしては正しいとは言えないのですが、デザインの融通の為、
    CSSで出来ない部分を補う為にこうした形にしています。
    両対応と言う意味では当サイトでも実現出来ています。文章量が多すぎて容量を超えるところもありますが。
    で、PC用のリデザインでまずやるべき事はタイトル、メニュー、コンテンツのブロック分けを行う事です。
    文章だけでは少々解かりにくいと思うので、下の図を使って説明をしていきます。

    タイトル
    メニュー コンテンツ

    <table width="95%" border="1">
    <tr>
    <td>タイトル</td>
    </tr>
    </table>
    <table width="95%" height="200" border="1">
    <tr>
    <td width="100">メニュー</td>
    <td>コンテンツ</td>
    </tr>
    </table>
    中身のタグはこのようになっています。
    今回はわかりやすくテーブルタグ自体に縦横のサイズなどを入れましたが、
    CSSを使う場合はこれすら省くことが出来ます。あくまでテーブルは器として使っているだけなので、
    その中身はCSSのみで作っていきます。特にメニューなどのリスト化出来る物に関しては、
    <ul>
      <li></li>
    </ul>
    と言ったリストタグを使います。他にも種類がありますので、タグ辞典のhtml一覧を参照してください。
    では、実際にメニューにリストタグを使ってみましょう。

    タイトル
    メニュー
    • メニュー
    • メニュー
    • メニュー
    コンテンツ

    と、このように表示されます。
    当ホームページの場合はCSSでリデザインしていますので、そのプロパティは下記を参照にしてください
    ul {
    margin: 0px;
    padding: 0px 0px 0px 10px;
    font-family: "MS Pゴシック", "Osaka";
    font-size: x-small;
    color: #FF9900;
    list-style-type: none;
    }
    各プロパティの意味はCSSリファレンスを参照してください。
    基本的にCSSを使えばリストタグなどの本来使いにくい形の物でも自由に形を変える事が出来ます。
    当然携帯で見たときには通常のリストタグとして適応されるのでメニューとしても解かり易く、非常に使いやすいタグになります。

    次にコンテンツ部分です。

    タイトル
    メニュー
    • メニュー
    • メニュー
    • メニュー

    コンテンツ

    <p class="contents-tag">コンテンツ</p>
    中身はこうなっています。
    CSSのプロパティは
    .contents-tag {
    width: 100%;
    margin: 10px 0px;
    padding: 5px;
    font-size: x-small;
    border: 2px dashed #999999;
    background-color: #FFFFCC;
    }
    となります。
    ここで気がついた人もそうでない人も居るでしょうから、二つほどポイントを説明します。
    まずは<p></p>と言うタグです。改行の為だけに使っているホームページを大変良く見ますが、大きな間違いです。
    タグ辞典のブロックとインラインを参照している方にはなんとなく、そうでない方にはさっぱりでしょう。
    このタグは<p>から</p>の終了タグまでの間を段落として扱います。<p class="クラス名">とすると、
    </p>までの間をそのプロパティが適応されます。
    上記の <p class="contents-tag">コンテンツ</p>がそれに当たります。
    このタグを上手く活用する事でホームページの中身が綺麗にすっきりとまとめることが出来るので上手く使いましょう。
    次にulと.contents-tagを見比べて何か違うところがあります。クラス名ではありませんよ。
    後者の方には頭に「.」が入っていますね、これが前者と後者の違いになります。
    前者「ul」はhtml標準タグに対してCSSのプロパティを適応すると言う指示になります。当然「ul」以外のタグにも出来ます。
    逆に後者の 「.contents-tag」は何かしらのタグに「class="contents-tag"」とした時のみ、指定したタグの終了タグまでが適応されます。
    つまり「<p class="contents-tag">コンテンツ</p>」これがその例になる訳です。
    どちらも一長一短の部分はありますが、個人的には「.」を使う方をお勧めします。面倒にはなるけれど、この方が汎用的に使えるからです。

    ホームページのリデザインを行う際はこの二つの違いに気をつけてCSSを書く必要があります。
    どれにどういったプロパティが設定できるのかはCSSリファレンスを参照して下さい。