CSSを素人に説明したい!


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

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

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

回答の条件
  • 1人5回まで
  • 登録:2007/10/04 18:10:14
  • 終了:2007/10/05 19:41:12

回答(4件)

id:KUROX No.1

KUROX回答回数3542ベストアンサー獲得回数1402007/10/04 18:35:16

ポイント50pt

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

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

id:kidaikobayashi

ありがとうございます。

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

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

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

2007/10/05 09:57:54
id:Q-A No.2

Q-A回答回数106ベストアンサー獲得回数162007/10/04 20:38:11

ポイント100pt

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

本に例えると

本文

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

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

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

タイトルは○~●

段落文は△~▲

目次リストは□~■

と言う具合に

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

デザイン

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

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

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

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

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


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

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

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


htmlとcssに戻すと

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

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

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

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

id:kidaikobayashi

ありがとうございます。

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

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

2007/10/05 10:00:53
id:piko-piko No.3

piko-piko回答回数148ベストアンサー獲得回数32007/10/04 21:51:44

ポイント75pt

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

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

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

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

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


概念図としては

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

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

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

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

id:kidaikobayashi

ありがとうございます。

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

2007/10/05 10:03:18
id:minkpa No.4

minkpa回答回数4178ベストアンサー獲得回数552007/10/04 23:52:59

id:kidaikobayashi

ありがとうございます。

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

