こんにちは。ネットショップコンサルタント「たぶ」(@yusuke_tanaka34)です。
今日は『リストのaタグを親要素いっぱいにして上下中央揃えにする方法』をご紹介したいと思います！
今回の記事は、
- ホームページを作っている方
- WordPressでWebサイトを作っている方
- CSSの勉強をしている方
におすすめです！
分かります。リストの時、「a」タグを親要素いっぱいにしたり、上下中央揃えにするのってけっこう大変ですよね。
けっこうよく使うので、何度も何度もやっているのですが、いつも「あれ？どうやるんだったっけ？」ってなるんですよね。
僕もいつもやり方を忘れて、調べてます。(笑)
そこで、今日は備忘録的な感じで、リストの「a」タグを親要素いっぱいにして上下中央揃えにする方法を解説していきたいと思います。
この記事に書いてある『リストのaタグを親要素いっぱいにして上下中央揃えにする方法』を読めば、ホームページ制作の時短ができると思います！
結論から言いますと、
- 「a」タグの「padding」を調節する方法
- 「display: table;」を使用する方法
- 「transform」タグを使用する方法
の3つの方法があります。
ご自身が使いやすい方法を使用して、上下中央揃えを実現してください。
それでは、『リストのaタグを親要素いっぱいにして上下中央揃えにする方法』を詳しく解説していきますね。
スポンサーリンク
リストのaタグを親要素いっぱいにして上下中央揃えにしたい時
リストの「a」タグを親要素いっぱいにして上下中央揃えにしたい時ってありますよね。
例えば、こんな感じ
この時のHTMLとCSSはこんな感じです。
【HTML】
<ul class="contact"> <li><a href="">メールでのお問い合わせはこちら</a></li> <li><a href="">お電話でのお問い合わせはこちら</a></li> </ul>
【CSS】
.cantact {
width: 100%;
}
.contact li {
width: 48%;
float: left;
padding: 0 1%;
}
.contact li a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
color: #000000;
text-align: center;
text-decoration: none;
background-color: #cccccc;
border-radius: 5px;
}
.contact li a:hover {
cursor: pointer;
opacity: 0.6;
}
この時、両方とも文字が1行だとうまくいくのですが、たとえばリストの片方の文字が2行になった時、表示が崩れてしまうんです。
「お電話でのお問い合わせはこちら」の後に、電話番号の「03-1111-1111」を入れてみますね。
「03-1111-1111」が枠外に飛び出ちゃってます。(笑)
今回は、リストの片方を2行にしても崩れない方法を3種類、解説していきたいと思います。
スポンサーリンク
リストのaタグを親要素いっぱいにして上下中央揃えにする方法
リストの「a」タグを親要素いっぱいにして上下中央揃えにする方法は3種類。
- 「a」タグの「padding」を調節する方法
- 「display: table;」を使用する方法
- 「transform」タグを使用する方法
それでは、1つずつ解説していきますね。
「a」タグの「padding」を調節する方法
まず1つ目は『「a」タグの「padding」を調節する方法』。
これは一番簡単な方法だと思います。
ただ、「padding」の高さを計算しながら調整しないといけないのが手間ですね。
それと、今回はボタンが2つなのでいいですが、3つ4つと増えていくと、幅を調整するのも大変です。
「a」タグの「padding」を調節すると、こんな感じになります。
ちゃんと「03-1111-1111」が枠外に収まってますね。(笑)
この時のHTMLとCSSはこちら。
【HTML】
<ul class="contact"> <li class="mail"><a href="">メールでのお問い合わせはこちら</a></li> <li><a href="">お電話でのお問い合わせはこちら<br>03-1111-1111</a></li> </ul>
【CSS】
.cantact {
width: 100%;
}
.contact li {
width: 48%;
float: left;
padding: 0 1%;
}
.contact li a {
display: block;
width: 100%;
color: #000000;
text-align: center;
background-color: #cccccc;
border-radius: 5px;
text-decoration: none;
padding: 5px 0;
}
.contact li a:hover {
cursor: pointer;
opacity: 0.6;
}
.contact li.mail a {
padding: 17px 0; //ここで高さを調節する
}
以上が、『「a」タグの「padding」を調節する方法』です。
「display: table;」を使用する方法
次に『「display: table;」を使用する方法』をご紹介しますね。
今回はリスト要素に「display: table;」を指定して、テーブル要素にしてから、aタグを親要素いっぱいにして上下中央揃えします。
「display: table;」を使ってCSSを適用すると、こんな感じになります。
ただ、結局この方法も「padding」を使って高さを調整しないといけないので、『「a」タグの「padding」を調節する方法』と変わらないんですよね・・・
「display: table;」を使う方法のHTMLとCSSはこんな感じです。
【HTML】
<ul class="contact"> <li><a href="">メールでのお問い合わせはこちら</a></li> <li><a href="">お電話でのお問い合わせはこちら<br>03-1111-1111</a></li> </ul>
【CSS】
.contact {
display: table;
width: 100%;
}
.contact li {
display: table-cell;
width: 48%;
text-align: center;
margin: 0;
padding: 0 1%;
}
.contact li:first-child a{
padding: 19px 0; //ここで高さを調節する
}
.contact li a {
display: block;
width: 100%;
color: #000000;
background-color: #cccccc;
text-decoration: none;
border-radius: 5px;
margin: 0;
padding: 7px 0;
}
.contact tr td a:hover {
cursor: pointer;
opacity: 0.6;
}
以上が、『「display: table;」を使用する方法』でした。
「transform」タグを使用する方法
最後に、『「transform」タグを使用する方法』をご紹介します。
「transform」タグは、指定した要素をいろんな方向に移動したり、変形したりできるタグです。
ちょっと裏技的な感じがしますが、やってみる価値アリです！
「transform」タグを使ってボタンを作ると、こんな感じです。
見た目はほぼ一緒ですね。
「transform」タグを使用した時のHTMLとCSSはこんな感じです。
【HTML】
<ul class="contact"> <li><a href=""><span>メールでのお問い合わせはこちら</span></a></li> <li><a href=""><span>お電話でのお問い合わせはこちら<br>03-1111-1111</span></a></li> </ul>
【CSS】
.contact {
width: 100%;
}
.contact li {
width: 48%;
float: left;
text-align: center;
margin: 0 1%;
}
.contact li a {
display: block;
position: relative;
width: 100%;
height: 60px;
color: #000000;
text-align: center;
text-decoration: none;
background-color: #cccccc;
border-radius: 5px;
padding: 5px 0;
}
.contact li a span {
position: absolute;
width: 100%;
top: 50%; //ここで下に50%ずらす
left: 0;
text-align: center;
transform : translateY(-50%); //ここで上に50%戻す
}
.contact li a:hover {
cursor: pointer;
opacity: 0.6;
}
@media only screen and (max-width: 786px){
.contact li a {
height: 110px; //スマホのボタンの高さを調節
}
ちょっと複雑なのですが、
- 「a」タグを「li」いっぱいまで広げる
- 中の文字を「span」タグで囲む
- 「li」に「position: relative;」を指定することで起点にする
- 「span」に「position: absolute;」を指定して50%下にずらす
- 「span」を「transform」タグで50%上に戻す
という感じの指示を出しています。
以上、『「transform」タグを使用する方法』でした。
スポンサーリンク
リストのaタグを親要素いっぱいにして上下中央揃えにする時に使ったタグの解説
最後に、上記でも使っている「リストのaタグを親要素いっぱいにして上下中央揃えにする時に使ったタグの解説」をしていきたいと思います。
解説するのは、
- 「a」タグを親要素いっぱいまで広げる方法
- マウスオーバーでリンクを白っぽくする方法
- 「position」タグとは
- リストの「・」を消す方法
の4つ。
それでは、1つずつ解説していきますね。
「a」タグを親要素いっぱいまで広げる方法
まず、『「a」タグを親要素いっぱいまで広げる方法』を解説していきたいと思います。
普通、「div」タグの中にあるテキストに「a」タグを適用すると
こんな感じで、テキストの部分だけがリンクになります。
分かりやすいように、「a」タグの適用範囲を赤いラインで囲っています。
それを「a」タグを親要素いっぱいまで広げることによって、
こんな感じで、色がついている部分のどこにカーソルを持っていっても、リンクに飛べるようになります。
「a」タグを親要素いっぱいまで広げる方法は、こんな感じ。
【HTML】
<div class="contact"> <a href="">メールでのお問い合わせはこちら</a> </div>
【CSS】
.contact {
position: relative;
width: 50%;
height: 60px;
}
.contact a {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
背景の色などはお好みで指定してください。
マウスオーバーでリンクを白っぽくする方法
次に、「マウスオーバーでリンクを白っぽくする方法」をご紹介します。
こんな感じですね。
これは「opacity」というタグを使って、「a」タグの要素の不透明度を操作しています。
今回の例で言うと、40%ぐらい透明にした感じですね。
【CSS】
.contact a {
cursor:pointer;
opacity:0.6;
}
「opacity」タグは「0.0」〜「1.0」で指定することができます。
「0.0」が透明で、「1.0」が通常の不透明な状態ですね。
いろいろ調べていると、
.contact a {
-moz-opacity: 0.6;
-webkit-opacity: 0.6;
opacity:0.6;
}
のような形で書かれていることもありますが、「ベンダープレフィックス」がなくても、ほとんどのブラウザで使用可能なため、あまり必要ないと思っています。
「-moz-」や「-webkit-」は「ベンダープレフィックス」と言い、まだ「CSS3」が各ブラウザで採用されていなかった時に、「CSS3」のタグを適用させるためにつけていたタグのことを言います。
各ブラウザごとに「ベンダープレフィックス」があるため、いくつも指定しなければいけない時期がありました。
ちなみに、「cursor:pointer;」は、「マウスオーバーをすると、カーソルをポインターにする」という指示です。
「position」タグとは
次に、『「transform」タグを使用する方法』で出てきた「positon」タグについての解説です。
「positon」タグには、
- static
- relative
- absolute
- fixed
の4つがあります。
「static」は、何も指定していない状態です。「top」や「left」で位置を指定しても、動きません。
「relative」を指定すると、相対位置に配置されます。もともとの位置から、「top」や「left」で場所をずらすことができます。
「absolute」を指定すると、絶対位置に配置されます。親要素の左上が基準の位置になります。
こちらも「top」や「left」で場所をずらすことができます。
そのため、『「transform」タグを使用する方法』で、親要素「li」の中に「span」を配置して、50%下にずらしました。
最後に「fixed」ですが、これは画面に対しての絶対位置に配置されます。
たとえば、「スクロールしてもずっと画面に表示されているトップメニュー」ってありませんか？
あれは、この「fixed」で指定して、画面の上部に固定しています。
けっこう複雑ですが、うまく使いこなせれば「positon」タグは便利なので、ぜひマスターしましょう！
リストの「・」を消す方法
最後に、『リストの「・」を消す方法』をご紹介します。
通常ですと、
ul {
list-style-type: none;
}
でリストの「・」が消えるのですが、WordPressで有料テーマなどを入れていると、「list-style-type: none;」を入れていても「・」が消えないことがあります。
その際は、大元のCSSから「li:before」のタグを探しましょう。
たとえば、僕がこのブログで使っている「STORK」だと、
.entry-content ul li:before {
content: " ";
width: 9px;
height: 9px;
background: #3E3E3E;
box-shadow: 0 0 20px rgba(51, 51, 51, 0.15) inset;
display: block;
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
left: 2px;
top: 7px;
}
という指示があります。
この指示を子テーマで上書きすることで、リストの「・」を消します。
.entry-content ul li:before {
content: none;
width: 0;
height: 0;
background: #ffffff;
box-shadow: none;
display: block;
position: absolute;
-webkit-border-radius: 0;
border-radius: 0;
left: 0;
top: 0;
}
指定しなくても大丈夫なところもありますが、このような形で指定すると、リストの「・」を消すことができます。
テーマによって指定されている値も違うので、お使いのテーマに合わせて値を変更してください。
以上、「リストのaタグを親要素いっぱいにして上下中央揃えにする時に使ったタグの解説」でした。
スポンサーリンク
【まとめ】リストのaタグを親要素いっぱいにして上下中央揃えにする方法
今回は「リストのaタグを親要素いっぱいにして上下中央揃えにする方法」というテーマでお送りしてきました。
うまくリストのaタグを親要素いっぱいにして、上下中央揃えにできましたでしょうか？
Webサイトを作っていると、よく使うのですが、いつも忘れて調べることになっちゃうんですよね…
それでは、もう一度おさらいですが、『リストのaタグを親要素いっぱいにして上下中央揃えにする方法』を直す方法は、
- 「a」タグの「padding」を調節する方法
- 「display: table;」を使用する方法
- 「transform」タグを使用する方法
の3つでした。
そして、今回は
- 「a」タグを親要素いっぱいまで広げる方法
- マウスオーバーでリンクを白っぽくする方法
- 「position」タグとは
- リストの「・」を消す方法
の方法も解説してみました。
Webサイト制作をしている人や、WordPressやホームページ制作の勉強をしている人のお役に立てたら嬉しいです！
他にも分からない点があれば、「お問い合わせ」までご連絡ください。
以上、ネットショップコンサルタントの「たぶ」でした。
Webサイトの制作に関しては、こちらの記事もおすすめです。
グローバルナビなど、横並びにしたリスト要素がずれることってありませんか？そんな現象を解決する記事を書きました。
Webサイトを制作していると、スムーススクロールが「トップへ戻る」の時だけ効かないことがあります。そんな時の修正方法をまとめています。
ホームページを制作していると、Googleマップを埋め込む必要がある場合があります。その方法を画像を使って解説しました。
【WebデザインならLIG】
【プログラミングはTECH::CAMP】
