
こんにちは、ひつじのジョージです。
大都会でプログラマーとして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タグを使う