【高さを変える】リンクとリストのレスポンシブ化

パソコンは、カーソルを使ってリンクをクリックします。
パソコンのカーソルはかなり細かい指定ができますので、リンクとリンクの隙間があまり開いていなくても誤操作が起きにくいです。

でも、スマートフォンやタブレット端末の多くは、指でタップしてリンクをクリックしますので、リンクとリンクの間はかなり開いている必要があります。

リンクのスタイル

line-height と margin を指定して、リンクの周りに隙間をあけてやれば、スマホで見た際にはリンクの周りに大きな隙間が開きます。

リンクが隣り合っていても、ここまで隙間が開いていると、誤タップが起きにくくなります。

line-height では、上下の隙間を指定します。
数字が大きい方が、たくさんの隙間が開きます。

marginで横に隙間をあけてやると、横にも隙間があきます。

リンク a {  } のスタイルでは、margin で上下の隙間を指定することができないので、めんどうでも、上下の隙間は line-height で指定してあげます。

画面サイズの大きいパソコンから閲覧する際には、この隙間の指定を外してやります。

/* スマホで表示 */
@media screen and (min-width:0px) and (max-width:899px){
a{
    color:#0033cc;
    margin: 0px 20px 0px 20px;
    line-height: 3;
}
}

/* PCで表示 */
@media screen and (min-width:899px) {
a{
    color:#0033cc;
}
}

リストのスタイル

リストの場合は上下にリンクが並びますので、リンクとリンクの間に隙間が大きめに開いていたほうが誤タップが起きにくいです。

ですので、リストの li {  }  のスタイルに padding を指定してあげるか、リスト内のリンクに line-height を指定してあげるとよいです。

li {
    width: 100%;
    padding:20px 0px 20px 0px;/* リストの上下幅を調節 */
    border-bottom:1px #efefef solid;
}

li a{
    color:#fff;
    text-decoration:none;
    background:#0033cc;
    line-height:3.5;/* リスト内の上下幅を調節 */
}

リストの  li {  }  のスタイルに padding を指定した場合、『 リンク無しでもリスト間に隙間が空いてしまう 』 ので、リンク無しの場合はリスト間に隙間を開けないようにしたい場合は、リスト内のリンクのスタイル li a{} に line-height を指定して、上下の隙間を広げてあげます。

li {
    width: 100%;
    padding:0px;/* ここでは上下幅を調節しない */
    border-bottom:1px #efefef solid;
}

li a{
    color:#fff;
    text-decoration:none;
    background:#0033cc;
    line-height:3.5;/* ここで上下幅を調節する */
}

リンクのスタイル a {  }  に padding を適用すると、リンクの適用範囲が広がりますので、大きめにリンクの範囲を取りたい時には、リンクに padding を指定すると良いです。

li a{
    color:#fff;
    text-decoration:none;
    background:#0033cc;

    padding:20px 0px 20px 0px;/* リンクの上下幅を広げる */
    line-height:2.5;/* リストの上下幅を広げる */

}

リンクの範囲を広げずに上下の隙間だけ広げたい場合には、line-height の方で調節してあげると良いです。

リンクのないリストの場合には上下の隙間を狭めたい場合は、リンク内のリンクにline-height を適用してあげるとよいです。
これでリストとリストの隙間がガッツリ開きますが、リンク無しの時は幅を狭められます。

li {
    width: 100%;
    border-bottom:1px #efefef solid;

    padding:0px;

}

li a{
    color:#fff;
    text-decoration:none;
    background:#0033cc;

    padding:0px;
    line-height:3.5;

}

スマホはボタン型にするとクリックされやすい

スマートフォンは、画像のアイコンよりも、文字のリンクよりも、ボタン型のリンクがクリックされやすいようです。

ですので、ですので、ボタン型のリンクやリストでリンクを表示するのもありなのではないかと思います。
（何となく私はやってないですが。(；´∀｀)）

/* ボタンタイプのリンク */
a{
    color:#fff;
    padding:10px;
    text-decoration:none;
    margin:0px 10px 0px 10px;
    line-height:3;

    border-radius: 3px;
    box-shadow: 1px 1px 3px 0px #f3f3f3;
    background: #80c217;/* IE9以下の場合 */
    background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);

}

/* ボタンタイプのリンク付きリスト */
li a{
    color:#fff;
    padding:10px;
    text-decoration:none;
    margin:0px 10px 0px 10px;
    line-height:3;

    border-radius: 3px;
    box-shadow: 1px 1px 3px 0px #f3f3f3;
    background: #80c217;
    background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);

}

次ページ

【画像】 ファイルの圧縮とサーバー 【CSS】

前ページ

【h1】 レスポンシブの見出しのスタイル 【h3】