cssとは

具体的にどのようなものなのですか?
教えていただけると嬉しいです。

回答の条件
  • 1人50回まで
  • 登録:2012/02/11 17:52:21
  • 終了:2012/02/18 17:55:07

ベストアンサー

id:flandlescarlet No.6

八咫烏回答回数83ベストアンサー獲得回数532012/02/12 01:57:35

まずHTMLとCSSのそれぞれの本来の役割について説明します。

HTMLは文書定義
CSSはデザイン思考

HTMLで色付けや文字サイズを変えるタグがあります
HTMLは文書の構造だけを構築する言語です。
ですのでHTMLで全ての色付けを行うという事は本来はタブーということです
そこでCSSが登場します。
ですので一応覚えたHTMLタグで非推奨と呼ばれるものはできる限りCSSで取り巻くという形にしていくのが良いです。

CSSでできる具体的な事としては、やはりデザイン思考ですね
動的処理でJavaScriptが出てきますがここでは置いておきます。

CSSでHTMLの記述を楽にする例

テーブルタグを使った事はあるか分かりませんが
HTMLだけでテーブルタグの背景色を変えようと思った時

<table>
<tr>
<td bgcolor="#555"><font color="red">1</font></td>
<td bgcolor="#555"><font color="red">2</font></td>
<td bgcolor="#555"><font color="red">3</font></td>
<td bgcolor="#555"><font color="red">4</font></td>
<td bgcolor="#555"><font color="red">5</font></td>
</tr>
</table>

このように一個一個に指定したのではないでしょうか!?
しかしCSSでtd要素にアクセスして一個のプロパティと値を指定するだけで

<table>
<tr>
<td class="design">1</td>
<td class="design">2</td>
<td class="design">3</td>
<td class="design">4</td>
<td class="design">5</td>
</tr>
</table>
td.design{
background: #555;
font-color: red;
}

あれだけごちゃごちゃしていたコードがかなりすっきりしました
これがCSSの効果で力です
このコードは短いですがCSSは書くコードが多ければ多いほど効果を増していくものです。
あとCSSにはHTMLだけでは絶対に出来ないデザイン反映もたくさんあります。

td.design:hover{
background: #000;
font-color: red;
}

さっきのCSSのtdの要素ですがhoverをつけてみます。
hoverは「マウスがその要素の上に来た時」という意味があり
マウスが要素の上に乗るとそのCSSを反映させます。
元の背景色が#555(灰色)をhover時に#000(黒)にする事ができます。

他にもデザインには不透明度を変えたり最新のCSS3と言うものでは
文字の角度を変えたり、アニメーション効果を出す事もできます。

http://jsdo.it/event/topics/2011/07/css3showcase

CSS3は比較的新しいもので、HTML5と同様に完全に定義が定まったものではありません
ですので古いブラウザでは対応してない場合が出てきてしまいます。(クロスブラウザという)
でもIE9の発表と同時に最近では大分統一されてきたので使う分には対応してなくても問題ないようなデザインなら使っても良いと思いますね

P.S
CSSの正体を明さらにかして説明すると
CSSのデザインの指定は飽くまでひとつの個体です

○{
△: ×;
}

○:htmlのタグと呼ばれるものが入るしかし両端の$lt;は消す
この時のタグの中身だけの内容を「要素という」(hr , p , img , a)

△:プロパティと呼ばれる「何を!?」にあたる部分をさす
×:値と呼ばれ「どうするか!?」にあたいする部分

全部とは言えませんが基本的にはこんな感じです
○の所には全てのHTMLの要素が入ります
よくCSSで使われるのはspan要素とdiv要素です
HTMLで使っても何も出てこないと思った事はないでしょうか!?
spanとdivは本来CSSやJavaScriptのために用意された汎用タグと呼ばれるものです
spanがインライン要素(前後に改行がつかない[aやbやiに同じ])
divがブロック要素(前後に改行がつく[hrやpやh1と同じ])
つまりspanとdivをたとえにして考えると何もない要素にCSSを使って独自にデザインを作るそれにCSSが使われると考えてもいいと思います

