人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSを素人に説明したい!

CSSの仕組みや概念について、Web制作などやったことがない(今後もやらない)、極一般的な人(30〜50代の男女)に簡潔に説明したいです。
できれば、概念図なども欲しいです。

私が求めている形がどんなものなのか、上手く説明できませんので、こちらが求めていた形のものでなくても、ポイントは差し上げます。

よろしくお願いいたします。

●質問者: くたくた
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS Web ポイント 制作 差し
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● KUROX
●50ポイント

■ユーザースタイルシートから始めるCSS

http://valid-chan.m78.com/andnow/scsp0016.html

◎質問者からの返答

ありがとうございます。

まず、一行目の「 読者にはある程度のHTMLの知識を要求します。」の点で、今回の目的からそれてしまってます。

あとは、設定の方法とか、作り方を説明するのとはちょっと違います。概念を説明するということですので。

KUROXさんに文句を言ってるわけではないので気にしないでください。私の求めているものが、移行に回答される方に、適切に伝わる為に、書いてます(^_^)


2 ● Q-A
●100ポイント

最初に、Webを外して説明します。

本に例えると

本文

本には大体のパターンがあると思います。

表紙・はじめに・目次・扉付き見出し・見出し・本文……

そこで用意した原稿に印をつけて電子入力します。つまり

タイトルは○?●

段落文は△?▲

目次リストは□?■

と言う具合に

ここまでが電子入力本文のお仕事です。

デザイン

実際に印刷する時には、デザインが必要です。出版社やシリーズによりデザインが決まっています。

ハードカバーなら本文も大きめで、扉をつけて印刷。

新書なら本文を2段にして印刷。

文庫なら文字を小さくして、扉付き見出しは4行見出しにして印刷。

そこでデザイン指示を別途に用意します。すると先ほどの入力されたデータがそのデザインに変わります。本文は変えることなくデザインの指定書を変えるだけで使いまわしができ、かつシリーズで統一できます。


好評を博し、数年後、年配者用に大きな字の本も出す事になりました。

やはり、デザインの指示書で、本文を倍くらい変えて印刷します。

と、あとからいくらでも変えることが出来ます。


htmlとcssに戻すと

先のデータ活用のデザインの作り方を「構造とデザインの分離」と言います。

ホームページの本文はhtmlで製作します。

デザイン部分はカスケードスタイルシートまたはcssというデザインの指示書でします。

そしてhtml側から「どのスタイルシートを使いますと指示するリンク」を貼り、ブラウザに適用させます。ですから、html部分は見出しとか本文とか強調とかのマークをつけるだけ。cssでその意味(見出し・本文)にデザインを付ける事によって最終的にブラウザに表示させるページデザインを仕上げるのです。

◎質問者からの返答

ありがとうございます。

別のものに例えるのもありですね。

もう少し、HTMLとCSSの関連がわかるとベストです。なかなか説明が難しいですね。。


3 ● piko-piko
●75ポイント

仕組みや概念というのが、どのレベルからなのかわかりませんが、自分が説明するなら。

1.見栄えを指定する為の言語

2.文字の色や大きさ・背景のデザインなどを指定できる

3.1つのCSSで複数のページを同じデザインに出来る

こういった内容の話をすると思います。


概念図としては

1.まず、HTMLの日本語版(「見出し”ほにゃらら”」とか)

2.次に、CSSの日本語版(「見出しの色は赤」とか)

3.最後に、出来あがり(見出しが赤文字になっている)

見出しも内容も、短い文章にするとカンタンに出来ると思います。

◎質問者からの返答

ありがとうございます。

概念図に関しては、もうちょっと分かりやすいとベターです。


4 ● minkpa
●25ポイント

http://ja.wikipedia.org/wiki/Cascading_Style_Sheets

◎質問者からの返答

ありがとうございます。

回答いただいて申し訳ないですが、wikipediaとかは、はてなに質問する前に調べてます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