CSSレイアウトページを一から作ってみよう
最終更新日:2008/02/04 22:24:18
Expression Webを使って、CSS段組レイアウトページを作成するための手順を解説します。
はじめに
CSSレイアウト作成がどうしても苦手でテーブルレイアウトでWebサイトを作成されている方向けに、ステップバイステップでExpression Webを使ってCSSレイアウトページを思い通りに作成する方法について解説します。
ここでは、右側のコンテンツを先に記述して、そのあとに目次部分となる左ナビゲーションバーを記述するためのDIVボックスの作成と配置する手順を説明していきます。
CSSに関するチュートリアルサイトはたくさん存在していますが、ここではいかにWeb標準サイト作成ツールであるExpression Webを使って思い通りに作っていくかがポイントとなります。
なお、Windowsモバイル端末に対応させるために、横幅800ピクセルのウィンドウ最大化で横スクロールバーが表示されないように横幅固定します。
リキッドレイアウトでもいいんですが、私は横幅固定が好きなもので・・・。
最終的には、印刷範囲を制御させて、印刷したくない部分とか、どのようにコンテンツエリアを印刷するか?という部分まで触れたいと思います。
実際に検証しながら、メモ書き代わりにこのコンテンツを作ってます。一緒にがんばりましょう!
- DIVボックスをページに挿入してみよう
- 外部CSSファイルを作成してリンクしてみよう
- CSSファイルに新しいスタイルを作成してみよう
- DIVボックスにスタイルを適用してみよう
- 左の目次よりコンテンツを先に記述したい
- 横並びのナビゲーションリンクリストを作るには?
- 左サイドバーのリンクリストの先頭記号を画像にするには?
- 印刷エリアを制御したい
関連記事
INDEX
問題は解決しましたか?
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!