タグの華


  コピーして貼り付けるだけで誰でも簡単に作れる自営業者のためのホームページ作成講座

 
コピペで作るホームページトップ コピペで作るホームページトップ HTMLの基本 テーブル 画像 リンクタグ リストタグ



   5.リストタグ

この章は項目を箇条書きにしたい時に使うリストタグです


リストを表示させるには、リストの項目を<li>タグで囲んで並べ、リスト全体を<ul>タグで囲みます。
記述例
<ul><li> 〜 </li></ul> になります。

リストタグはなれないうちはちょっとわかりずらく面倒くさいかも知れませんが、結構使い勝手の良いタグですので 使用するようにしましょう!
なんといってもやることはコピペして文章書き換えるだけですし!



■サイトメニュー


 ※ 一度枠の中をクリックしてから選択する
   とコピーしやすいです。(以下同文)


■更新情報

6/1
新メニュー追加しました。美味しいよ!新メニュー追加しました。新メニュー追加しました。美味しいよ!
5/1
新メニュー追加しました。美味しいよ!新メニュー追加しました。新メニュー追加しました。美味しいよ!



※ そのままコピーして使用してください






解説

@.前のページで作成したindex.htmlファイルを開くと下のように表示されてますでしょうか?

        リンクタグ貼り付け後のイメージ


リンクタグ貼り付け後のイメージA. ここではホームページの情報を掲載する部分にリストタグを2箇所貼り付けたいと思いますので再びメモ帳でindex.htmlファイルを開いてみましょう。

B.2箇所貼り付けてみます。まず最初に上の【サイトメニュー】のタグをサイドバータグの一番最初の<td>のあとに貼り付けてあげます。(ここに情報1と書かれた場所です)
次に上の【更新情報】のタグをメインコンテンツタグの一番最初の<td>のあとに貼り付けてあげます。(ここにリストタグの更新情報と書かれた場所です)
具体的には右側のソースのような感じです。

C.上書き保存をしてブラウザで開いて見てみましょう!トップページにあるようなホームページになっているでしょうか?

  上書き保存の仕方

お疲れ様でした!

なんとなくでもホームページを作ることが出来たでしょうか?あとは中の情報を書き換えていけばオリジナルなホームページが完成です。 このようにホームページはタグを組合して作っていきます。本当はこのタグを全て自分で打ち込むことが出来れば 良いのですが、なかなか覚えるのも大変ですよね。コピペするだけですぐに使えるタグがありますので参考にしてください。

タグ辞典(応用編) 初心者にはちょっと難しいかも?慣れてくれば凄く便利!
タグ辞典(実践編) 実践編といっても初心者でもコピペするだけなので超簡単!

とりあえずコピペして文章を入力するところを書き換え、 あとはサイズや色を変更すればいくらでもオリジナルなホームページが簡単に作れますよ。

この調子で2ページ目、3ページ目とテーブルタグを組み合わせてページを増やしていきましょう。
ページを増やすコツとしては
index.htmlファイルをページ数分コピーして複製します。
ファイル名を変更します。
同じようにメモ帳で開いて編集していきます。
そのときにタイトルバーやサイドバーはそのままにして、中枠の中の画像とメインコンテンツだけ書き換えていけばOKですよ。

もっとよくホームページについて勉強したい、 もっといろいろな素材のサンプルがあればよいのにという方は こちらにもっと簡単できれいなホームページテンプレートとさらに詳しい解説が ありますので参考にしてみてください。しかもこちらは画期的な動画解説付きです。




by 自営業者が自分で作るお店のホームぺージ

Copyright © 2008 タグの華 All rights reserved.