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>
<style type="text/css">
h1{color:#FF0000;}
</style>
</head>
HTML文書のhead要素の中に、style要素を設定し、その中にCSSを記述することができます。
HTML文書の中に直接埋め込むのではないが、このページでしか使う事ができないため、
たとえば複数ページに同じCSSを適用したい場合は同じ内容を全てのHTMLファイルに対して
記載しないといけなくなります。
3.外部参照
<head>
<link href="外部CSSファイルへのパス" type="text/css" media="all" />
</head>
<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の参照を組み込みます。
<!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ファイルに書きます。
/*背景色設定*/
body{
background-color : #fbf9cc;
}
これでbody要素に対して、背景色を指定したことになります。
どんどんcssに追加してみましょう。
/*背景色設定*/
body{
background-color : #fbf9cc;
}
/*リンク色の設定*/
a{
color : #ff0000;
}
a:hover{
color:#000000;
}
リンク要素に対して色の指定と、マウスカーソルが当てられたタイミングで
色を変えるhover要素の指定を行いました。
もうひとつ追加してみましょう。
/*背景色設定*/
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側にそれぞれ装飾を施したい内容を書いてみましょう。
<!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行追加してみましょう。
<!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を設定しましょう。
/*背景色設定*/
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側に行追加してみましょう。
<!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を設定しましょう。
/*背景色設定*/
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回目、ここまでとします。