CSSとは?


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



CSSとは?


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

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

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


の略です。

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


階層構造を持った!

様式の!

印刷物!


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

 トランプ!

 トランプは正にそうですね。1枚の『トランプ』には3つの階層構造で印刷されています。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

}


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

セレクタ{

プロパティ(文字の大きさ)15ピクセルプロパティ(文字の色)

   }

となります。

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


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>


これが基本的なHTMLなんですが、実際に表示されるのは開始bodyタグ<body>と、閉じbodyタグ</body>の間に記入したデータだけです。今回はそのbodyタグの中にさらに段落を表す<p>タグを作りその中に、

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

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


ゴシック体

じゃあこれからこの文を、3つの方法で色々いじってみましょう。


CSSを書き込む3つの方法


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


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

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

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

となります。

CSSを追記したHTMLは、ブラウザソフトに読み込ませて実際にその効果を見てみましょう。もし思った効果が見られない場合は、

99%~100%、データの入力ミスです。

どこかに余計な括弧スペースが無いか確認してみましょう。 

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

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

で紹介します。


その1

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

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


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style=font-family:serif”>

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

</p>

</body>

</html>


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

『HTMLに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タグに読み込ませる。

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




@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とは料理ではなく『妙味を添えるための調味ソース』なのです。

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


CSSファイルの作成


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


@charset”UTF-8“;


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


 この後にCSSが続きます。


今回は、『ここに文字が入ります。』を、


フォント明朝体にして、

青色にして、

文字のサイズ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になってます。


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


こんな感じになります。

HTMLファイルをブラウザソフトで読み込む方法


《HTMLファイルをブラウザソフトに読み込ませるには・・・ドラッグ&ドロップ? それだけ??》


 作成したHTMLファイルがちゃんと機能しているかどうか、公開する前に是非、確認したいですよね。


 確認するためにはに HTMLファイル文章ファイルコピー&ペーストして、ブラウザソフト 上に ドラッグ & ドロップで完了!!

 え!それだけ?? はい、それだけ。

あ、そうそう……。

その際、前もってファイルの拡張子を『html』に書き直します。(これは必ず。これを忘れると無視されます……。)


 以上です。簡単でしょ??

HTMLとは?


《HTMLとは・・・炒め物、煮物。ん? 何の??》


★head (頭)と body(体)の関係 ★


かの天才彫刻家、ミケランジェロは、その代表作『ダビデ象』を足から彫ったと言われていますが、それは自分の才能を誇示したいためだったと言われています。

『こんな難しい事だって出来ちゃうもんね!オレ、天才だから!』

という。

でも我々凡人は……、

やっぱり頭、そして体の順番ですよね。


HTMLとは・・・(HYPER TEXT MAKEUP LANGUAGE)の略です。

 HTMLはまず、

<!DOCTYPE html>

日本語訳……「初めまして!私はHTMLです!」

と宣言します。

これは旧約聖書で言うところの

『光あれ!』

のようなモノ。

ここからすべてが始まった! 


それから<html>『生物』、<head>『頭』、<body>『身体』の順で、だんだんその正体を明らかにしていきます。


とりあえず書いてみます。


<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


これがHTMLの正体です。

ここでは『初めまして!HTMLでこざいます。』という文字を表示するのに最低限必要なタグを表示してみました。

これだけでも表示はされますが……、

 でも本当はもっといろいろ……、

例えば、


<HTML>タグの中に、使用する言語の種類を宣言する lang=”ja”を入れたり、

<html lang=”ja”>・・・このHTMLの言語(lang)は、日本語(ja)です。


●headタグの中にtitleタグを入れて サイトのタイトル名を入れたり,

<head>
<title>HTMLのページ</title>
</head

このサイトのタイトルは『HTMLのページ』です。


●同じくheadタグの中に、文字化けを防ぐためのコードを<meta>タグで入れて宣言したり、

<head>

<meta charset=”UTF-8″>

</head>

このテキストはUTF-8属性で記述してます。

などなどたくさんの要素があります。


しかしさっきから知ってて当然みたいに

タグ、タグって言ってるけど、タグって?


《tag(タグ)とは?》

<head><body>のように、<>で囲まれた文字の事を言います。


『これは記号ですからね。文字じゃないからそのまま表示しないでね。』