ここで△の何を!?と×のどうするか!?についてですが
予めこれもHTMLと同様に指定があります
△の何を!?に相応する部分ですが、内容としては


background (背景を!?)
border (線を!?)
color (テキストの文字を!?)
font-size (テキストの文字サイズを!?)

なんかがありますね
そこで×のどうするか!?を指定してやります

#000 (#000色にする)
solid 1px #000 (実線で1pxで#00にする:borderの特殊な一括指定方法)
#FFF (#FFFにする)
20px (20pxにする)

こんな感じです、
ですので

background: #000;

としてやると背景を#000にするという指定になります

background: 20px; /* これは対応していない関係 */

じゃぁ△になんでも×を組み合わせたらいいかと言われたらそうでもないです
プロパティや値にはそれぞれ決められた関係がありますので背景を20pxなんて事は出来ません
でも何度も使っているとどれがどれに対応しているかがわかるようになります

ここで一旦CSSについて踏まえると
あらかじめ用意された何を!?に値する部分にどうするか!?の値を付けることによりデザインが作られる
そしてそのデザインをどこに付けるか!?
これをHTMLの要素を指定して決定する
これを表してようやくソースが書けます

span{
background: #000
font-size: 12px;
border: 2px solid #EEE;
font-weight: bold;
}

試しにいろんなタグの要素に上の簡単な△と×に相応する部分を付けたりして
実験するとわかり易いです。

他2件のコメントを見る
id:kuromajosan

しばらく放置していました。すいません。
私が質問したことにあなたが回答するとかならずベストアンサーですね;
凄いです。
どこかでPCの勉強とかしたのでしょうか?
独学ですか?
どちらにしても凄いですよね。
いつも回答有難うございます!

2012/02/23 20:02:10
id:flandlescarlet

返信も遅れましたが
一応PCに関してはWEB関係に重点を置いてやっております。
基本的には学校の情報の授業に興味があっただけで、学校で習わないところは自分で独学したりして知識とかつけてます(はてなブックマークを使うと情報収集に結構便利です)
自分も1年半前ほどまでhtmlを知ったばかりでタグを入れることしか出来ませんでしたけど、やれば身につくのは確かです。
興味があった事から接戦して学んでいくと良いと思いますよ。

2012/02/26 15:51:19

その他の回答(5件)

id:tsu23hiroc No.1

tsu23hiroc回答回数2ベストアンサー獲得回数02012/02/11 18:24:55スマートフォンから投稿

Webページ(HTML)の見た目を定義するものです。
IDを付けて、文字の大きさはこれ、色はこれ、高さや幅はこれ…とCSSに定義しておくと、
そのIDを付けたHTMLのタグの見た目は皆、共通でCSSで決めたスタイルになります。
また、リンクの下線は出さないとか、テーブルの枠は赤にするとか、タグ自体の定義もできます。

id:kuromajosan

大体はそうらしいですね。
ですが、私は具体的に、詳しく知りたいのです(泣)

2012/02/11 18:58:00
id:sugakun No.2

sugakun回答回数2ベストアンサー獲得回数02012/02/11 18:34:12

あなたが見てるこのウェブページなどに
文字の色や大きさを変えるなど
飾り付けをするためのものです。

id:kuromajosan

回答は嬉しいのですが、もう少し詳しく説明していただければと思います。
一人50回まで回答可能ですので、もしもできるのであればもう少し詳しくお願いします。

2012/02/11 18:59:24
id:windofjuly No.3

うぃんど回答回数2625ベストアンサー獲得回数11492012/02/11 18:37:42

(1)スタイルシートって?
「大きさや位置、色などの見た目に関する項目を記した書」です

(2)使い方は?
HTMLでパーツに役割や名前を与えておいて、
スタイルシートで見た目を調整します
HTMLに繋いで使うのでカスケード(繋ぐ/連なる)スタイルシートと呼ばれています

(3)具体的には?
まずは簡単なHTMLを書いてみます

