cssの解説

cssの使い方をざっと紹介したいと思います。

まずcssとはカスケーディングスタイルシート(Cascading Style Sheet)の略名になります。

cssを簡単に説明すると
物に対して指示をします

物には名前がついています
物を赤くしよう!
その名前のついた物に指示
その指示の方法は3っあり

1.直接指示する場合
2.同じファイル内で外部から支持をする場合
3.ファイルを超えて指示をする場合

と言ったような感じです
cssは2や3の外部ファイルの記述方法が理解できれば
その他の記述も簡単だと思います。

cssはスタイルシートの一種なので、cssはスタイルシートと思ってよいと思います

今のホームページではcssを使って文字の大きさや色を指定したりするのが主流となっています。

ホームページのデザインでは、htmlだけでは、細かく指定できませんので

cssを使って細かくホームページのデザインのレイアウトを行います

≪記述する方法としては三種類あります≫

■1.外部にファイルを用意するか■2.直接bodyに記述する方法■3.head間に記述する方法があります

例えば外部にファイルを用意するメリットとしてはhtmlがスッキリしてスリムな仕上がりになります

図解!記述する方法

burauza30

このように直接bodyに記述します

<div style =”font-size: 14px; color: #0000ff;”>おはようございます</div>

<div style =”font-size: 20px; color: #ff0000;”>こんにちわ</div>

<div style =”font-size: 14px; color: #0000ff;”>こんばんは</div>

burauza26burauza22

head間に直接記述する

このように記述します

burauza24burauza22

<html>
<head>
<title>タイトル</title>

<style type=”text/css”&gt:
<!–
.book {
font-size: 14px;
color: #0000ff;
}

#pen {
font-size: 20px;
color: #ff0000;
}
–&gt:
</style&gt:

</head>
<body>

<div class=”book”>おはようございます</div>

<div id=”pen”>こんにちは</div>

<div class=”book”>こんばんわ</div>

</body>
</html>

外部ファイルを使う

burauza20burauza22

≪htmlの記述方法≫

<html>
<head>
<title>タイトル</title>
<link rel=”stylesheet” type=”text/css” href=”example.css”>
</head>
<body>

<div class=”book”>おはようございます</div>

<div id=”pen”>こんにちは</div>

<div class=”book”>こんばんわ</div>

</body>
</html>

まずメモ帳を用意してcssを書きます。
意味としてはタグの使い方とさほど変わりません

div、p、span、などのも使えます

ちなみにdivはブロック要素でspanはインライン要素
ブロック要素とインライン要素の違いは、
ごく簡単に言うと改行があるかないかです

それでは早速windowsの場合で説明しますと何もない所で
右クリックをして新規作成→テキストドキュメントでメモ帳を開きます

cssの説明1

開きましたら次のように記述します

.book {
font-size: 14px;
color: #0000ff;
}

#pen {
font-size: 20px;
color: #ff0000;
}

burauza21

記述方法としては、ルールはありますが、このように自分の解りやすいようにしてもよい事になります

.book { font-size: 14px; color: #0000ff; }

#pen { font-size: 20px; color: #ff0000; }

head間に記述する方法との違い

≪head間の場合≫

<style type=”text/css”>
<!–
.book {
font-size: 14px;
color: #0000ff;
}

#pen {
font-size: 20px;
color: #ff0000;
}
–>
</style>

≪外部cssファイルの場合≫

<style type=”text/css”>
<!–
–>
</style>は、記述しません

書きましたらファイルから名前を付けて保存でファイル名example.cssと保存します。

この例ではexampleとしていますが、自分の好きな文字で構いません

ちなみに、example(エグザンプル)とは模擬例などでよく使われ言葉です。意味も実例、例題と言った感じです。

cssファイルの保存方法

memo2

example.cssと保存をしましたらwindows のバージョンによっては異なりますが、このようなアイコンで出来上がります

アイコン

これでcssファイルができたことになります。

head間に<link rel=”stylesheet” type=”text/css” href=”example.css”>と
example.cssの部分に作ったものを入れる形になります

