CSSとは
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語です。
HTMLだけだと文字と画像が表示されるだけですが、CSSを用いることで、デザインを整えることができます。
CSSのサンプル
CSSは、HTMLとは別のファイルに記述します。
HTMLの要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定することができます。ここでいう要素とは<h1>,<p>などのことを指します。
下の例では、「h1要素の」「color（色）を」「red（赤）」にしています。
（このときの対象(要素名)をセレクタ、変更項目をプロパティと言います）
h1が「どこの」、colorが「何を」、redが「どうする」ということになります。
<!--index.html-->
<h1>nabelog</h1>/* stylesheet.css */
h1 {
color: red;
}文字の色
文字の色を変えるcolorプロパティについて説明します。「color: #ff0000;」のように、16進数のカラーコードで色を指定できます。
(また、主要な色であれば、redなどのように指定することができます)
指定したい色は以下のようなサイトで調べてみてください。
<!--index.html-->
<h1>赤です</h1>
<p>青です</p>/* stylesheet.css */
h1 {
color: #ff0000;
}
p {
color: #0000ff;
}CSSの文法
CSSを書くときも、以下のようにインデント（字下げ）を付けます。
さらに、CSSのプロパティの末尾にはコロン（:）、行末には セミコロン（;） をつける必要があります。
HTMLと同様に、CSSファイルにもコメント（実行されない記述）を記載できます。
CSSの場合は/* */で囲んだ行がコメントになります。
/* インデント,;(セミコロン)がない→不正解 */
h1 {
color: #ff0000
}
/* インデント,;(セミコロン)がある→正解 */
p {
color: #0000ff;
}文字の大きさ（フォントサイズ）
文字の大きさを指定するにはfont-sizeプロパティを使用します。
font-sizeは、px(ピクセル)という単位で指定します。
pxを書き忘れないようにしましょう。
<!--index.html-->
<h1>赤でフォントサイズ10pxです</h1>
<p>青でフォントサイズ20pxです</p>/* stylesheet.css */
h1 {
color: #ff0000;
font-size: 10px;
}
p {
color: #0000ff;
font-size: 20px;
}文字の種類（フォントの種類）
font-familyプロパティで、フォントの種類を指定することができます。「 font-family: フォント名; 」とすることで、要素にそのフォントが適用されます。フォント名にスペースがある場合は、ダブルクォーテーションで囲みます。
<!--index.html-->
<h1>serif</h1>
<p>ヒラギノ角ゴ</p>/* stylesheet.css */
h1 {
font-family: serif;
}
p {
font-family: "ヒラギノ角ゴ ProN";
}背景色
背景色を指定するにはbackground-colorプロパティを使用します。
<!--index.html-->
<h1>背景色はグレー</h1>/* stylesheet.css */
h1 {
background-color: #808080;
}横幅、高さ
要素の横幅、高さを変更したいときには、widthプロパティ、heightプロパティを使用します。
width, height共にpxで指定していきます。
<!--index.html-->
<h1>nabelog</h1>
<img src="http://nabelog.org/xxxxxxxx.jpg">/* stylesheet.css */
h1 {
width: 500px;
height: 80px;
}
img {
width: 500px;
height: 200px;
}特定の要素を指定して適用（class）
<li>要素が複数ある場合に、全てのリスト要素ではなく1つのリスト要素だけを赤くしたい場合はclassを指定する事で特定の要素を指定します。
classによって、要素を識別し、各々にCSSを適用できます。
class名でCSSを指定する場合、先頭にドット「.」が必要な点に注意してください。
<ul>
<li>ヒソカ</li>
<li class="selected">クラピカ</li>
<li>キルア</li>
</ul>li {
color: blue;
}
.selected {
color: red;
}まとめ
いかがでしたでしょうか？
順序立てて学習していくとそんなに難しくないと感じた方も多いと思います。
次回はHTMLとCSSをおさらいしていきます。
コメント