HTMLの学習その3【新人エンジニア：未経験者向け】

#HTMLの学習その3

1つ目の投稿はこちら
[HTMLの学習【新人エンジニア：未経験者向け】](http://qiita.com/book_o_bitch/items/413b0ce7e6db43c1f4e8)

2つ目の投稿はこちら
[HTMLの学習2【新人エンジニア：未経験者向け】](http://qiita.com/book_o_bitch/items/c36980a2350d59b3e1c1)


・取り合えずメインの枠を最初につくっておく
→HTML学習2を参照ください。タイトルは「HTML講座その3」などで結構です。

・CSSとは
CSS(Cascading Style Sheets)は、HTML文書に装飾・レイアウトを施すための
言語となります。
HTMLを土台として、そのHTMLの表示を色々な形で表示させることができます。

・CSSをHTMLに組み込むには
1.インラインに組み込む
HTMLタグの中に直接style属性によってCSSを記述することができます。

```lang:インラインで組み込む！
<h1 style="color:#FF0000">見出しサンプル</h1>
```

原則あまりこういう書き方はしないのが一般的です。
一時的に確認するために記載するような事はあります。

2.内部参照として組み込む
前回の講座としてこの記載をしました。

```lang:head要素に組み込む！
<head>
  <style type="text/css">
    h1{color:#FF0000;}
  </style>
</head>
```

HTML文書のhead要素の中に、style要素を設定し、その中にCSSを記述することができます。
HTML文書の中に直接埋め込むのではないが、このページでしか使う事ができないため、
たとえば複数ページに同じCSSを適用したい場合は同じ内容を全てのHTMLファイルに対して
記載しないといけなくなります。

3.外部参照

```lang:外部参照その1
<head>
  <link href="外部CSSファイルへのパス" type="text/css" media="all" />
</head>
```

```lang:外部参照その2
<head>
  <style type="text/css">
    @import url(外部CSSファイルへのパス);
  </style>
</head>
```

CSSを外部ファイル化し、それを参照する方法です。
link要素を利用して外部参照する方法がポピュラーな方法です。

また、CSSの記載方法として、複数のCSSファイルにして外部参照する形をとり、
それぞれの役割を持たせて必要な画面に対して必要なCSSを読み込む、
という形をとります。

・CSSでの色指定
一般的には上記のように16進数のRGB値、というのを使います。
大文字、小文字の区別はありません。
また、RGBそれぞれがゾロ目の場合は、省略して3行で表現することもできます。
例で言えば、#FF0000・#ff0000・#F00・#f00どのパターンでもきちんと認識されます。
(全て同じ結果になる)

ほかには数字での指定も可能です。
1. rgb(255,0,0)
2. rgb(100%,0%,0%)
→上記全て赤を表しています。

では、CSSとHTMLを使って何か書いてみましょう。
最初に準備したHTMLファイルを開き、CSSの参照を組み込みます。

```lang:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTML講座3回目</title>
      <link href="style.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body>
  </body>
</html>
```

href属性・・・外部参照するCSSファイルのパスを記述する。
rel属性/type属性・・・外部参照するするファイルの種類。CSSファイルを参照する場合は常に
この指定を記述する。
media属性・・・そのCSSファイルを適用する対象メディアに応じて値を指定する。

では、HTMLファイルと同じディレクトリにstyle.cssというファイルをひとつ作成し、
以下の内容をcssファイルに書きます。

```lang:style.css
/*背景色設定*/
body{
  background-color : #fbf9cc;
}
```

これでbody要素に対して、背景色を指定したことになります。
どんどんcssに追加してみましょう。

```lang:style.css
/*背景色設定*/
body{
  background-color : #fbf9cc;
}

/*リンク色の設定*/
a{
  color : #ff0000; 
}

a:hover{
  color:#000000;
}
```

リンク要素に対して色の指定と、マウスカーソルが当てられたタイミングで
色を変えるhover要素の指定を行いました。

もうひとつ追加してみましょう。

```lang:style.css
/*背景色設定*/
body{
  background-color:#fbf9cc;
}

/*リンク色の設定*/
a{
  color : #ff0000; 
}

a:hover{
  color:#000000;
}

/*大見出しの設定*/
h2{
  color:#6fbb9a;
  border:#94c8b1 1px dotted;
  border-left:#d0e35b 10px solid;
  padding:5px 20px;
  margin-bottom:0;
}
```

では、肝心のHTML側にそれぞれ装飾を施したい内容を書いてみましょう。

```lang:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTML講座3回目</title>
      <link href="style.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body>
    <h2>株式会社I2Cのホームページ</h2>
    <a href="https://www.i2c.jp/">HPはこちらから</a>
  </body>
</html>
```

・id属性をセレクタにする
セレクタとは、スタイルを適用する対象のことです。
これまでは要素自体をセレクタとしてスタイルを設定しましたが、例えば前述のa要素や
h要素などのように多用される要素の場合、一部のaタグにだけスタイルを指定したい
場合などが出てくると思います。
その場合は要素に任意の名前を設定し、その名前で要素を区別してスタイルを設定します。

では、HTML側に1行追加してみましょう。

```lang:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTML講座3回目</title>
      <link href="style.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body>
    <h2>株式会社I2Cのホームページ</h2>
    <a href="https://www.i2c.jp/">HPはこちらから</a>
    <p id="hashtag">twitterハッシュタグ:#i2c_study</p>
  </body>
</html>
```

追加した行に対してのCSSを設定しましょう。

```lang:style.css
/*背景色設定*/
body{
  background-color:#fbf9cc;
}

/*リンク色の設定*/
a{
  color:#ff0000; 
}

a:hover{
  color:#000000;
}

/*大見出しの設定*/
h2{
  color:#6fbb9a;
  border:#94c8b1 1px dotted;
  border-left:#d0e35b 10px solid;
  padding:5px 20px;
  margin-bottom:0;
}
/*ハッシュタグの説明設定*/
#hashtag{
  border-top:#000000 1px dotted;
  border-bottom:#000000 1px dotted;
  padding:15px;
  text-align:center;
}
```

idセレクタは「要素名#id名」という形式で記述するのが基本形式です。
<p id="hashtag">の場合はp#hashtagとなります。
要素名を省略して単に#hashtagのように記述することもできます。
(サンプルは省略して記載しています)

・class属性をセレクタにする

class属性はid属性と違い、同じ名前を使い回ししても問題ありません。
同じスタイルを指定したい個所に同じclass属性の名前を付けて、
そのclass属性に対してスタイルを設定してみましょう。

では、HTML側に行追加してみましょう。

```lang:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>HTML講座3回目</title>
      <link href="style.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body>
    <h2>株式会社I2Cのホームページ</h2>
    <a href="https://www.i2c.jp/">HPはこちらから</a>
    <p id="hashtag">twitterハッシュタグ:#i2c_study</p>
    <h2>過去の講座一覧</h2>
    <p class="entry">HTML講座</p>
    <p class="entry">Javascript講座</p>
    <p class="entry">Java講座</p>
    <p class="entry">Java SE7講座</p>
    <p class="entry">OracleMaster Bronze SQL講座</p>
    <p class="entry">OracleMaster Bronze DBA講座</p>
    <p class="entry">基本情報技術者試験講座</p>
  </body>
</html>
```

class属性に対するCSSを設定しましょう。

```lang:style.css
/*背景色設定*/
body{
  background-color:#fbf9cc;
}

/*リンク色の設定*/
a{
  color : #ff0000; 
}
a:hover{
  color:#000000;
}

/*大見出しの設定*/
h2{
  color:#6fbb9a;
  border:#94c8b1 1px dotted;
  border-left:#d0e35b 10px solid;
  padding:5px 20px;
  margin-bottom:0;
}

/*ハッシュタグの説明設定*/
#hashtag{
  border-top:#000000 1px dotted;
  border-bottom:#000000 1px dotted;
  padding:15px;
  text-align:center;
}

/*過去の講座一覧設定*/
.entry{
  font-weight:bold;
}
```

今回はCSSに関する基礎的な内容でした。
上記内容を理解しておき、CSSの設定内容を
さらに理解していけば、もっと複雑なレイアウトの
HTMLが作成できると思います。

HTMLの超基礎講座3回目、ここまでとします。