という意味です。
この<>の中にどんな文字が入るかでその働きが決まります。初めのタグを<開始タグ>といい、最後のスラッシュが入ったタグ</閉じタグ>と言います。

上のタグを入れるとHTMLはこう進化します。


<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8“>

<title>HTMLのページ</title>

</head>

<body>

<p>

『初めまして!HTMLでございます。』

</p>

</body>

</html>


おお!<head>タグの中の情報が増えて、より知的な生物の姿が浮かび上がってきました。

飽くまで、イメージですけど……。


タグの種類そりゃあもう数限りなくありますから、その種類と働きについては

TAG-index

さんの方でわかりやすく、端的に、且つ詳しく紹介されていましたので是非ご参照ください。


 じゃあ試しに まず、この上のHTML文章ソフトに書き写してみます。


『メモ帳』に記入。

ファイルの拡張子を『html』に変更します。

拡張子をhtmlに変更。

そしてこのファイルをブラウザで読み込んでみましょう!

↓↓↓

HTMLファイルをブラウザソフトで読み込む方法


ブラウザソフトの画面。

はい出来た!!

ちゃんと表示されました。されましたが……。


So what!?

(だから?何だというんだい?)


な感じがしませんか?


え?出来たって……、 

なに炒め? なに味? 何料理? 煮物? 焼き物?


斯様に……、


HTMLとは文字や画像を表示するための形式、道具

の事であって、

情報(料理)を乗せるプラットホーム(お皿)の事で、

実際の内容の良し悪しは、

それぞれの情報そのもの

である事は言うまでもありませんね。

切って、煮て、焼いて、盛り付けて……、

so what??

ではなく


何を、どう面白く、見易く、興味深く見せるか。魅せるか。

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


厨房(HTML)、食材(情報)、そして料理人(運営者)。この三つが揃ってはじめて料理(サイト)が出来る。味付けはセンス。料理人の感性、フィーリングに任される。調味料(CSSなど)をうまく使って、美味しい料理(有用なサイト)を完成させよう!!

例えられるかもしれません。


CSSとは?

カスタムリンクとは?


《カスタムリンクとは・・・カスタムな、リンクの事か……。》


そもそも『カスタム』とは何か?


『カスタム』という言葉の意味は、


習慣、風習、慣例、関税


 だ、そうです。

『関税』はちょっと違いそうなので、

この場合、『習慣風習慣例』を用いて、

『例の、いつもの、毎度の』

解釈してみます。

つまり『カスタムリンク』とは本来、

サイト管理者の都合や好みに合わせて、

サイトの好きな場所に、自由に貼れるリンク。

解釈できそうです。


HTMLでは『<a href=””>~</a>タグを使いますが、地の文章中に散らばったリンクを探し当てるのはとても面倒で効率が悪いため、

 WordPressに搭載されている『カスタムリンク機能』ではそれをメニューに割り当てる事で、閲覧者より簡単に、より自由にリンク情報閲覧をできるように工夫されています。


これを飲食店に例えると……。

きまぐれマスターの『日替わりお薦めランチ!!』


と例えられるかもしれません。


★カスタムリンクを作る★


まず、『外観』⇒『メニュー』メニューページを開きます。


『投稿』・『カスタムリンク』・『カテゴリー』のなかから、

『カスタムリンク』をクリックします。(上図 コレ。1)

メニューは、とりあえず『トップメニュー』を選びます。(上図、コレ。2)


カスタムリンク編集画面2

URL の欄随意のサイトのアドレスを書き込みます。 (上図 コレ。1)

リンク文字列にはリンク名を書き込みます。 (上図コレ。2)

《ココでは仮に、アドレスを私のネットショップ『suzuri』

サイト名『net shop』にしてみました。》

そして『メニューに追加』(コレ。3)をクリックします。


カスタムリンク編集画面3

追加した『net shop』メニューの一番下に追加されています。それを一気に、一番上『home』までドラッグ!

カスタムリンク編集画面4

そして『home』の副項目にドロップ!

ドロップしたら、『メニューを保存』をクリック。(上図 コレ。)

じゃあ、実際、『トップメニュー』『カスタムリンク』が設定されたか見てみましょう!

カスタムリンク編集画面5

『home』にカーソルを合わせると、『net shop』と副項目が表示されました。クリックしてみると……。(上図 コレ。)


カスタムリンク編集画面6

ちゃんと、リンクしてました。

ご来店お待ちしております。