今見ているページを構成しているものはHTMLという文書の構成を決定する言語と、CSSというデザインを決定する言語です。
HTMLだけでも基本的なレイアウトは可能ですが、かなりシンプルなページになります。CSSと組み合わせることにより、デザイン性が豊かなWebページを制作することができます。
今回はHTMLとCSSの基礎を紹介したいと思います。
HTMLの基礎枠
|
1 2 3 4 5 6 7 |
<html> <head> <title>title</title> </head> <body> </body> </html> |
htmlタグで全体を囲みその次のレベルにheadタグとbodyタグがあります。基本的に文書を記述するのはbodyタグの中です。headタグの中にはCSSやJavaScriptを読み込むタグを書き込みます。
headタグの中にtitleタグがあります。titleタグの中にテキストを書き込むと、そのテキストがページのタイトルとして表示されます。
見出し
|
1 2 3 |
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> |
段落
段落はpタグを使用します。pタグは一つの段落の塊を示します。
pタグは以下のように使用します。
|
1 2 3 4 5 6 |
<p> あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 </p> <p> またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。 </p> |
リスト
|
1 2 3 4 5 6 |
<ul> <li>hoge</li> <li>huga</li> <li>foo</li> <li>bar</li> </ul> |
divタグ
|
1 2 3 4 5 6 |
<div> <h1>みだし</h1> <p> あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 </p> </div> |
CSSの定義
|
1 2 3 |
タグ名 { CSSの定義 } |
具体的な例を挙げると以下のようになります。以下はpタグの中の文字サイズを16pxにするCSSです。
|
1 2 3 |
p { font-size: 16px; } |
font関連
|
1 2 3 4 5 6 7 |
p { color: red; text-align: left; font-size: 16px; font-weight: bold; font-family: serif; } |
colorは文字の色を定義します。色はredなどの文字列で指定できるのと、RGBや16進数で指定することもできます。
text-alignは文字をどこにそろえるかを指定します。leftだと左揃え、centerだと中央揃え、rightだと右端揃えになります。
font-sizeは文字の大きさを指定できます。ピクセル単位での指定やemでの指定が可能です。
font-weightは文字の太さを指定します。boldは太字を設定します。
font-familyではフォントの種類を決定します。コンピュータに標準的にインストールされているフォントを指定するのが一般的です。
背景関連
|
1 2 3 4 |
p { background-color: red; background-image: url("./background.png"); } |
background-colorでは背景の色を決定できます。これもfontの色と同様文字列による指定とRGBや16進数で指定することもできます。
