GoogleAnalyticsなどを使ってアクセス解析をしたい時に、URLにパラメーターを付けたい時があります。しかしWebサイトによってはアンカーリンクで遷移させたいときに、パラメーターがついたURLだと、うまくリンクしないときがあります。
今回はパラメーター付きアンカーリンクの正しい書き方を説明します。
目次
パラメーターとは
URLの後ろに?から始まる文字列の部分がパラメーターです。
http://www.example.com/?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword
アンカーリンクでリンクさせたい時
Webサイトによっては、リンク先のページがランディングページのような、縦に長いページの場合、そのページの特定の場所へリンク（アンカーリンク）させたい時がありますよね。
下のサイトイメージ図でいうと、お問い合わせの部分にリンクさせたいとします。
その時にパラメーター付き＆アンカーリンクをそのままaタグのhrefに記述すると、うまくリンクできません。
まずは間違ったリンクの書き方を説明します。
間違ったパラメーター付きアンカーリンクの書き方
例えばお問い合わせの部分を囲っているdivに指定しているidが、#contactだと仮定して、普通に記述するとこんな感じに書くと思います。
<a href="http://www.example.com/#contact?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword">お問い合わせはこちら</a>
上記のようにパラメーターの前にアンカーリンク（#contact）を記述すると、うまく特定の場所にリンクしてくれません。
それでは正しいリンクの書き方を説明します。
正しいパラメーター付きアンカーリンクの書き方
<a href="http://www.example.com/?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword#contact">お問い合わせはこちら</a>
上記のようにパラメーターの後にアンカーリンクを記述すれば、うまく特定の場所へリンクさせることができます。
CSSでリストタグ（ulタグ、liタグ）を使って横並びにレイアウトしたい時に、display:inline-block または inlineを使って横並びにすることができます。
その時にliとliの間に僅かな隙間ができてしまうことがあります。ブラウザのデフォルトスタイルはしっかりリセットしたものの、何故か隙間ができてしまいます。
今回はulタグliタグを使ったレイアウトで隙間をなくす方法をいくつか説明します。
目次
- 実装例
- 原因
- 解決方法1. ulにfont-size:0pxで解消
- 解決方法2. ulにline-height:0で解消
- 解決方法3. displayではなくfloteを使う
- 解決方法4. HTMLのソースのインデントや改行を消す
- まとめ
実装例
まずは現象を分かりやすく図で説明すると、上の図のようなイメージです。ulタグで囲ったliタグをdisplay:inline-blockを使って横並びにします。
HTML
<ul> <li>hogehoge</li> <li>hogehoge</li> <li>hogehoge</li> </ul>
HTMLはこんな感じに書いています。
CSS
ul li { display: inline-block; }
cssはこんな感じです。
原因
原因はliタグを改行する書き方をすると、その改行がスペースとして認識されるため、隙間が空いてしまうのです。
しかしコーダーの人の中にはソースの書き方にこだわりを持っている人もいると思いますので、HTMLのソースフォーマットは崩さず、できればCSSのみで完結したいものです。
では具体的な解消方法を説明していきます。
解決方法1. ulにfont-size:0pxで解消
ul { font-size: 0px; }
まず一つ目の直し方はulタグにfont-size:0pxを指定するとliの隙間がなくなります。
たったこれだけ。ただしliタグの中にテキストを入れている場合は、そのテキストのフォントサイズも0pxになるため、テキストを入れてる場合はliタグ個別にフォントサイズを適用しましょう。
解決方法2. ulにline-height:0で解消
ul { line-height: 0; }
次の方法はulタグにline-height:0を指定すると隙間が直ります。
解決方法3. displayではなくfloteを使う
ul li { float: left; }
個人的にはこれが1番無難なやり方だと思います。displayプロパティを使うのではなく、floteプロパティを使って、横並びにする方法です。特にdisplayプロパティでコーディングする理由がなければ、floteでも良いと思います。
解決方法4. HTMLのソースのインデントや改行を消す
<ul>
<li>hogehoge</li><li>hogehoge</li><li>hogehoge</li> </ul>
いやいやCSSで直すのは今回は難しいよ。というサイトであればCSSで直すのではなく、HTML側でも直すことが可能です。
やり方はliタグのインデントや改行を消すと隙間が直ります。
まとめ
上記のやり方でliタグ間の隙間を直すことができるので、自分のコーディング方法に合ったやり方で解決してみてください。
作るサイトのデザインにもよりますが、あらかじめリセットCSS等に記述しておくのもいいかもしれませんね。