CSS 使い方

CSSとは


CSSとは何か？
CSSの使い方が分からないので
基本的な事を知りたい。

CSS の使い方はいたって簡単です。




CSS (Cascading Style Sheets) は、
ウェブページのスタイルを設定するコードで、
スタイルシート言語です。

ミ二と、
博士の会話をご覧ください。
どちらのキャラクターも
AIをモデルにしています。




ミ二は女子学生風のAI、
博士は大学教授風のAIです。

博士の研究室


博士、今日は何の話ですか？




今日は、CSSの話をします。
CSSはウエブページのスタイルを設定するコードです。
知っていますか？
ミ二。




詳しくは知りませんが、少しなら知っています。
博士。




それでは、基本的な事から説明します。

CSSの使い方


CSSのコードを作成するには、
まず新しいファイルを作成しなければいけません。
ファイル名は style.cssとしておきます。
他の名前でも構いません。




デイレクトリも作成します。
ファイルは、
そこに置くようにしてください、
デイレクトリ名はstylesとしておきます。
よろしいですか？ミニ。




はい。
次を続けてください。
博士。




index.htmlファイルのheadに、



（ボイスは下のコードを飛ばしてください）
<link href="styles/style.css" rel="stylesheet" type="text/css">



を張り付けます。
よろしいですか？ミニ。




はい。
メモリーに記憶がありました。
続けてください。
博士。




スタイルの簡単なコードを書きます。

p {
  color: green;
}





コードの説明をします。
HTMLのp要素は、セレクターになります。
スタイルを設定するには、
セレクターでHTMLの要素を選択します。




波カッコの｛｝は宣言です。
この中に設定するスタイルを記述します。
宣言は、
プロパテと、プロパテ値を持ちます。




ここでは、colorがプロパテで、
greenがプロパテイ値です。




プロパテの後ろにコロン : が来て、
プロパテ値の後ろにセミコロン ; が来ます。




波カッコの｛｝の中に、
複数のプロパテイを設定することも出来ます。



p {
  color: green;
  width: 100px;
  border: 1px solid black;
　}



コンマで区切ると、
複数の要素も選択できます。



p,h1 {
  color: green;
}



ミ二さん、分かりましたか？




博士、もちろんです。




今日はここまでです。




セレクタには様々な種類があります。
記載しておきますので、
良かったら参考にしてください。

様々なセレクタ


要素セレクタ、
HTMLの<p>や<h1>などです。




全称セレクタ、
スタイルのセレクタは　*　です。
すべての要素が対象になります。




IDセレクタ、
<p id="id名">　スタイルのセレクタは　＃id名　です。




classセレクタ、
<p class="class名">　スタイルのセレクタは　.class名　です。　




属性セレクタ、
スタイルのセレクタは例えばa[title]、
指定された属性を持つページ上の要素が選択されます。




疑似クラスセレクタ 、
<a> スタイルのセレクタは a:hoverでは、
マウスが上にあるときのみ選択されます。 




疑似要素セレクタ、
スタイルのセレクタは、例えばp::first-lineでは、
要素の特定の部分を選択する擬似要素です。
要素内の最初の行が選択されます。




結合子、
スタイルのセレクタが、例えば　article > p　では、
<article> 要素の直接の子である<p>になります。