2007/10/05 10:04:11
  • id:Q-A
    2番回答のQ-Aです。概念図の補足を
    http://www.asahi-net.or.jp/%7Esd5a-ucd/www/image/browsers-works.gif
    では、いかがでしょうか?
    http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
    が元ページでホームページの作り方のサイトなのですが、これからも作らない人に見せるってのはちょっと詳しすぎますので、図だけ見てもらう説明に使うのはどうでしょう。

    あと、同じページのデザイン違いコンテストやブログのテンプレ等、見た目は劇的に代わるけど、中身はおんなじというのを見せるだけでもイメージとしての理解ならできると思います。
  • id:toku4sr4agent
    toku4sr4agent 2007/10/05 14:32:36
    ワードもメモ帳もお使いにならない方なのでしょうか?
    (30代から50代の方)
  • id:kidaikobayashi
    Q-Aさん
    コメント欄の方でありがとうございます。
    私の説明が非常に足りない、分かりにくいので申し訳ないのですが、
    URLの図だと、もうちょっと説明が欲しい感じです。
    ------------
    あと、同じページのデザイン違いコンテストやブログのテンプレ等、見た目は劇的に代わるけど、中身はおんなじというのを見せるだけでもイメージとしての理解ならできると思います。
    ------------
    これは使えますね。

    toku4sr4agentさん
    それは使えるレベルです。
  • id:kn1967
    概念図ってのはある程度の基礎知識があるという前提で作られますから
    基礎知識無しが前提の場合はサンプルを作って見せたほうが早いと思いますよ。

    例えば新聞や雑誌の比較的長い記事を用いて下記のようなものを用意します。
    (1)テキスト
    何の整形もせずにツラツラと醜くなったままで見てもらう。
    (2)HTML
    整形されたものをブラウザで見てもらった後で
    ソースも見てもらい、実は中身はこんなに複雑なんですと説明。
    (3)HTML+CSS その1
    ソースも綺麗に生理整頓されていて、後からの手直しなどが簡単になると説明。
    (4)HTML+CSS その2
    外部CSSとして別ファイルに分けておけば
    サイト全体の修正などが一発で出来たりもして管理性はよりアップ。
    実際の場合は、ベースとなるデザインは外部に
    細かな部分は内部に書くように使い分けますと説明。

    サンプルを造る時間が無いので、以上、コメント欄で・・・。
  • id:kidaikobayashi
    皆さん、ほんとにありがとうございます。
    私の説明では、恐らくこれだ!っていうのは出てこなそうでしたので、作っちゃいました。
    http://www.geocities.jp/kidaikobayashi/CSS.pdf

    「こんなの求めてたのかよ!!」
    「そんなのわかんねぇよ」
    という突っ込みを受けますよね(^_^;)
  • id:piko-piko
    力作ですね。素晴らしいです^O^。私の発言も取り入れていただき、感動しました。ありがとうございます。
  • id:KUROX
    実は私もCSSに関しては良く分かってないのですが(^^;

    HTMLは、主に文字情報だけを持つ
    CSSは、レイアウト関係の指定につかう

    これだけが伝わったら十分なんですよね。

  • id:kn1967
    KUROX 2007-10-05 21:35:39>HTMLは、主に文字情報だけを持つ
    KUROX 2007-10-05 21:35:39>CSSは、レイアウト関係の指定につかう

    レイアウトという単語には文章構造と装飾の両方の意味が含まれてしまうので
    この表現では間違いや勘違いを呼んでしまいます。

    この二つを分けるのであれば、
      HTMLはコンテンツ
      CSSはデザイン
    日本語ならば
      HTMLは内容(文章および文章構造)
      CSSは装飾
    といったところでしょう。


    KUROX 2007-10-05 21:35:39>実は私もCSSに関しては良く分かってないのですが(^^;

    質問を読んだ時点では判っていなくてもかまわないかもしれないが、
    回答を投稿する時点では少なくともある程度理解していないといけないです。
    それは、回答を投稿する前に内容をチェックするのは当然必要の事だからです。
    適当なキーワードで検索した結果を延髄反射の如く貼り付ける行為を繰り返すのは
    いかがなものでしょうか?いいかげんに目を覚ましていただきたいものです。
  • id:Q-A
    pdf拝見しましたが、概念はともかく、実際の記述は含まれないほうが良いのでは?と思います。そのーーー、kidaikobayashi さんもわかっておられないことが、露呈してしまってます。本当にこれからもソースを書かない人ならいいですが、書く人には有害です。
  • id:kidaikobayashi
    Q-Aさん

    ご指摘どうもです。
    対象となるのは、これからもソースは書かないと思われる方々だけです。
    確かに色々と端折って書いてるので、説明不足の感じはしますが、これ以上細かく(正確に)書く必要はないかなぁと思いました(特に今後もソースを書く様な人ではないので)。

    あと、何か間違った記述ってありました?(ポイントを付けられない質問ですので、お答えいただかなくて構いませんよ)
  • id:Q-A
    >CSS とHTML の直接記述がバッティングした場合は、後に記述した方が優勢になります。
    これ間違いですよ。cssの得点制です。見本のfontはタグとして、パワーが弱い(全称セレクタ並です)ので、font colorの記述は負けますよ。
    ということで、見本だと、両方赤になる筈です。
    http://hp.vector.co.jp/authors/VA022006/css/cascade.html?jouyou_l#calculating-specificity

    同点の場合は後ろの方が強いです。

    それと、実際の記述にdivやfontを使用するのは如何なものかと。今の場合ですと<p>や<strong>の方が適切な気がします。それこそ、構造とデザインの分離が出来てないゾと突っ込まれますよ。

    <p>は段落をさします。<div>は意味をつけがたいブロック要素に使用し、<span>は同じくインライン要素に使用します。構造化するということは文章に意味付けすることなので、こういう説明にdivを使う事がもう、わかっていないと思わせます。

    <font>も同じです。なぜ<font>を部分的に使うのか?強調したいなら<em>を使います。もっと強調したいなら<strong>を使います。cssを説明するには意味付けが大切な要素ですので、物理タグは使用しないほうが概念説明もすっきりしますよ。

    中傷したいわけでも怒らせたい訳でも恥をかかせたい訳でもないです。ポイントはいいです。アフターサービスです。kidaikobayashi さんが理解されればいいので、もし希望でしたら、後ほど朝とこのコメント消します。
  • id:kidaikobayashi
    Q-Aさん
    ありがとうございます。

    >これ間違いですよ。cssの得点制です。見本のfontはタグとして、パワーが弱い(全称セレクタ並です)ので、font colorの記述は負けますよ。
    ほんとですね。いやぁお恥ずかしい、全く知りませんでした。
    <font>タグ自体、ここ数年?使ってなかったってのもありますが、そもそもタグの順位付けがあることを知りませんでした。ここの部分は、ちょっと変えた方が良いですね。

    >それと、実際の記述にdivやfontを使用するのは如何なものかと。
    理由あって<font>タグを説明の際に利用するのはしょうがなかったのです。<div>を使ったのも、別に<p>でも良かったのですが、今回は構造化の話ではなかったので、意味を持たない<div>を利用しました。。。でもそれならdivではなくて、fontと同じインライン要素のspanを使用すべきでしたね。

    >中傷したいわけでも怒らせたい訳でも恥をかかせたい訳でもないです。
    ええ。誹謗中傷とは全く思ってませんよ。いろいろと問題点を指摘いただいて、非常に参考になりました。ちょっと修正を加えてみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません