木更津SEO対策・君津SEO対策 きさらずSEO対策 きみつSEO対策 ホームページSEO対策 作成・制作、Xoops SEO対策・Geek SEO対策・CMS SEO対策の構築・管理・運営とSEO対策、木更津でSEO対策・君津でホームページ作成・制作・富津でSEO対策・袖ヶ浦でホームページ制作・作成・かずさでSEO対策・上総地区でホームページ作成・制作とSEO対策をする。
ホームページ作成・制作とSEO対策なら2land.net。
木更津・君津地区でHP制作・作成やSEO対策なら。
XoopsやGeekやCMSのホームページをインストール・構築・管理・デザイン・インストール・設定も

自分でするSEO対策・検索エンジン最適化対策！

スタイルシートの匠技

リストを作成した時にアイテム同士の間隔を変えたい

ul要素などでリストを作成した時にリストのアイテム間の間隔が狭いと感じる事があります。 あまりにぴったりしているとカッコワルイものです。アイテム間の間を広げるにはどうすれば良いのでしょうか。 「line-height」を使っても良いですが、これは一般的にはブロック要素に対して行うものなので、あまり好ましくありません。 もっと簡単な方法は無いかと。実は「margin-top」を使うだけで面倒な事を考えなくてもリストアイテム間の間隔を変えれます。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta http-equiv="content-style-type" content="text/css">
   <title></title>
   <style type="text/css">
      li
      {
         margin-top: 0.5em;
      }
   </style>
</head>
<body>
   <h1>有名香港アクション俳優</h1>
   <ul>
      <li>ジャッキー＝チェン</li>
      <li>ユン＝ピョウ</li>
      <li>サモハン＝キンポー</li>
   </ul>
</body>
</html>
margin-top: 0.5em;
  • ジャッキー＝チェン
  • ユン＝ピョウ
  • サモハン＝キンポー

li要素に対して、0.5emの上部マージンを与えれば結果的に間隔を空ける事ができますね。 他の場合と見比べて見ましょう！

margin-top: 0em;
  • ジャッキー＝チェン
  • ユン＝ピョウ
  • サモハン＝キンポー
margin-top: 1em;
  • ジャッキー＝チェン
  • ユン＝ピョウ
  • サモハン＝キンポー

これと先ほどの画像のテクニックを使えば、リストに関してはほとんど知識がついた事になります。