<p id="p1">この段落は左寄せで文字を小さく</p>
<p id="p2">この段落はは右寄せで文字を大きく</p>

結果は以下のようになります


この段落は左寄せで文字を小さく


この段落はは右寄せで文字を大きく



そこにスタイルシートを加えます

<style>
#p1 { font-size:small; text-align:left; }
#p2 { font-size:large; text-align:right; }
</style>
<p id="p1">この段落は左寄せで文字を小さく</p>
<p id="p2">この段落はは右寄せで文字を大きく</p>

結果は以下のようになります


この段落は左寄せで文字を小さく


この段落はは右寄せで文字を大きく



他にもいろいろありますが、一度に説明しきれませんので、とりあえず以上

id:kuromajosan

有難うございます!!
あと、cssタグを配付しているサイトなどを見ると「自作です」などとかいていることがあるのですが、実際に自分の思い通りにするために、自作で作成することは可能なのでしょうか?
HTMLみたくもともとあるタグを利用したりして使うものとは違うのでしょうか・・・?

2012/02/11 19:00:47
id:windofjuly

>もともとあるタグを利用したりして使う

そのとおりです
元からあるものを使います
(cssではタグではなくプロパティと言います)

だから、
自作というのは「cssを自分なりに組み合わせてページのデザインを作ったよ」という意味になります

ちなみに、cssはW3Cという組織がまとめたものを基本としているのですが、
IEやFirefoxなどブラウザが違うと少し違って見えることも多いので、
どのブラウザで見ても同じように見せるようにするのがプロの腕の見せ所となっています

W3Cのサイト(英語なので別に見なくてもいいですが一応書いておきます)
http://www.w3.org/Style/CSS/

2012/02/11 19:14:44
id:Yzseeker No.4

Yzseeker回答回数1ベストアンサー獲得回数02012/02/11 19:00:59

CSSとは、カスケーディング・スタイル・シートの略。
ホームページなど、インターネットで表示させる物を作る時に使います。
もう少し詳しくいうなら、ホームページなどの設計図を書く時に使う、コンピュータ言語の一種…みたいなものです。

たとえば、ホームページに「いらっしゃいませ」と書くとします。
この時、文字の大きさや種類、色などを決めることができますが…
昔はこれを、「タグ」と呼ばれるコンピュータ言語のようなもので、いちいち設定していました。

 「いらっしゃいませ」 ←赤い字で大きく
 「ごゆっくりどうぞ」 ←黒字で中くらいに
 「ここは私のホームページです」 ←いらっしゃいませと同じ色と大きさで

上の三行のみたいな文章を書く場合となると、一行ごとに「タグ」というのをつける必要があったのです。
CSSは、こういう作業をもっと簡単にするための便利なテクニックです。

(A=赤の大きな字 B=黒の中くらいの字)
 「いらっしゃいませ」 ←A
 「ごゆっくりどうぞ」 ←B
 「ここは私のホームページです」 ←A

というように、自分の使いたい文字のタイプや色の組み合わせを最初に「A」「B」…と決めておいて、この文章は「A」タイプで、次はB、その次はAで、最後はCでというように当てはめていく方式。
これが初歩的なCSSのしくみであり、基本的なルールになっています。
応用の幅も広くて、タグを補助したり、タグと同じように使ったり、タグではできないかざりつけなどにも使われます。

今ではCSSとその表示機能も発達していて、写真を派手に表示することや、ホームページを変わったデザインにしたり、文章をたて書きにしたり…という変わったことにも使えます。
ここまでくると複雑で高度な知識・技術が必要になりますが、タグでは無理だったり、同じ事をやろうとしたら何倍も大変であったりするので、やはり便利であることに変わりはありません。

id:kuromajosan

なるほど・・・
ちょっと難しいかな・・・
でも覚えると大分便利ですね。

2012/02/12 18:46:00
id:uwao No.5

uwao回答回数171ベストアンサー獲得回数362012/02/11 19:06:17

