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