CSSとは?


《CSSとは・・・美味しい料理を、より美味しそうに、『映え』させるための、味付け? 盛り付け??》


  • CSS…オイスターソース

CSSとは?


C・・・★カスケーディング (段々の階層構造の)

S・・・★スタイル(~様式の、~流の、~風の)

S・・・★シート(薄紙、延板、印刷物)


の略です。

あいうえお作文風に言うと……、


階層構造を持った!

様式の!

印刷物!


という事になりますね。これに当てはまるモノといえば……、

 トランプ!

 これは正にそうですね。『トランプ』という1組 52枚 のカードがあって、その中には4つのマークがあり、さらにその中に13の数字があてはめられている。『トランプの、ハートの、エース』と条件を絞り込んでいくと……、

この1枚にたどり着きます。


これを料理に例えると……、

東洋の、中国の、料理の、牛肉と、ピーマンと、タケノコの、細切りの、オイスターソースの、炒め物。

と絞り込むと……、

青椒肉絲

これにたどり着く。とても美味しそうですね。

斯様に、CSSとは、

『サイトのデザインの、より細かい部分により細かい効果を加えるための条件を絞り込むための言語』

という事になります。


 しかし……、

CSSそれ自体は何の表現能力も持っていません。

CSSとは、HTMLに読み込ませる形で初めてその効果を発揮する事が出来ます。

つまり……、

オイスターソースなんですね。

皿の上にオイスターソースを塗りたくってもそれは料理とは言いませんね。CSSはHTMLという料理に足す事で初めて妙味を加え、より一層美味しくする事が出来るんです。

HTMLとは?


CSSの書き方とルール★


まずはこれがCSSの正体です。


body{

font-size:15px;color:red

}


この中には重要な3つの要素が隠れています。

それは

セレクタとプロパティと値。

です。


ではもっとわかりやすいように

1.セレクタ 2.プロパティ 3.値

色分けすると……。


body{

font-size:15px;color:red

}


こうなります。さらに日本語にすると……、

セレクタ{

プロパティプロパティ

   }

となります。

このCSSがどんな条件を絞り込んでいるのかというと……、


『HTMLのbody要素の中に書かれたすべての文字のサイズ15px(ピクセル)にしてにする

という条件絞り込んでいます。


body{

font-size:15px;color:red

}


では書き方をさらに細かく見ていきましょう!


★{(いただきます)と、 

}(ごちそうさま) ★


セレクタの後に、波括弧 を入れます。そしてプロパティを書いた後、波括弧 で閉じます。 つまり……、

いただきます と、

ごちそうさま です。



プロパティは コロン:で区切ります。

コロン:です。上と下が同じ点々のコロン。プロパティ区切りです。

:『コロン』

小さじ1 


プロパティを連続して記述したい場合は、プロパティごとに、セミコロン;で区切ります。★

左のコードは、文字の大きさに続き、文字の色も指定しています。こんな風に、プロパティ連続して記述したい場合はセミコロンで区切ります。

セミコロン』

です。

*上が点、下がオタマジャクシ(?)の点々セミコロン。

小さじ1醤油大さじ3


CSSをHTMLの何処に記入する?★


これは大問題です。

これがわからないとどんな美味しい調味料も無用の長物です。

デタラメなタイミングでデタラメな量を入れると、

その料理は失敗です。

ここでは一番基本的HTMLを使って説明します。


↓《基本的なHTML》↓


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

ここに文字が入ります。』

</p>

</body>

</html>


bodyタグの中の段落を表す<p>タグを作り、

『ここに文字が入ります。』

というゴシック体』で書き込んでみました。


これからこのCSSを使って色々いじってみましょう。


CSSを書き込む3つの方法


《HTMLCSSを書き込むには3つの方法があります。


  1. HTMLの随意のタグの中にstyleタグを作り、直接CSS書き込む。
  2. HTMLのheadタグにstyleタグを作り、CSSを書き込む。
  3. CSSファイルを作ってHTMLのheadタグに読み込ませる。

これを料理に例えると……、

  1. 肉にあらかじめオイスターソースを揉み込んでおく。
  2. 炒めている途中でオイスターソースを加える。
  3. 料理の仕上げでオイスターソースを絡める。

となります。

では実際にこの3つの方法で、HTMLCSSを読み込ませてみます。

完成したHTMLはブラウザソフトに読み込ませて実際にその効果を見てみましょう。もし思った効果が見られない場合は、どこかに余計な括弧スペースが無いか確認してみましょう。 

ブラウザソフトに読み込ませる方法は、

HTMLファイルをブラウザソフトに読み込ませる方法 

で紹介します。


その1

HTMLの随意のタグの中にstyleタグを作り、直接CSSを書き込む方法。

(肉にあらかじめオイスターソースを揉み込んでおく。)


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style=font-family:serif”>

