ga-05-a3

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
divタグの使い方

divタグは、spanタグと同様にそれ自身で意味を持ちませんが、spanタグと違って、幅と高さを指定することができるので、大きな範囲のスタイルを設定することに用いられます。詳細は、 「13.レイアウトの基本」の「3.[inline]と[block]と[inline-block]」   を参照してください。 spanタグはinline要素で、divタグはblock要素です。

divタグ リファレンス

■ ブロックレベル要素/インライン要素 : ブロックレベル要素

■ 終了タグ 必須/省略可能 : 必須

■ 属性 : align(水平方向の表示位置) ・・・・ HTML5で廃止

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     divタグの使い方サンプル
=====================================-->
<html lang=“ja”>
<head>
  <meta charset=“UFT-8”>
  <title></title>
  <link rel="stylesheet" href="style-1.css">
</head>

<body>
    <div class="container">
        <h1>◆divタグの使い方サンプル◆</h1>
        <div class="box bg-darkblue
                     text-yellow">
            <p>カテゴリー1</p>
            <small>カテゴリー1の内容です。</small>
        </div>
        <div class="box bg-skyblue
                     text-black">
            <p>カテゴリー2</p>
            <small>カテゴリー2の内容です。</small>
        </div>
        <div class="box bg-lime
                     text-black">
            <p>カテゴリー3</p>
            <small>カテゴリー3の内容です。</small>
        </div>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      divタグの使い方サンプル
--====================================*/
.container{
    width:584px;
    max-width:90%;
    height:auto;
    padding:10px;
    margin: 30px auto;
    border: solid 3px darkblue;
    text-align: center;
    color:red;
}
.box{
    width:160px;
    padding: 10px;
    margin: 10px 5px 30px 5px;
    display:inline-block;
    text-align: center;
}
.bg-darkblue{background:darkblue;}
.bg-skyblue{background:skyblue;}
.bg-lime{background:lime;}

.text-white{color:white;font-weight: bold;}
.text-black{color:black;font-weight: bold;}
.text-yellow{color:yellow;font-weight: bold;}

p {margin:0;}
        
 back
pagetop
 next

spanタグの
使い方サンプル

divタグの
使い方サンプル

h1タグ~h6タグの
使い方サンプル

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken