CSSデザインサンプルについて

ご利用方法

文字サイズの変更について

文字サイズはユーザー様に委ねております。閲覧しておられるブラウザにて一番見やすい大きさに自由に変更可能です。

スタイル切り替えについて

Javascriptが有効な環境ではヘッダー部分に設置のスタイル切り替えボタンで文字サイズの変更ができます。Javascriptが有効でない環境下のユーザー様、大変申し訳ございませんが、上記のようにブラウザ側の指定で変更していただきますようお願い致します。

コンセプトとサイト構成

CSSデザインサンプルは、テーブルデザインからCSSデザインへの移行を考えている方、特に初めてCSSによるホームページ作成/制作を考えている方々の為に、Web標準仕様に準拠したホームページ作成/制作方法を(X)HTMLソース及びCSSソースサンプルと図解を交えて解説しています。今回、初めてホームページ作成/制作を考えていらっしゃる方でも、順を追って内容を参照していただければ対応可能です。

ご訪問時は初心者でも一通りサイト内を見ていただければ、終了時には中級者以上のホームページ作成/制作術を身に付ける事が可能と思います。

サイト構成[ホームページ作成に関係する部分のみ抜粋]

ホームページ作成

• 初級ホームページ作成講座

  HTMLって何。基本中の基本からスタートするCSSホームページ作成ガイドです。

  基本はコピー&ペースト。コピペしたソースを基に、実際にCSSの値を変更してみて下さい。コピペしたソースを いじればいじるほど 早く慣れる事が可能です。変化を目でみて(確認して)覚えましょう。

• 上級スタイルシートレイアウト講座

  CSSのテクニック解説。ここまで分かれば立派なホームページがつくれます。

  初級ホームページ作成講座で解説したCSSレイアウトをベースに、少し発展的なレイアウト構成と、グローバルナビゲーション及び、CSSファイルの記述方法などについて解説します。

ホームページ作成に付随する項目

• レイアウトが崩れる原因

  このコンテンツは必見です。ここが理解できればCSSは怖くありません。CSSの弱点と初心者の弱点はここにあり。

• テーブル&スタイルシートタグ記述量比較

  参考程度に。

• コピペで使うスタイルシートソース

  イチイチCSSのプロパティなんて覚えられない。そんな方の為のコピー用CSSプロパティ一覧。因みにCSSリファレンスではありません。あくまでもコピーして利用する事を目的としています。

• Webセーフカラー

  もはや、どのホームページ作成講座にもありますね。

CSSレイアウトで最も重要な事

当サイトはCSSに特化したホームページ作成を解説していますが、CSSでホームページを作成する際に最も重要なポイントは
(X)HTMLの正しい記述(マークアップ) です。

(X)HTMLがしっかりしていなければ、CSS指定も何の役にも立ちません。また、(X)HTMLがしっかりしていれば仮にCSSが読み込まれなくても、意味のわかる文書構成で表示されてるはずです。初級ホームページ作成講座で、しっかりと(X)HTMLの基本をマスターして下さい。