ステップ0〜はじめに〜
いよいよ実際にスタイルシートを使ってページを作っていくプロセスを紹介していきます。
でも、そのまえにいろいろと下準備があるのでそこから始めましょう。
今回は既に素材と原稿が仕上がり、デザインが決定した状態からはじめますが、自分で作るときはこれらの手順を踏む必要があります。
ソフトを用意しよう
今回はHTMLエディターだけ(なければメモ帳)でOKです。
ただし、自分でタグを打ちながら作っていくので、タグ打ちをできるソフトを用意してください。
無い人はおすすめソフトからStyleNoteをダウンロードしましょう。
一押しです。
知識を習得しよう
実際にやりながら習得していくのが一番ですが、やはり最低限の知識はほしいものです。
次のことが分かるかチェックしましょう。
- スタイルシートとHTMLの違い
- HTMLの基本的なタグと使い方
- スタイルシートのしくみと使い方
この3つが分かっていれば何とかなります。
分からなければ基礎知識編や他のサイトで覚えてきましょう。
デザインを考えるよう
アイディア無しでいきなり作り始めるのは無謀です。
まずは紙にどんなサイトにしたいかのアイディアを書いて、デザインをスケッチしましょう。
ある程度案が固まったら、今度はパソコンで画像ソフトを使って描きます。
原稿を用意しよう
スタイルシートを使ってページを作る場合、先にデザインを組んで原稿は後からという作り方は難しいです。
(適当に打ち込んで、後で差し替えというのはあり)。
原稿に対してマークアップ→装飾という手順を踏むので、原稿が無ければ始まりません。
ロゴなどの素材もこれに当てはまります。
作成開始!
下準備が完了したらいよいよ作成開始です。
今回は7ステップに分けて作成手順を紹介していきます。
スタイルシートの使い方を覚えるのがメインなので、レイアウトは単純です。
一見難しそうですが、手順をふんでやれば、何てことはありません。
一時間もかからずにできますよ。
ブロードバンドの方は参考GIFアニメも見ておくと、よりイメージがつかみやすくなると思います。
千里の道も一歩からです。頑張りましょう。
では、今回使う素材やファイルをダウンロードしましょう。
text-lv1.lzh(右クリック→対象をファイルに保存)
解凍すると、imgというフォルダとindex.html、style.cssというファイルがあると思います。
これらを使ってページを作っていきます。解凍したら次のステップへ進みましょう。