CSSでWebサイトのレイアウト組み＋装飾の基本プロセス...

CSSでWebサイトのレイアウト組み＋装飾の基本プロセス

CSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ 実践で学ぶWebサイト制作ガイド：その7 目標：CSSでレイアウトが組める・基本的な装飾ができる 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：CSSの基礎知識がある・基本的なCSSが手打ちで書ける 目次 誰のため？何のため？Webサイトを作り始める前に。 Webサイトの構成図を簡単に作れる便利ツール Webサイト設計図 - ワイヤーフレームの作り方 PhotoshopでWebサイトのデザインをしよう Photoshopでスライスし、パーツ画像を作成するコツと方法 文書構造を意識しながらHTMLマークアップしよう！ CSSでWebサイトのレイアウト組み＋装飾の基本プロセス ←今ここ 公開する！（準備中） 事前知識は以下のサイトでおさらい！ サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、 学習目的以外でのご利用はご遠慮ください 。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 CSSでHTMLページを組み立て・装飾 基本設定 まず「style.css」というCSSファイルを新規作成し、HTMLファイルと同じフォルダ内に保存します。 HTMLファイルにCSSを読み込む 次にindex.html を開き、 〜 内にCSSファイルへのリンクを貼ります。これで index.html にこれから記述していくCSSが読み込まれるようになります。 文字コードの設定 日本語を使用する場合はCSSファイルの一番最初の行に文字コードを指定しておく必要があります。 @charset "utf-8"; デフォルトのCSSをリセット 各ブラウザーではデフォルトでCSSが設定されています。しかしその設定はブラウザーによって異なるので、一度すべてリセットしておいたほうが思い通りのスタイルを表現しやすくなります。詳しくは「 HTML初心者が知っておくべきリセットCSS と3つのポイント

http://www.webcreatorbox.com/tech/basic-css-process/