li要素内のaタグのクリック範囲を広げる方法

li要素をつかってメニューを作る時に、
li要素内全てはリンク可能なクリック範囲にしたい場合がちょいちょいあります。

そんな時は、下記のように対処します。

htmlコード

<ul>
  <li><a href='#'>aaaa</a>
  <li><a href='#'>bbbb</a>
  <li><a href='#'>cccc</a>
</ul>

cssコード

ul li a {
 display: block;
}
ul li a:hover {
 color: #ffffff;
 background-color: #000000;
}

li要素の「・」を削除する方法

メニューの項目等で li タグを使った時に、何もしないと「・」が表示されます。
その「・」をCSSで削除するするには、以下のように行います。

li {
  list-style-type: none;
}

小さなCSSのインライン化で読み込み時間を短縮する

CSSのインライン化

小さなCSSに限っての話になりますが、外部ファイル化せずに、そのままHTML内に記述した方が、読み込み時間を短縮できます。

変更前

test.html

<html>
  <head>
   <link href="/css/home.css" media="all" rel="stylesheet" type="text/css">
  </head>
  ....

/css/home.css

p {
  font-size: 20px;   
}

変更後

test.html

<html>
  <head>
    <style type="text/css">
        .p {
          font-size: 20px;   
        }  
    </style>
  </head>
  ....

---

CSSのサイズと可読性にも影響してくるので一概にメリットだけとは思いませんが、とことんスピードを追求したい人は是非お試しください。

cssで横幅を超えた文字を...で省略する方法

csのみを使用して、横幅を超えた文字列を…で省略する方法

p.item_name {
         width: 100px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
}

widthで横幅を固定して、上記のようにcssを指定すると、100pxを超えた文字列は…で省略して表示されます。

てすと...

見たいに表示されます。