以前HTMLの基本のタグについて説明しましたが、今回は構造です。
タグ編は以下で確認してください。
HTMLの全体構造
HTMLファイルには、決められた型に沿って記載していきます。
下記のように、<html>要素の中に<head>要素と<body>要素が必要です。<head>要素にはページに関連する情報、<body>要素には実際に表示したい内容を書きます。
以前書いた記事のタグは、<body>要素の中に記述していきます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>nabelog</h1>
<p>プログラミングがんばろう！</p>
</body>
</html>HTMLバージョンの指定
<!DOCTYPE html>の部分はDOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するためのものです。
最新バージョンのHTML5の場合、<!DOCTYPE html>を使用します。
まずは特に気にせず、必ず記載するものです。
<!--
DOCTYPE宣言でHTMLのバージョンを指定
-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>head要素
<head>要素にはページ設定に関する情報を記載していきます。
<head>要素内に記載した内容はページに表示されません。
<head>要素には必ず入れる3つの要素があります。
以下のように①文字コード指定、②ページタイトル設定、③CSS読込を行う必要が有ります。
これらは定型文のみたいなものなので記憶する必要はないですが、以下のようなものの設定が必要ということを知っておいてください。
<head>
<!-- ①文字コード指定 -->
<meta charset="utf-8">
<!-- ②ページタイトル設定 -->
<title>nabelog</title>
<!-- ③CSS読込 -->
<link href="stylesheet.css">
</head>文字コード
文字コードを指定することで、ページの文字化けを防ぐことができます。
<meta charset=”utf-8″>とすることで、そのページの文字コードをUTF-8に指定することができます。
UTF-8は、HTML5で推奨されている文字コードです。
ページタイトル
<title>要素は、ページのタイトルの表示を指定します。
<title>要素で指定された内容は、ブラウザのタブ上に表示されます。
CSS読込
作成したCSSを反映させるためには、HTMLの方で読み込む必要があります。
HTMLからCSSを読み込むためには、<link rel=”stylesheet”>を用います。
<link rel=”stylesheet” href=”stylesheet.css”>のように、href属性で読み込むCSSファイルを指定します。
div要素 【レイアウト】
レイアウトは<div>要素によって構成していきます。
<div>要素の「div」は「division」の略で、要素をグループ化するために使用します。
下の例では、「header」、「main」、「footer」というclass名を持った3つの<div>要素でレイアウトを分割しています。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nabelog</title>
<link href="stylesheet.css">
</head>
<body>
<!-- <div>要素の「header」class -->
<div class="header">
</div>
<!-- <div>要素の「main」class -->
<div class="main">
</div>
<!-- <div>要素の「footer」class -->
<div class="footer">
</div>
</body>
</html>/* stylesheet.css */
body {
font-family: "Avenir Next";
}
.header {
background-color: #f7f2b4;
height: 90px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}ヘッダー作成 【div要素の応用】
リストの・を非表示
以降で使用するのでリストの・を非表示にする方法について説明します。
<li>要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマークを消すことができます。
li{
list-style: none;
}以下ではヘッダーには「nabelog」のロゴと、ヘッダーにメニューのリストを作っています。
リストを<div>要素を用いてグループ化しています。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nabelog</title>
<link href="stylesheet.css">
</head>
<body>
<div class="header">
<!-- ロゴ -->
<div class="header-logo">nabelog</div>
<!-- グループ化されたリスト -->
<div class="header-list">
<ul>
<li>HTML初歩</li>
<li>CSS初歩</li>
<li>Javascript初歩</li>
</ul>
</div>
</div>
<div class="main">
</div>
<div class="footer">
</div>
</body>
</html>横並びに表示 【floatプロパティ】
HTMLで記述した要素は何も指定がなければ縦に並んで表示されるので、横並びにするにはCSSで指定する必要があります。
CSSを用いて、ヘッダーの要素を横並びにしてみましょう。
floatプロパティを指定することで、要素を横並びに表示できます。
li {
/* li要素を横並びに表示 */
float: left;
}余白の調整 【paddingプロパティ】
要素の余白を調整することで、適切な位置に配置することができます。
要素に余白を作りたい場合は、paddingを用います。
「padding: 値;」とすると、上下左右すべての方向にその大きさの余白が追加されます。
上下左右ではなく、ある方向のみに余白を指定したい場合は、「padding-top: 値;」などとする事で方向を指定できます。その方向のみに余白が追加されます。
他にpadding-bottom、padding-left、padding-rightなどがあります。
個別指定 【paddingプロパティ】
.header-logo{
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}省略① 【paddingプロパティ】
.header-logo{
/* 左から順にtop,right,bottom,leftの順に指定 */
padding: 20px 10px 20px 10px;
}省略②（上下と左右で指定） 【paddingプロパティ】
.header-logo{
/* 左がtop,bottom 右がright,leftを指定 */
padding: 20px 10px;
}フッターを作成 【細かいセレクタ】
入れ子セレクタ
「.header-list」の後にスペースの後にliと記載すると、「header-list」の中の<li>要素にのみCSSを適用できます。
これにより、ヘッダーの<li>要素とフッターの<li>要素に別々のCSSを適用することができます。
.header-list li{
float: left;
padding: 33px 20px;
} <div class="footer">
<div class="footer-logo">nabelog</div>
<div class="footer-list">
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>右から横並びで表示 【float: right】
float: rightを用いると、指定した要素を右から順に横並びにすることができます。
li{
float: right;
}
コメント