Bootstrap サンプル

CSS 基礎

ブロックレベル要素

見出し要素（h1, h2,,,）、p、ul、ol、li、div、table、form など、要素の前後に改行が入る幅 width と高さ height が指定できる上下左右に margin を指定できる text-align は要素の中身に適応される vertical-align は指定できない HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である

インライン要素

ブロックレベル要素の中身として使われる要素です a、span、strong など要素の前後には改行は入らない幅 width と高さ height は指定できない幅や高さは文字列の長さや文字の大きさなど、内容物のサイズ左右だけ margin を指定できる左右に padding を指定できる text-align を親ブロックに付けることで指定できる vertical-align を指定できる

インラインブロック display: inline-block

インライン要素のように横に並ぶ幅 width と高さ height が指定できる上下左右に margin を指定できる上下左右に padding を指定できる text-align を親ブロックに付けることで指定できる vertical-align が指定できるページネーションのように、項目を横に並べて、かつボタンのように幅や高さをもたせて表示したい時に便利

ブロックレベル要素を display: inline してみよう

<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">会社概要</a></li>
  <li><a href="#">お知らせ</a></li>
</ul>

li {display: inline;}
ul {text-align: center;}

結果

インライン要素を display: block してみよう

<a href="#">HOME</a>
<a href="#">会社概要</a>
<a href="#">お知らせ</a>

a {display: block;}   こうすると文字がないところでもリンクになる

結果

HOME 会社概要お知らせ

display: inline-block してみよう

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="current"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

ul {text-align: center;}         ul の中身を中央揃えにして
li {display: inline-block;}      li をインラインブロックで表示して
    vertical-align: bottom;}     li を垂直方向下揃えにして
li.current {line-height: 4em;}   class を付けた li だけ高さを大きくして
a  {display: block;              a をブロックで表示して
    width: 40px;}                a に幅を指定

結果

disabled状態の要素にスタイルを適用する

:disabled {
    background-color: #eee;
    cursor: not-allowed;
}

input[type="text"]:disabled {
    property: value;
}

data- を使ってみよう

<ul>
    <li data-list="first">第１のリスト</li>
    <li data-list="second">第２のリスト</li>
    <li data-list="third">第３のリスト</li>
</ul>

ul li[data-list="first"]  {color:#c00;}
ul li[data-list="second"] {color:#0c0;}
ul li[data-list="third"]  {color:#00c;}

結果

第１のリスト
第２のリスト
第３のリスト

css の書き方

<div class="col-sm-12" style="solid 1px #cccccc; height:500px;">

<head>
  <style>
    body {
      background: #eeeeee;
    }
  </style>
</head>

html のコメント

<!--
-->

inputにフォーカスしたとき、背景が青になります

input[type="text"]       { background-color: red;}
input[type="text"]:focus { background: blue;}

before after を理解しよう

<q>Some quotes</q>, he said, <q>are better than none</q>.

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

結果

Some quotes, he said, are better than none.

:link, :visited, :hover, :active, :focusの使い方

a:link {} :link　擬似クラスはリンクのデフォルトの状態を意味しているものです一番基本的な設定なので、他の擬似クラスよりも先に宣言することをお勧めします。一般的に勧められてる宣言の順番がこの通りです ⇨ :link, :visited, :hover, :active, :focus a:visited {} :visited　擬似クラスは既にクリックされている（訪問されている）リンクの状態を表現するものです a:hover {} :hover　擬似クラスはマウスをリンクの上に置いた時の状態を表現するものです a:active {} :active　擬似クラスはリンクがアクティベート（活性化）された時の状態を表現するものです a:focus {} :focus　擬似クラスは HTMLエレメントにフォーカスが行った時の状態を表現するものです