www.wanichan.com

CSSレイアウトページを一から作ってみよう

最終更新日:2008/02/04 22:24:18
Expression Webを使って、CSS段組レイアウトページを作成するための手順を解説します。

はじめに

CSSレイアウト作成がどうしても苦手でテーブルレイアウトでWebサイトを作成されている方向けに、ステップバイステップでExpression Webを使ってCSSレイアウトページを思い通りに作成する方法について解説します。

ここでは、右側のコンテンツを先に記述して、そのあとに目次部分となる左ナビゲーションバーを記述するためのDIVボックスの作成と配置する手順を説明していきます。

CSSに関するチュートリアルサイトはたくさん存在していますが、ここではいかにWeb標準サイト作成ツールであるExpression Webを使って思い通りに作っていくかがポイントとなります。

なお、Windowsモバイル端末に対応させるために、横幅800ピクセルのウィンドウ最大化で横スクロールバーが表示されないように横幅固定します。

リキッドレイアウトでもいいんですが、私は横幅固定が好きなもので・・・。

最終的には、印刷範囲を制御させて、印刷したくない部分とか、どのようにコンテンツエリアを印刷するか?という部分まで触れたいと思います。

実際に検証しながら、メモ書き代わりにこのコンテンツを作ってます。一緒にがんばりましょう!

  1. DIVボックスをページに挿入してみよう
  2. 外部CSSファイルを作成してリンクしてみよう
  3. CSSファイルに新しいスタイルを作成してみよう
  4. DIVボックスにスタイルを適用してみよう
  5. 左の目次よりコンテンツを先に記述したい
  6. 横並びのナビゲーションリンクリストを作るには?
  7. 左サイドバーのリンクリストの先頭記号を画像にするには?
  8. 印刷エリアを制御したい

関連記事

▲Page TOP

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