スタイルシートはホームページなどのデザインを設定するものですが、ホームページと分離して設定出来るので便利です。
ホームページが100ページあっても、スタイルシートを編集するだけで、全てのページのデザインを変える事が出来ます。
 
Aページ→デザインは「Z」
Bページ→デザインは「Z」
Cページ→デザインは「z」
のようにしておく事で、「z」を編集すると、A、B、Cの全てのページのデザインを変得る事が出来ます。
スタイルシートが無い場合、A、B、Cページと、全てのページを1ページづつ個別に編集しなければなりません。
ページ数が多くなると、とても大変な作業になります。
 
 その他、スタイルシートを使用するとPCからアクセスした時、携帯からアクセスした時、スマートフォンの時で、デザインを変えて見やすくする事も出来ます。
スタイルシートは文字色や文字サイズ、背景色、共通するメニューなど、様々な事を設定出来るので、多くのページやシステムなどを管理する時に大変便利です。
ホームページを作る時は、スタイルシートを別に作成すると良いと思います。

id:kuromajosan

ホームページ、ですか。
たしかに一個一個個別に編集するとしたらとてつもなく大変ですね・・・
そこまで便利なものとは思っていなかったので、結構いいこと知れたかなぁとww

2012/02/12 18:47:48
id:flandlescarlet No.6

八咫烏回答回数83ベストアンサー獲得回数532012/02/12 01:57:35ここでベストアンサー

まずHTMLとCSSのそれぞれの本来の役割について説明します。

HTMLは文書定義
CSSはデザイン思考

HTMLで色付けや文字サイズを変えるタグがあります
HTMLは文書の構造だけを構築する言語です。
ですのでHTMLで全ての色付けを行うという事は本来はタブーということです
そこでCSSが登場します。
ですので一応覚えたHTMLタグで非推奨と呼ばれるものはできる限りCSSで取り巻くという形にしていくのが良いです。

CSSでできる具体的な事としては、やはりデザイン思考ですね
動的処理でJavaScriptが出てきますがここでは置いておきます。

CSSでHTMLの記述を楽にする例

テーブルタグを使った事はあるか分かりませんが
HTMLだけでテーブルタグの背景色を変えようと思った時

<table>
<tr>
<td bgcolor="#555"><font color="red">1</font></td>
<td bgcolor="#555"><font color="red">2</font></td>
<td bgcolor="#555"><font color="red">3</font></td>
<td bgcolor="#555"><font color="red">4</font></td>
<td bgcolor="#555"><font color="red">5</font></td>
</tr>
</table>

このように一個一個に指定したのではないでしょうか!?
しかしCSSでtd要素にアクセスして一個のプロパティと値を指定するだけで

<table>
<tr>
<td class="design">1</td>
<td class="design">2</td>
<td class="design">3</td>
<td class="design">4</td>
<td class="design">5</td>
</tr>
</table>
td.design{
background: #555;
font-color: red;
}

あれだけごちゃごちゃしていたコードがかなりすっきりしました
これがCSSの効果で力です
このコードは短いですがCSSは書くコードが多ければ多いほど効果を増していくものです。
あとCSSにはHTMLだけでは絶対に出来ないデザイン反映もたくさんあります。

td.design:hover{
background: #000;
font-color: red;
}

さっきのCSSのtdの要素ですがhoverをつけてみます。
hoverは「マウスがその要素の上に来た時」という意味があり
マウスが要素の上に乗るとそのCSSを反映させます。
元の背景色が#555(灰色)をhover時に#000(黒)にする事ができます。

他にもデザインには不透明度を変えたり最新のCSS3と言うものでは
文字の角度を変えたり、アニメーション効果を出す事もできます。

http://jsdo.it/event/topics/2011/07/css3showcase

CSS3は比較的新しいもので、HTML5と同様に完全に定義が定まったものではありません
ですので古いブラウザでは対応してない場合が出てきてしまいます。(クロスブラウザという)
でもIE9の発表と同時に最近では大分統一されてきたので使う分には対応してなくても問題ないようなデザインなら使っても良いと思いますね

