HTMLとCSSにおけるDIVとSpanの使い方

この記事では、HTMLの「div」と「span」を理解し、使い分け、CSSでスタイルを設定する方法を説明します。div」は本文を細かく分割するために、「span」は行の一部を選択するために使います。

その1

divの使い方

HTMLマークアップ

1. メモ帳を開き、基本的なHTML構造をタイプダウンする。基本的にはHTMLの中にbodyが含まれています。
2. bodyタグの中に<div>タグを入れます。divはコンテナ・タグなので、<div> </div>のように、</div>の後に記述する必要があります。

   • <div>はページを分割するために使うので、<div>の中にdivタグを使うこともできます。
     
     

CSSマークアップ

1. <style>の中で、<div>にIDを与え、高さ、幅、背景色などを設定します。

   • <div>のIDは#を使ってもいいし、単にdivと書いて高さ、幅などを設定してもいい。しかし、たくさんのdivがある場合は、IDを使ったほうがよいでしょう。

その2

spanを使う

HTMLマークアップ

1. <span>タグを記述してテキストを書き、</span>で閉じます。spanタグは一般に、行の一部を選択し、そこに何らかのプロパティを適用するために使われます。しかし、spanタグは1行以上の行を選択するために使うこともできます。

CSSマークアップ

1. spanにIDを与え、プロパティを設定します。1行に複数のspanを指定することもできます。
2. 楽しむことを忘れないでください！韻を踏んで、長い旅を楽しんでください！

この記事は、CC BY-NC-SAの下で公開された " How to Use DIV and Span in HTML and CSS " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。