1p
トップ > 超初心者でも分かるホームページの作り方 > 超初心者でも分かるボックスの書き方

超初心者でも分かるボックスの書き方

初心者向けに、ボックスの書き方について解説します。CSSを使って、色々デザインして行きましょう。

ボックスの書き方

  1. 普通、ボックスを作成する時は、HTMLファイルに、以下のようにタグを書きます。
  2. 
    <div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
        <span>ここにタイトル</span>
        <p>ここに文章</p>
    </div>
    
    
  3. すると、以下のような結果になります。
  4. ここにタイトル

    ここに文章

  5. ここでは、「サルワカ」で、好みのボックスのデザインを選びましょう。
  6. 以下の「CSS」を選択しました。
  7. 
    .box26 {
        position: relative;
        margin: 2em 0;
        padding: 0.5em 1em;
        border: solid 3px #95ccff;
        border-radius: 8px;
    }
    .box26 .box-title {
        position: absolute;
        display: inline-block;
        top: -13px;
        left: 10px;
        padding: 0 9px;
        line-height: 1;
        font-size: 19px;
        background: #FFF;
        color: #95ccff;
        font-weight: bold;
    }
    .box26 p {
        margin: 0; 
        padding: 0;
    }
    
    
  8. HTMLファイルは、以下のようにします。
  9. 
    <div class="box26">
        <span class="box-title">ここにタイトル</span>
        <p>ここに文章</p>
    </div>
    
    
  10. これで、表示させてみましょう。下記の表示が出れば、成功です。
  11. ボックス

豆知識

引用サイト



前へ  目次  次へ

免責事項・著作権表示

情報が古かったり、間違っていることなどによる損害の責任は負いかねますので、ご了承ください。

Copyright (C) SUZ45. All Rights Reserved.