P.S
CSSの正体を明さらにかして説明すると
CSSのデザインの指定は飽くまでひとつの個体です

○{
△: ×;
}

○:htmlのタグと呼ばれるものが入るしかし両端の$lt;は消す
この時のタグの中身だけの内容を「要素という」(hr , p , img , a)

△:プロパティと呼ばれる「何を!?」にあたる部分をさす
×:値と呼ばれ「どうするか!?」にあたいする部分

全部とは言えませんが基本的にはこんな感じです
○の所には全てのHTMLの要素が入ります
よくCSSで使われるのはspan要素とdiv要素です
HTMLで使っても何も出てこないと思った事はないでしょうか!?
spanとdivは本来CSSやJavaScriptのために用意された汎用タグと呼ばれるものです
spanがインライン要素(前後に改行がつかない[aやbやiに同じ])
divがブロック要素(前後に改行がつく[hrやpやh1と同じ])
つまりspanとdivをたとえにして考えると何もない要素にCSSを使って独自にデザインを作るそれにCSSが使われると考えてもいいと思います

ここで△の何を!?と×のどうするか!?についてですが
予めこれもHTMLと同様に指定があります
△の何を!?に相応する部分ですが、内容としては


background (背景を!?)
border (線を!?)
color (テキストの文字を!?)
font-size (テキストの文字サイズを!?)

なんかがありますね
そこで×のどうするか!?を指定してやります

#000 (#000色にする)
solid 1px #000 (実線で1pxで#00にする:borderの特殊な一括指定方法)
#FFF (#FFFにする)
20px (20pxにする)

こんな感じです、
ですので

background: #000;

としてやると背景を#000にするという指定になります

background: 20px; /* これは対応していない関係 */

じゃぁ△になんでも×を組み合わせたらいいかと言われたらそうでもないです
プロパティや値にはそれぞれ決められた関係がありますので背景を20pxなんて事は出来ません
でも何度も使っているとどれがどれに対応しているかがわかるようになります

ここで一旦CSSについて踏まえると
あらかじめ用意された何を!?に値する部分にどうするか!?の値を付けることによりデザインが作られる
そしてそのデザインをどこに付けるか!?
これをHTMLの要素を指定して決定する
これを表してようやくソースが書けます

span{
background: #000
font-size: 12px;
border: 2px solid #EEE;
font-weight: bold;
}

試しにいろんなタグの要素に上の簡単な△と×に相応する部分を付けたりして
実験するとわかり易いです。

他2件のコメントを見る
id:kuromajosan

しばらく放置していました。すいません。
私が質問したことにあなたが回答するとかならずベストアンサーですね;
凄いです。
どこかでPCの勉強とかしたのでしょうか?
独学ですか?
どちらにしても凄いですよね。
いつも回答有難うございます!

2012/02/23 20:02:10
id:flandlescarlet

返信も遅れましたが
一応PCに関してはWEB関係に重点を置いてやっております。
基本的には学校の情報の授業に興味があっただけで、学校で習わないところは自分で独学したりして知識とかつけてます(はてなブックマークを使うと情報収集に結構便利です)
自分も1年半前ほどまでhtmlを知ったばかりでタグを入れることしか出来ませんでしたけど、やれば身につくのは確かです。
興味があった事から接戦して学んでいくと良いと思いますよ。

2012/02/26 15:51:19
  • id:kuromajosan
    あ、私まだ小学生なアホksなPC初心者なので、本当に詳しく説明してくれないと分かりません。
    詳しくお願いします。
  • id:tsu23hiroc
    であれば、HTMLを学びましょう。
    それができて始めて意味が出るので、
    難しい間はCSSは知る必要はないです。
  • id:kuromajosan
    HTMLは知っています。
    今勉強しているので、そこまで馬鹿ではありませんよw
    リンクや文字の色変更くらいはわかります。
    それにプラスでcssについて気になったので質問をしたのです。
    そこまでわからなければ、多分css自体存在を知っていなかったかもです。

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

トラックバック

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

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

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