初心者の館
ここではスタイルシートを使ってページを作っていく様子を実習形式で紹介しています。
リファレンス系サイトを見ても、いまいちスタイルシートの活かし方が分からなかった人や、
スタイルシートデザインに興味のある人はぜひ読んでみてください。
「スタイルシートってこういう風に使っていくんだ」って感じてもらえると思います。
基礎知識編
- はじめに
- 正しいHTMLとは
- HTML必須タグ＆属性
- スタイルシート概論
- スタイルシートの仕組み1
- スタイルシートの仕組み2
- プロパティ概論
- ボックスを理解しよう
- 単位と色について
- スタイルシートデザインの心構え
- おまけ：大学の講習会で使った原稿
- ホームページとWEBサイト
- WEBサイトで使われる技術
- ページの構成要素
- 作成ソフト＆デザインタイプ
- 画像のイロハ
- サイトの制作手順
制作実習編LV1
まずは簡単なレイアウトでスタイルシートの使い方に慣れましょう。
基本的なプロパティとその効果を覚えるのが目標です。
- ステップ0〜はじめに〜
- └参考資料：GIFアニメで見る制作過程(1.6MB)
- ステップ1〜原稿を書く〜
- ステップ2〜HTMLでマークアップ〜
- ステップ3〜ボックスで囲っていこう〜
- ステップ4〜まずは基本設定とリンクの色〜
- ステップ5〜見出し部分の設定〜
- ステップ6〜本文とリストの設定〜
- ステップ7〜ボックスごとに背景をつける〜
- あとがき
制作実習編LV2
テーブルタグの助けを借りて、ちょっと高度なレイアウトに挑戦します。
ハイブリッドデザインと呼ばれる手法で、スタイルシートの良さを活かしつつ、
レイアウトの崩れを最小限に抑えることができます。是非ものにしてください。
- ステップ0〜はじめに〜
- └参考資料：GIFアニメで見る制作過程(2.3MB)
- ステップ1〜テーブルで枠を作る〜
- ステップ2〜原稿を書く〜
- ステップ3〜マークアップする〜
- ステップ4〜ヘッドと左サイドのデコレーション〜
- ステップ5〜右サイドのデコレーション〜
- ステップ6〜フットと仕上げ〜
- あとがき
- おまけ：テーブルタグを除去する１
- おまけ：テーブルタグを除去する２
- おまけ：テーブルタグを除去する３
- おまけ：テーブルタグを除去する４
制作実習編LV3
テーブルタグを全く使ずに、高度なレイアウトに挑戦！
スタイルシートのパワーを最大限に活かします。
CSSを極めたい人もそうじゃない人もぜひ一度は目を通してみてください。
- ステップ0〜はじめに〜
- └参考資料：GIFアニメで見る制作過程(1.6MB)
- ステップ1〜レイアウト用のボックスを作る〜
- ステップ2〜ヘッダーを作る〜
- ステップ3〜左サイドを作る〜
- ステップ4〜イメージ画像とぼやきの作成〜
- ステップ5(1)〜メニュー部分の作成１〜
- ステップ5(2)〜メニュー部分の作成2〜
- ステップ5(3)〜メニュー部分の作成3〜
- ステップ6〜著作権の追加〜
- あとがき
制作実習編LV4
難易度はLV3より低いです。というよりも下げるために作りました。
「逆ハイブリッドデザイン」という手法を使います。少ない労力で最大の効果を得られる方法です。
この手法を解説しているのはうちのサイトだけ！出会えた貴方はラッキーです。
