初心者の館

ステップ0〜はじめに〜

いよいよ実際にスタイルシートを使ってページを作っていくプロセスを紹介していきます。
でも、そのまえにいろいろと下準備があるのでそこから始めましょう。
今回は既に素材と原稿が仕上がり、デザインが決定した状態からはじめますが、自分で作るときはこれらの手順を踏む必要があります。


ソフトを用意しよう

今回はHTMLエディターだけ(なければメモ帳)でOKです。
ただし、自分でタグを打ちながら作っていくので、タグ打ちをできるソフトを用意してください。
無い人はおすすめソフトからStyleNoteをダウンロードしましょう。 一押しです。

知識を習得しよう

実際にやりながら習得していくのが一番ですが、やはり最低限の知識はほしいものです。
次のことが分かるかチェックしましょう。

  • スタイルシートとHTMLの違い
  • HTMLの基本的なタグと使い方
  • スタイルシートのしくみと使い方

この3つが分かっていれば何とかなります。
分からなければ基礎知識編や他のサイトで覚えてきましょう。

デザインを考えるよう

アイディア無しでいきなり作り始めるのは無謀です。
まずは紙にどんなサイトにしたいかのアイディアを書いて、デザインをスケッチしましょう。
ある程度案が固まったら、今度はパソコンで画像ソフトを使って描きます。

原稿を用意しよう

スタイルシートを使ってページを作る場合、先にデザインを組んで原稿は後からという作り方は難しいです。 (適当に打ち込んで、後で差し替えというのはあり)。
原稿に対してマークアップ→装飾という手順を踏むので、原稿が無ければ始まりません。
ロゴなどの素材もこれに当てはまります。

作成開始!

下準備が完了したらいよいよ作成開始です。
今回は7ステップに分けて作成手順を紹介していきます。
スタイルシートの使い方を覚えるのがメインなので、レイアウトは単純です。

今回のサンプル完成形

└参考資料:GIFアニメで見る制作過程(1.6MB)

一見難しそうですが、手順をふんでやれば、何てことはありません。
一時間もかからずにできますよ。
ブロードバンドの方は参考GIFアニメも見ておくと、よりイメージがつかみやすくなると思います。
千里の道も一歩からです。頑張りましょう。

では、今回使う素材やファイルをダウンロードしましょう。
text-lv1.lzh(右クリック→対象をファイルに保存)
解凍すると、imgというフォルダとindex.html、style.cssというファイルがあると思います。
これらを使ってページを作っていきます。解凍したら次のステップへ進みましょう。


次のステップへGO→


一覧へ戻る


Last Modified 2005-08-15 © きくちゃん 2004 - All Rights Reserved