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

超初心者でも分かるリストの書き方

初心者向けに、リストの書き方について解説します。「●」や「数字」だけで並べるリストは、とても味気ないものです。CSSを使って、色々デザインして行きましょう。

リストの書き方

  1. 普通、リストを作成する時は、HTMLファイルに、以下のようにタグを書きます。「ul」の代わりに「ol」にすると、数字になります。
  2. 
    <ul>
      <li>Twitter</li>
      <li>Facebook</li>
      <li>LINE</li>
      <li>Instagram</li>
    </ul>
    
    
  3. すると、以下のような結果になります。
    • Twitter
    • Facebook
    • LINE
    • Instagram
  4. ここでは、「サルワカ」で、好みのリストのデザインを選びましょう。
  5. 以下の「CSS」を選択しました。
  6. 
    ul, ol {
      padding: 0;
      position: relative;
    }
    
    ul li, ol li {
      color: #2d8fdd;
      border-left: solid 6px #2d8fdd;/*左側の線*/
      background: #f1f8ff;/*背景色*/
      margin-bottom: 3px;/*下のバーとの余白*/
      line-height: 1.5;
      padding: 0.5em;
      list-style-type: none!important;/*ポチ消す*/
    }
    
    
  7. これで、表示させてみましょう。下記の表示が出れば、成功です。
  8. リスト
  9. 必要に応じて、最後の方に「width:300px;」を書き加えると、リストの幅が変わります。

豆知識

引用サイト



前へ  目次  次へ

免責事項・著作権表示

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

Copyright (C) SUZ45. All Rights Reserved.