この例ではこのように書きます。
.book

bookの部分には自分の好きなものします

クラスは何回でも使えます

クラスは.(ドット)で表します

idは一回しか使えません

idは#であらわします

それとクラスなどを指定しない場合に
div.とするとdiv全体を対象したことになります

cssのごく簡単な説明

ごく簡単に説明するとcssは、その名前のついた物に対してに支持を与えます
【例えば】
<h1 class=”book”>おはようございます</h1>とすると

h1のクラスのbookに書かれている「おはようございます」と言った部分に支持を与える事が出来ます
もちろんdivやpと言った部分につけても良い事になります

<div class=”book”>おはようございます</div>
<p class=”book”>おはようございます</p>

burauza18

cssの書き方のサンプル

e022

書き方の内容

e020

≪例≫cssファイルの中身

外部ファイルの場合は
<style type=”text/css”>
<!–
内容
–>
</style>
囲む必要はないです

↓実際の書き方

body {background-color: #888888;}
strong {color: #00ff00;}
hr { width: 80%;}
span.tokumei1{ text-decoration: underline;}
a {text-decoration: none;}
h1 {font-size: 18pt;}
h2.tokumei2 { width: 900px;}
h3#tokumei3 { height: 50px;}
h4 { padding: 10px 0px 10px 20px;}
h5 { margin: 10px 0px 10px 20px;}
h6 { width: 600px;height: 40px; margin:auto;}
div.tokumei4 {
width: 800px;
text-align: left;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
p.tokumei5 {
width: 800px;
text-align: right;
margin:auto;
border-width:1px;
border-style:solid;
border-color:#888888;
}
ul {
color: #ffcc11;
list-style-type: square;
line-height: 120%;
}
table {
width: 900px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#cccccc;
}
caption {font-size: 14px;}

css作る方法

cssはテキストエディタがあれば良いのでウインドウズであればメモ帳があれば作れてしまいます。
その時に拡張子
名前.cssとして保存します。

head間に記述する

cssファイルが出来上がりましたら
ファイルをサーバーにアップロードする形になるのですが
記述方法として説明だけして置きます。
もしcssファイルを同じフォルダ(同じ階層)
に置くのであればhead間に
<link rel=”stylesheet” type=”text/css” href=”example.css”>として記述します
もし一階層上に置くのであれば
<link rel=”stylesheet” type=”text/css” href=”../../example.css”>と記述する形になります

<html>
<head>
<title>タイトル</title>
<link rel=”stylesheet” type=”text/css” href=”example.css”>
</head>
<body>

</body>
</html>

<html>
<head>
<title>タイトル</title>
<link rel=”stylesheet” type=”text/css” href=”../../example.css”>
</head>
<body>

</body>
</html>

まずはじめに言っておきたい事は
cssの記述の中で、解りやすくメモを書く事が出来ます
例えばこの記号の/**/の間に書いた物は
無視されてコメントとして扱えます

≪例≫
/* この囲われた部分はコメントとし扱われます */
自由に書いて構わないので

解りやすくメモをとることもできます。
/*■■■ここは見出しの部分■■■■*/
などとすると見やすいと思います。

文字の大きさを表す単位

文字の大きさの指定方法として

px
em
pt
%
などが使えます
その他にも色々とありますが、一般的にはpxが良く使われています

書き方も自由で

h6 { width: 600px;height: 40px; margin:auto;}
とこのように一行で書いても良いです

h6 {
width: 600px;
height: 40px;
margin:auto;
}
と複数行に渡っても良いです
h6 
{ 

	width: 600px;
	height: 40px;
	margin:auto;
	}

と半角であれば自分の見やすいようにしても良いです

セレクタ

セレクタとは
スタイルが対象となるh1などの部分です
セレクタ {プロパティ:値}
h1 {color: #ff0000;}
h1の見出しの {文字色を赤くして}
h1 {color: red;} このような書き方もあります

クラス名やid名などを指定する場合
idの場合は→#を前につけます
classの場合には→.を前につけます

div#tokumei1 {color: #ff0000;} id名がtokumei1に対して文字を赤くしてと指示をしています
div.tokumei2 {color: #ff0000;} class名がtokumei1に対して文字を赤くしてと指示をしています

※id名は基本的に一つに対して指示をします
※その点class名ではその名前がついた全てに対して指示をしている事になります
例えば

<div class=”tokumei2″>おはようございます</div>
<div class=”tokumei2″>こんにちは</div>
に対して指示をしている事になります

【実行結果】

おはようございます
こんにちは

h1,h2,h3,h4,h5{ color:#0000ff}
カンマで区切ることで複数の要素に適用させる事が出来ます

余白の指定方法

marginやpaddingの指定方法として書き方はいくつかあります

【4つの場合】
padding: 10px 0px 10px 20px;
上 右 下 左を指定した事になります 。
覚え方としては時計回りと覚えておけば分かりやすいと思います
【1つの場合】
padding: 10px
上 下 左 右を同じに指定した事になります 。

【2つの場合】
padding: 10px 20px;
上下  と 左右 の組み合わせを指定した事になります 。

【3つの場合】
padding: 10px 20px 15px;
 と 左右 の組み合わせを指定した事になります 。

【個別に指定する場合】
margin-top: 50px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

色を変えてレイアウトの調整

サイトのレイアウトは
CSSを使ってデザインをするのですが
なれていないと思うような動きをしてくれずデザインが崩れてしまう事があります
ここで私がサイトのデザインを行う際に行っている事と
今後に忘れないためにまとめておきたいと思います。
ぜひ参考にしてみてください
まずは
CSSのデザインを行う際にそれぞれの要素の背景に色をつけてあげるとわかりやすくなります
勘違いしやすいのは
領域を確保してそこに文字や画像を入れていくように見えますが
実際には貼り絵のようにその領域を確保してそこに当てはめていく形になります
例えばですが
一枚の大きな紙があったとします
その紙を土台にして
長方形の紙や四角い紙を置いていくイメージです



ちなみにこちらが自分のサイトでおこなってみた画像です









相対パス構造

soutai

相対パスとは、フォルダ部分を指定します

絶対パスとはhttp~始まる部分です

ホームページを作る上で使い方によっては
大変な作業になります。
ずっと無料ホームページでやるようていであれば
絶対パスでも良いと思いますが
サーバーを借りて独自ドメインで作るのであれば

相対パスにする事をお勧めします

topから見た場合

soutai1

相対パスケース1

playから見た場合

soutai2

相対パスケース2

相対パスと絶対パス

絶対パスとはhttp~始まる部分を指定します

≪例≫
http://mezasou.comとした場合には
このようになります

相対パスケース3

相対パスの指定方法

下の図を見ると

(1)dir.htmlはindex.htmlと同じ
publicフォルダの中の階層にありますので

index.htmlと指定できます。

soutai3

(2)top.htmlからindex.htmlを指定する場合は
index.htmlは一つ上の階層にありますので
../index.htmlとなります。

もし../をはずしてindex.htmlとした場合は

top.htmlがあるpetフォルダの中にはindex.htmlファイルがないために
存在しないページになります

(3)play.htmlからindex.htmlを指定する場合は
二つ上の階層にありますので
../../index.htmlとします
../を増やしていく形になります

相対パスと絶対パスの違い

≪例≫ 

絶対パスの場合

例えばURLが

http://mezasou.com/myfolder/top-page.html

だとしたら

絶対パスの指定はそのままになります。

相対パスの場合

逆に相対パスの場合は

http://mezasou.com/myfolder/top-page.html

だとしたら


myfolder/top-page.html

の部分を指定する事になります

burauza15

≪解りやすい例だと≫
住所を例にしてみます。
例えば
「 東京都:杉並区 けやき台 / めざ草団地 603号室 」とした場合は

絶対パスはそのまま指定します

相対パスの場合はは
「 めざ草団地 603号室 」
と上の部分は省略します

このエントリーをはてなブックマークに追加
   


スポンサード リンク

 

↑このページの先頭へ