【ゼロからはじめるプログラミング】CSS学習 #8

【ゼロからはじめるプログラミング】CSS学習 #8

ゼロからはじめるプログラミング講座の第十二回です。今回でCSSの解説は終わりの予定です。次の言語へ向けての雑談回はあります。

今回は今まで解説してこなかったテクニックなどを紹介します。

 

  1. 同じプロパティは省略しよう。
  2. HTMLに直接スタイルを書いてみよう。
  3. プロパティdisplayを使ってみよう。

 

 

同じプロパティは省略しよう。

複数のセレクタで同じプロパティと同じ値を使うことがあります。例えば色だけが違うBOXがあったとします。全てのセレクタに同じ値のコードを書くとすると、コード量が多くなってしまいます。そこで値が同じ部分をまとめる方法を紹介します。

#box1{
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: red;
}
#box2{
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: blue;
}
#box3{
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: green;
}
BOX1
BOX2
BOX3

 

background以外はプロパティと値が同じです。こういう場合にまとめて複数のセレクタに値を設定する方法があります。セレクタとセレクタを「,」カンマで区切るだけです。

 

#box1, #box2, #box3{
  width: 50px;
  height: 50px;
  border: 1px solid;
}
#box1{
  background: red;
}
#box2{
  background: blue;
}
#box3{
  background: green;
}

 

これでコード量が減ります。さらにクラスを使うことでよりスマートになります。

 

<div id="box1" class="box left">BOX1</div>
<div id="box2" class="box left">BOX1</div>
<div id="box3" class="box clear">BOX1</div>
.box{
  width: 50px;
  height: 50px;
  border: 1px solid;
}
#box1{
  background: red;
}
#box2{
  background: blue;
}
#box3{
  background: green;
}
.left{
  float: left;
}
.clear{
  clear: both;
}
BOX1
BOX2
BOX3

まず見て欲しいのがclass=”box left”の部分です。今まで説明してきませんでしたがidは固有で1つしか設定できないのに対して、classはいくつでも設定することができます。

複数のクラスを設定する場合は「スペース」を使って間を空けます。

.box{}には箱の形を、#idで色や特別なプロパティを受け付けるようにします。

そして.left{}と.clear{}には1つだけプロパティと値を設定しています。

このようにあらかじめ頻繁に使うようなプロパティを付けたクラスを作っておくことでHTMLのコードの管理がしやすくなります。

 


 

また複数のクラスを付けられた要素を単一のセレクタとして扱う場合はクラスをつなげて書きます。スペースを入れると複数セレクタと見なされます。

<div class="box left right up">BOX1</div>
<div class="box left right down">BOX2</div>
<div class="box left right side">BOX3</div>

これを単一セレクタを使って指定してみます。違いを注意深く見てください。

.box.left.right{
  width: 50px;
  height: 50px;
}
.box.left.right.up{
  background: red;
}
.right.down{
  background: blue;
}
.box.right{
  border: 1px solid;
}
.box .side{
  background: green;
}
BOX1
BOX2
BOX3

BOX3だけは背景色が設定されていませんね。クラスの間にスペースが入っているので入れ子の複数セレクタを指定する形になっています。

逆に入れ子の親も指定する場合はスペースを空けましょう。

<ul>
  <li class="red blue">リスト</li>
</ul>
ul .red.blue{ }

 

 

HTMLに直接スタイルを書いてみよう。

スタイルシートは<link>で外部から読み込むと初めに説明してずっとそのようにして扱ってきましたが、HTMLに直接書くこともできます。書き方は2つあります。

  • <head></head>内に書く方法
  • 各タグ内にstyle属性を使って書く方法
<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .box{ background: red; }
    #box1{ background: blue; }
  </style>
    <meta charset="utf-8" />
    <title>CSS</title>
</head>
<body>
  <div id="box1" class="box">BOX</div>
  <div style="background: red; border: 1px solid;">BOX</div>
</body>
</html>

<head>内に書く場合は<style type=”text/css”></style>の間にいつものようにセレクタとプロパティと値を書きましょう。

タグに直接書く場合はstyle=””属性の中にプロパティと値だけを書きましょう。複数のプロパティを使う場合はスペースで区切りましょう。

 

 

プロパティdisplayを使ってみよう。

これまでブロックレベル要素とインライン要素だけを説明して2つだけを使ってきましたが要素の形はまだまだ沢山あります。しかしそれに対応するHTMLタグはありません。

タグが無いのにどうやって使い分けるんだよ!

CSSで擬似的に要素の形を変更するプロパティがあります。それがdisplayです。

 

例えば<span style=”display: block;“></span>

 

なんとこのspanはインライン要素ではなくブロックレベル要素になります。

このようにdisplayを使えば自由に要素の形を変更できます。そして変更できる形は沢山ありその1つ1つを説明して理解してもらうのは難しいので開発者ツールを使ってもらいます。開発者ツールの便利な使い方も紹介します。

 

まずは動画をみてください。

このようにプロパティの値を操作しながら確認することができます。

ChromeとFirefoxの場合は↑↓(上下)キーを押すことで値を選ぶことができます。

Edgeの場合は・・・。現時点でEdgeにはこの選び方は無いようです?私は確認できませんでした。

 

お疲れ様でした。急ぎ足でしたがCSS学習は今回で終わりになる予定です。次回は雑談なので軽い気持ちで読んでください。

次も頑張って記事を作るのでチャレンジしてください!

 

CSS学習 #1/#2/#3/#4/#5/#6/#7/#8/#9

 コメント来た?
    ∩∩
   (´・ω・)
   _| ⊃/(___
 / └-(____/
  ̄ ̄ ̄ ̄ ̄ ̄ ̄
 来たら起こして。

   ⊂⌒/ヽ-、__
 /⊂_/____ /
  ̄ ̄ ̄ ̄ ̄ ̄ ̄

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。