スマホ向けwebページでよくある横幅いっぱいデザインの作り方メモ。主に参考書籍のサンプルHTMLを使っています。
ブロックが横幅いっぱいに広がったリンク
テキストだけでなくブロック全体がリンクになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style tyle="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
border-bottom: 1px solid #000;
}
p.ttl {
font-weight: bold;
margin-bottom: 5px;
}
a {
font-size: 12px;
color: #000;
text-decoration: none;
display: block;
position: relative;
padding: 10px 20px 10px 10px;
}
a:after {
display: block;
position: absolute;
top: 50%;
right: 10px;
width: 5px;
height: 5px;
margin-top: -3px;
border-top: 2px solid #333;
border-right: 2px solid #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}
</style>
</head>
<body>
<ul>
<li><a href="#">
<p class="ttl">リンクタイトル</p>
<p class="txt">リンクテキストリンクテキスト</p>
</a></li>
<li class="last"><a class="last" href="#">
<p class="ttl">リンクタイトル</p>
<p class="txt">リンクテキストリンクテキスト</p>
</a></li>
</ul>
</body>
</html>
ブロックが横幅いっぱいに広がったヘッダリンク
テキストだけでなくブロック全体がリンクになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style tyle="text/css">
* {
margin: 0px;
padding: 0px;
}
ul {
display: table;
width: 100%;
table-layout: fixed;
font-size: 12px;
}
li {
list-style-type: none;
display: table-cell;
}
a {
text-align: center;
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
}
li.left {
background-color: red;
}
li.center {
background-color: blue;
}
li.right {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li class="left"><a href="#">
<p>ナビゲーション1</p>
</a></li>
<li class="center"><a href="#">
<p>ナビゲーション2</p>
</a></li>
<li class="right"><a href="#">
<p>ナビゲーション3</p>
</a></li>
</ul>
</body>
</html>
別の方法として、liタグ全てをfloat:leftして、それぞれの横幅をwidth:33%, width:34%, width:33%にする方法もあります。
ただ、floatを使うと横幅計算の誤差により右側に余白が空いてしまいます。なので、上記のdisplay:tableを使う方法が確実です。
ブロックが横幅いっぱいに広がったフッタリンク
テキストだけでなくブロック全体がリンクになっています。
今回はfloat:leftを使いました。なので、4つ目のli要素が次の行にいってしまっています。
仮に4つ目のli要素がなくても左詰めになってしまう(真ん中揃えではない)ので、見栄えをよくするなら、ヘッダリンクと同じようにdisplay:tableを使った方がいいと思います。
さらに今回は、CSSの指定方法を3種類書いています。パターン1～3のどれを使っても同じ結果になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style tyle="text/css">
* {
margin: 0px;
padding: 0px;
}
a {
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
}
ul {
overflow: hidden;
font-size: 12px;
}
li {
list-style-type: none;
float: left;
}
/* パターン1 */
li+li {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #000;
}
/* パターン1終わり */
/* パターン2 */
li {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #000;
}
li:first-child {
margin-left: 0;
padding-left: 0;
border-left: none;
}
/* パターン2終わり */
/* パターン3 */
li:not(:first-child) {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #000;
}
/* パターン3終わり */
</style>
</head>
<body>
<ul>
<li class="left"><a href="#">
<p>ナビゲーション1</p>
</a></li>
<li class="center"><a href="#">
<p>ナビゲーション2</p>
</a></li>
<li class="right"><a href="#">
<p>ナビゲーション3</p>
</a></li>
<li class="right"><a href="#">
<p>ナビゲーション4</p>
</a></li>
</ul>
</body>
</html>
横幅いっぱいに広がった画像
このサンプルだけは、参考書籍ではなくこのページのサンプルを使いました。
まず、サンプル画像の実際のサイズ。
実際のサイズで表示しています。
CSSを使ってウインドウ幅に合わせて自動リサイズした画像。
縦横比率を保ったままリサイズされています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style tyle="text/css">
* {
margin: 0px;
padding: 0px;
}
p.resizeimage img {
width: 100%;
}
/* こうすると右に20%の余白が空きます */
p.resizeimage {
width: 80%;
}
p.resizeimage img {
width: 100%;
}
/* 右に余白のサンプルここまで */
/* 最大・最小の幅を指定することもできます */
p.resizeimage {
max-width: 800px;
min-width: 240px;
}
p.resizeimage img {
width: 100%;
}
/* 最大・最小のサンプルここまで */
</style>
</head>
<body>
<p class="resizeimage">
<img src="abc.png">
</p>
</body>
</html>
imgタグにwidth属性とheight属性を正しく指定して、CSSでwidth:100%, height:100%と指定してもOKです。
参考にしたページには、「画像が小さくなりすぎても困らないように、2種類の大きさの画像を使い分ける方法」も解説されています。
参考書籍
参考リンク
この記事を書くときの特殊な文字のエスケープに使いました。むっちゃ便利です！
