Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@book_o_bitch(takayuki ishimoto)

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

Last updated at Posted at 2016-10-20

#HTMLの学習その3

1つ目の投稿はこちら
HTMLの学習【新人エンジニア：未経験者向け】

2つ目の投稿はこちら
HTMLの学習2【新人エンジニア：未経験者向け】

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

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

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

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

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

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

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

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

3.外部参照

外部参照その1
<head>
  <link href="外部CSSファイルへのパス" type="text/css" media="all" />
</head>
外部参照その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の参照を組み込みます。

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ファイルに書きます。

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

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

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

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

a:hover{
  color:#000000;
}

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

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

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側にそれぞれ装飾を施したい内容を書いてみましょう。

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行追加してみましょう。

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を設定しましょう。

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#hashtagとなります。 要素名を省略して単に#hashtagのように記述することもできます。 (サンプルは省略して記載しています)

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

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

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

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を設定しましょう。

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回目、ここまでとします。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?