『ここに文字が入ります。』

</p>

</body>

</html>


<p>タグ段落タグ)の中に直接styleタグを書き入れます。


<p style=font-family:serif>


ここでは、フォントserif(明朝体)で表すタグを書き込んでみました。

そしてこのHTMLファイルブラウザソフトに読み込ませると……、

ブラウザソフトに読み込ませた画像

お!出来ましたね『ここに文字が入ります。』明朝体で表示されました。


 あらかじめ『肉にだけ揉みこんでおいた』ため、

それ以外にオイスターソースの味は絡みません。つまりこの方法では、タグを打ち込んだ要素(この場合は<p>タグ)にしか機能しません。

続いて……


その2

HTMLのheadタグの中にstyleタグを作りCSSを書き込む。

(炒めている途中でオイスターソースを加える。)


<!DOCTYPE html>

<html>

<head>

<style>

p{

font-family:serif;color:red;

}

</style>

</head>

<body>

<p>

『ここに文字が入ります。』

</p>

</body>

</html>

今度は文を明朝体で、さらに赤くしてみます。


p{

font-family:serif;color:red;

}


ブラウザソフトに読み込ませた画像》

お!出来ましたね。『ここに文字が入ります。』明朝体で、さらに赤く表示されました。

 このやり方はその他の条件(例えば、<h2>など)も別のプロパティで指定すると、その条件に当てはまる文字だけに反映させることが出来ます。


 炒めている途中にオイスターソースを入れる事で、具材を指定して味付けることが出来ます。

続いて……


その3

CSSファイルを作ってHTMLのheadタグに読み込ませる。

(料理の仕上げにオイスターソースを絡める。)



『test.css』


@charset”UTF-8“;

p{

font-family:serif;
color:blue;
font-size:30px;
}


『HTML』


<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”test.css”>

</head>

<body>

<p>

『ここに文字が入ります。』

</p>

</body>

</html>

 まずはHTMLに読み込ませるCSSファイルを作成します。ファイル『文章作成ソフト』で作成します。

 以前にも書きましたが、CSSとは料理ではなく、

妙味を添えるための調味ソース

なのです。

 だからまず『これは料理ではなくて調味料ですからね、そのまま舐めないでね』宣言しなければなりません。


そのために、まず一列目に以下のように記入します。


@charset”UTF-8“;


これは『この文はUTF-8 形式で記入されています』という宣言です。これで様々な環境での文字化けを防ぐわけですね。


 この後にCSSが続きます。


今回は、<p>タグ『ここに文字が入ります。』を、


フォント明朝体にして、

青色にして、

文字のサイズ30px

にしなさい。


という指示を書いてみましょう。


@charset”UTF-8“;

p{

font-family:serif;

color:blue;

font-size:30px;

}


書けたらファイルを ctrl + S で保存します。拡張子は『.CSS』で。

文章作成ソフトは『サクラエディタ』です。

ファイル名は仮に『test.css』としておきます。



これが『CSSファイル』になります。

注目!

CSSファイルはデスクトップに仮フォルダというフォルダを作って保存しておいてください。


<link rel=”stylesheet” href=”ファイル名.css”>


 この<link rel>タグは、ファイルを読み込む事を指示するHTMLタグです。以下に続いているのはその詳細です。


link rel=・・・『これから読み込むファイルは……』

“stylesheet”・・・『スタイルシートという形式で。』

href=・・・『そのスタイルシートは……』

“test.css”・・・『”test.css”という名前です。』


という意味です。このタグ

HTMLheadタグの中に書き込みます。


●ファイルの階層問題●


先程、

注目!

『CSSファイルはデスクトップに仮フォルダを作って保存しておいてください。』

と言いましたが、それは、HTMLファイルCSSファイル同じ階層にしたかったためです。

 同じ階層にしないとHTMLファイル名を指定しただけではそのファイルを読み込むことが出来ません。

 この『階層』というのはロシアのお土産として有名な、マトリョーシカ人形の様な構造を想像してください。

フォルダの中にフォルダがあってまたその中にフォルダがあって……。

まあ、とにかく……、

 同じフォルダなら同じ階層

という事ですね。ですからこれから作るHTMLファイルもこの同じ『仮フォルダ』に入れたいと思います。


やり方はこれまで通り、headタグに上記の

<link rel=”stylesheet” href=”test.css”>

を書き込んで、ctrl  + s で保存します。

『文章作成ソフト』はサクラエディタです。

そしてHTMLファイルブラウザソフトで読み込むと……。

HTMLファイルを読み込んだところ。

お!出来ましたね。ちゃんと明朝体で、青くて、30pxになってます。


最後にサッと絡めるオイスターソースは正に味の決め手。いろんなソース(条件)を絶妙にブレンドして、『スペシャルソース』に仕上げましょう!


こんな感じになります。

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です