CSSレイアウト実践講座
SEOにも強く、表示も速くなるCSS(スタイルシート)によるホームページレイアウトの実践講座です。
CSSレイアウト実践講座について
運営者プロフィール
運営者ブログ*
お問い合わせ
CSSレイアウトの魅力と注意点
[魅力]SEO対策に効果的
[魅力]ソースの軽さ
[魅力]表示の速さ
[魅力]容易なデザイン変更
[注意]ブラウザによる表示の違い
CSS基礎講座
[記述法]タグに直接記載
[記述法]HTMLのヘッダーに記載
[記述法]外部ファイルに記載
[記述法]idとclassの違い
[記述法]METAタグの記述
CSSリファレンス
幅・高さ・背景・罫線関係
レイアウト・余白関係
フォント・テキスト・リスト・テーブル関係
アルファベット別CSSプロパティ一覧
カラーリファレンス
2段組CSSレイアウト実践講座
2段組レイアウトのイメージ
表示させる優先順位を決定
外枠を作る
ヘッダー・フッターの設置
メインスペースの枠を作る
サイドバーの枠を作る
clear指定は忘れずに
3段組CSSレイアウト実践講座
3段組レイアウトのイメージ
表示させる優先順位を決定
外枠・ヘッダー・フッター
左右・センターの幅を計算
2:1の枠を作る
3段組に仕上げる
4段組への応用
CSSレイアウト崩れの原因
パーツの合計幅が外枠よりも大きい
締めのdivタグの過不足
回り込み解除(clear)の指定忘れ
ブラウザによる「padding」の解釈の違い
スペースの幅を超える画像の掲載
ブラウザによる「border」の解釈の違い
CSSレイアウトはサイズ決定が命
XHTML基礎講座
XHTMLとは
XHTMLでのタグや属性の書き方
XHTMLでの終了タグの書き方
装飾は全てCSSで制御
XML宣言とDOCTYPE宣言を記載
属性の省略は不可
XHTMLでのサイト作成まとめ
サイトパーツの作り方
グローバルナビ(インライン版-1)
グローバルナビ(インライン版-2)
グローバルナビ(ブロック版)
メニューリストのHTML構造
メニューリストのリストマークを画像に
メニューリストのリンク部をブロック化
サイト作りに役立つCSSの使い方
サイト作成関連書籍
CSS関連書籍
HTML関連書籍
PHP関連書籍
ムーバブルタイプ(MT)関連書籍
ワードプレス関連書籍
文章の書き方関連書籍
ウェブデザイン関連書籍