こんにちは、ひつじのジョージです。
大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。
メインレイアウトのレッスンでは前回の「フッターのレイアウト」レッスンと同様にこれまでに学んだ知識を用いてコードを書くため主に復習になります。
また、新しく学ぶことはHTMLのspanタグです。
spanタグ単体では意味を持ちませんが、囲んだ要素をグループ化することができます。
HTML の
https://developer.mozilla.org/ja/docs/Web/HTML/Element/span<span>要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため (classまたはid属性を使用して)、またはlangのような属性値を共有したりするために要素をグループ化する用途で使用することができます。
- spanタグの使い方
このレッスンをクリアするとレベルが10にアップします。
目次
メインのレイアウトレッスンの答え
このレッスンの答えは以下のとおりです。
index.htmlに以下のように記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-logo">Progate</div>
<div class="header-list">
<ul>
<li>プログラミングとは</li>
<li>学べるレッスン</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
<div class="main">
<!-- <div>要素を追加し、「copy-container」というclassをつけてください -->
<div class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>プログラミングの世界へようこそ</h2>
</div>
<!-- <div>要素を追加し、「contents」というclassをつけてください -->
<div class="contents">
</div>
<!-- <div>要素を追加し、「contact-form」というclassをつけてください -->
<div class="contact-form">
</div>
</div>
<div class="footer">
<div class="footer-logo">Progate</div>
<div class="footer-list">
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
</body>
</html>
次にstylesheet.cssを次のように編集します。
body {
font-family: "Avenir Next";
}
li {
list-style: none;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
/* background-colorの指定を消してください */
/* heightの指定を消してください */
/* 上下のpaddingを100px、左右のpaddingを80pxにしてください */
padding: 100px 80px;
}
/* copy-containerの中のh1のfont-sizeを指定してください */
.copy-container h1 {
font-size: 140px;
}
/* copy-containerの中のh2のfont-sizeを指定してください */
.copy-container h2 {
font-size: 60px;
}
/* copy-containerの中のspanの色を指定してください */
.copy-container span {
color: #ff4a4a;
}
.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;
}
.footer-logo {
float: left;
font-size: 32px;
}
.footer-list {
float: right;
}
.footer-list li {
padding-bottom: 20px;
}
よくあるミス
spanの使い方は簡単そうに見えますが、spanタグの「意味」と「使い所」をしっかり意識して使いましょう。
spanタグを使う時に特に意識してほしいことは「spanタグはインライン要素」ということです。
HTML (Hypertext Markup Language) の要素は従来、「ブロックレベル」要素と「インライン」要素に分類されていました。インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。この記事では、 HTML のインライン要素と、 ブロックレベル要素との違いについて説明します。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements
- タグごとspanで囲む
- divタグの代わりにspanタグを使う
よくわかんない
よくあるミス1：タグごとspanで囲む
<!-- spanタグにh1〜6やpタグを含めることができない --> <span><h1>HELLO WORLD.</h1></span>
spanタグにh1〜6やpタグを含めることができません。
spanタグはインライン要素なのでh1〜6やpタグを含めることは文法上の誤りとなります。
よくあるミス2：divタグの代わりにspanタグを使う
<!-- divタグの代わりにspanタグは使えない -->
<span class="copy-container">
<h1>HELLO WORLD<span>.</span></h1>
<h2>プログラミングの世界へようこそ</h2>
</span>
spanタグとdivタグはよく似ていますが、
という大きな違いがあります。
これらの違いを意識して使い分けるようにしましょう。
まとめ：spanタグの使い方をマスターしよう
メインレイアウトのレッスンでは前回の「フッターのレイアウト」レッスンと同様にこれまでに学んだ知識を用いてコードを書くため主に復習になります。
また、新しく学ぶことはHTMLのspanタグです。
- spanタグの使い方
spanタグ単体では意味を持ちませんが、囲んだ要素をグループ化することができます。
HTML の
https://developer.mozilla.org/ja/docs/Web/HTML/Element/span<span>要素は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため (classまたはid属性を使用して)、またはlangのような属性値を共有したりするために要素をグループ化する用途で使用することができます。
spanの使い方は簡単そうに見えますが、spanタグの「意味」と「使い所」をしっかり意識して使いましょう。
spanタグを使う時に特に意識してほしいことは「spanタグはインライン要素」ということです。
HTML (Hypertext Markup Language) の要素は従来、「ブロックレベル」要素と「インライン」要素に分類されていました。インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。この記事では、 HTML のインライン要素と、 ブロックレベル要素との違いについて説明します。
https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements
「spanタグはインライン要素である」ということを理解していなく以下のようなミスがあります。
- タグごとspanで囲む
- divタグの代わりにspanタグを使う
