前回にランディングページを量産するための雛形を作成しました。
これをベースに、僕の勤め先の事業所のランディングページを作るべく作業をしていたのですが、いろいろ不具合があったりより良い表示方法を思いついたりと結構改善ポイントがありました。
今回はその改善後のポイントをまとめました。
サンプルページ
サンプルページです。
前回の分は不具合も含めてそのまま残してありますので比較してみてください。
主な改善ポイント
viewportの指定
かなり初歩的なミスですが、レスポンシブデザインとか言っておきながらviewportを指定していませんでした。
ヘッダーで下記のコードを追加しています。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">ヘッダーロゴを横幅いっぱいにする
ヘッダーロゴは横幅いっぱいにした方が見映えがいいですね。
ただ、画像に高さがあるとヘッダーロゴでページが埋まってしまうので、画像サイズはよく確認した方がいいです。
ナビゲーションメニューはページ最上部に固定
前回はヘッダーロゴの下にナビゲーションメニューを表示していましたが、画面のページ最上部に固定表示するようにしました。
それに伴い、ヘッダーロゴの上部にナビゲーションメニューの高さ分のpaddingを指定しています。
最上部に固定することにより、メニューのボタンを押したときに各見出しへジャンプしたときにナビゲーションメニューが被ってしまいます。そこで各ジャンプ先にpadding-topを設定してmargin-topで相殺するという方法で対応しています。
padding-top: 50px;
margin-top: -50px;また、メニューを表示するためにトップへ戻るボタンを表示していましたが、最上部固定により不要になりましたので消しました。
あと細かいことですが、ナビゲーションメニューにポインタを重ねたときにborderが表示されるように指定していましたが非表示にしました。この方がスッキリします。
見出しやナビゲーションメニューの高さをline-heightで調整
前回は各見出しの高さをpaddingで調整していたのですが、これだと文字が上下に少しずれてしまいます。
paddingではなくline-heightで指定する方が、文字がちょうど上下の中央にきてくれます。
ナビゲーションメニューについても、文字が各ボタンの上に表示されるのをpaddingで調整していたところ微妙にずれてしまっていたのですが、line-heightで指定してやることで確実に上下中央に表示させることができました。
あと細かいところですが大見出しに背景をつけたりとデザインを少し変えています。
コード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルページ</title>
<link rel="icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="ランディングページのサンプルです。" />
<meta name="keywords" content="ほげ,ふが,ぴよ" />
<meta name="robots" content="noindex" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/menu-btn.js"></script>
<script type="text/javascript" src="js/page-scroll.js"></script>
</head>
<body>
<header>
<div id="header-inner">
<h1 id="top"><img src="img/3000-800.png" alt="サンプルページ"></h1>
</div>
<nav id="header-menu">
<div id="header-menu-inner">
<ul class="menu">
<li><a href="#section01">ほげほげ</a></li>
<li><a href="#section02">ふがふが</a></li>
<li><a href="#section03">ぴよぴよ</a></li>
<li><a href="#section04">アクセス</a></li>
<li><a href="#section05">お問い合わせ</a></li>
</ul>
</div>
</nav>
<nav id="sp-menu">
<div id="sp-menu-inner">
<ul class="menu">
<li><a href="#section01">ほげほげ</a></li>
<li><a href="#section02">ふがふが</a></li>
<li><a href="#section03">ぴよぴよ</a></li>
<li><a href="#section04">アクセス</a></li>
<li><a href="#section05">お問い合わせ</a></li>
<li><a class="close"><i class="fas fa-angle-down"></i> メニューを閉じる</a></li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="content-inner">
<div id="section01" class="content-block">
<h2>ほげほげ</h2>
<figure class="img-midium-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<p>十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給ほうきゅうもほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵こしらえ直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
<figure class="img-small-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
</div>
<div id="section02" class="content-block">
<h2>ふがふが</h2>
<figure class="img-midium-right"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<p>十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給ほうきゅうもほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵こしらえ直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
<figure class="img-small-right"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
</div>
<div id="section03" class="content-block">
<h2>ぴよぴよ</h2>
<figure class="img-midium-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<figure class="img-midium-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<p>十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給ほうきゅうもほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵こしらえ直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
<figure class="img-small-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<figure class="img-small-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<figure class="img-small-left"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
<h3>中見出し</h3>
<figure class="img-large"><a href="img/900-600.png" target="_blank"><img src="img/900-600.png" title="" alt=""></a><figcaption>説明</figcaption></figure>
<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<p>十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給ほうきゅうもほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵こしらえ直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
<h4>小見出し</h4>
<p>そのころわたくしは、モリーオ市の博物局に勤めて居りました。</p>
<p>十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給ほうきゅうもほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵こしらえ直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
</div>
<div id="section04" class="content-block">
<h2>アクセス</h2>
<div class="access-col-left">
<img src="img/900-600.png" />
</div>
<div class="access-col-right">
<table>
<tbody>
<tr>
<th>所在地</th>
<td>〒602-8611<br />京都市上京区京都御苑</td>
</tr>
<tr>
<th>最寄駅</th>
<td>◆地下鉄烏丸線 今出川駅から徒歩5分<br />◆市バス 烏丸今出川から徒歩5分</td>
</tr>
<tr>
<th>駐車場</th>
<td>なし<br />※近隣のコインパーキングをご利用ください</td>
</tr>
<tr>
<th>連絡先</th>
<td>TEL: 000-000-0000<br/>※受付は平日9:00～16:00</td>
</tr>
</tbody>
</table>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6534.675824174001!2d135.75905097536986!3d35.02327547141156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6001087b148e5f1d%3A0x1f8b7a1904610955!2z5Lqs6YO95b6h6IuR!5e0!3m2!1sja!2sjp!4v1676475462430!5m2!1sja!2sjp" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div id="section05" class="content-block">
<h2>お問い合わせ</h2>
<p style="text-align: center;">お問い合わせ方法は下記のボタンから <i class="fas fa-envelope"> フォーム</i>か <i class="fa fa-phone"> 電話</i> をお選びください。</p>
<p style="text-align: center;">スマートフォンであればから <i class="fa fa-phone"></i> ボタンから発信が可能です。</p>
<div id="contact">
<div class="contact-btn">
<a href="contact/" target="_blank"><span class="contact-icon"><i class="fas fa-envelope"></i></span><br />フォーム入力画面へ</a>
</div>
<div class="contact-btn">
<a href="tel:0000000000"><span class="contact-icon"><i class="fa fa-phone"></i></span><br />000-000-0000</a>
</div>
</div>
</div>
</div> <!-- content-inner-->
</div> <!-- content -->
<footer>
<div id="footer-inner">
<div id="footer-left">
<h2>サイト作成者</h2>
<h3>しめひつ</h3>
<ul>
<li>Email: sample@example.com</li>
<li>TEL: 000-000-0000</li>
</ul>
</div>
<div id="footer-right">
<h2>作成者HP</h2>
<h3><a href="https://www.iehohs.com" target="_blank">iEhohs.com</a></h3>
<ul>
<li>URL: https://www.iehohs.com</li>
</ul>
</div>
</div> <!-- footer-inner -->
<!-- メニューボタン -->
<div id="menu-btn">
<a class="open"><i class="fas fa-bars"></i>
<div id="menu-btn-text">MENU</div></a>
</div>
</footer>
</body>
</html>CSS
body {
background: #fffdfd;
color: #222222;
font-size: 16px;
font-family: 'M PLUS Rounded 1c','Noto Sans JP', sans-serif;
}
a {
color: #4193a6;
}
img {
max-width: 100%;
}
a img:hover {
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
header {
margin-bottom: 1.5em;
}
footer {
display: block;
background: #fdcecc;
border-top: 3px solid #fb8781;
font-size: 0.8em;
height: 100%;
}
#header-inner {
width: 100%;
}
#header-menu-inner,
#sp-menu-inner,
#content-inner,
#footer-inner {
max-width: 900px;
margin-left: auto;
margin-right: auto;
height: auto;
}
#footer-inner {
padding: 1em 10px;
}
#footer-left,
#footer-right {
display: block;
float: left;
width: 100%;
margin-bottom: 1em;
}
footer li {
list-style-type: none;
}
@media screen and (min-width: 900px){
#footer-inner{
padding-left: 0;
padding-right: 0;
}
#footer-left,
#footer-right {
display: inline-block;
width: 48%;
}
}
/* ナビゲーションメニュー */
#header-menu {
display: none;
position: fixed;
z-index: 999;
top: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
background: #fb8781;
}
#sp-menu {
width: 100%;
bottom: -300px;
position: fixed;
z-index: 999;
background: #fb8781;
}
ul.menu {
position: relative;
clear: both;
width: 100%;
background: #fb8781;
}
ul.menu li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
height: 50px;
list-style-type: none;
text-align: center;
font-size: 80%;
}
ul.menu li a {
display: block;
line-height: 50px;
color: #fffdfd;
background: #fb8781;
text-decoration: none;
}
ul.menu li a:hover{
background: #fffdfd;
color: #fb8781;
transition: 0.5s;
}
#menu-btn,
#top-btn {
position: fixed;
bottom: 15px;
right: 15px;
height: 50px;
width : 50px;
}
#menu-btn a {
display: block;
background: #fb8781;
text-align: center;
color: #fff;
font-size: 1.5em;
text-decoration: none;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
border-radius: 10px;
height: 45px;
width: 45px;
}
#menu-btn a:hover,
#top-btn a:hover {
background: #fffdfd;
border: solid 0.5px #fb8781;
color: #fb8781;
transition: 0.5s;
}
#menu-btn-text,
#top-btn-text {
font-size: 0.5em;
}
@media screen and (min-width: 900px){
#header-menu {
display: block !important;
}
#sp-menu {
display: none !important;
}
ul.menu li{
width: 20%;
}
#menu-btn,
#close-btn {
display: none !important;
}
#header-inner {
padding-top: 50px;
}
.content-block {
padding-top: 50px;
margin-top: -50px;
}
}
/* clearfix */
#header-menu-inner:after,
.content-block:after,
#footer-inner:after,
.clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: " ";
font-size: 0;
}
h1 {
font-size: 0;
}
/* コンテンツ部分 */
#content {
padding-left: 10px;
padding-right: 10px;
}
.content-block {
margin-bottom: 1.5em;
}
.content-block h2 {
margin-bottom: 0.8em;
padding-left: 0.8em;
border-left: solid 5px #fb8781;
background-color: #fdcecc;
line-height: 3em;
font-size: 1.6em;
}
.content-block h3 {
margin-bottom: 0.8em;
padding-left: 0.8em;
border-left: solid 5px #fb8781;
line-height: 2.5em;
font-size: 1.4em;
}
.content-block h4 {
margin-bottom: 0.8em;
border-bottom: solid 5px #fb8781;
line-height: 2em;
font-size: 1.2em;
}
.content-block p {
line-height: 2em;
margin-bottom: 0.5em;
}
#content ul,
#content ol {
margin-bottom: 1.5em;
padding-left: 3em;
}
/* 画像配置 */
.img-small-left,
.img-small-right {
display: inline-block;
float: left;
width: 30%;
margin: 0 1.6% 0.5em;
}
.img-large {
width: 100%;
margin-bottom: 1em;
}
.img-midium-left,
.img-midium-right {
display: inline-block;
float: left;
width: 46.6%;
margin: 0 1.6% 0.5em;
}
.img-small-left,
.imf-middle-left {
float: left;
}
.img-small-right,
.img-midium-right {
float: right;
}
figure {
text-align:center;
}
figcaption {
color: grey;
font: 0.7em arial;
}
.float-none {
clear: both;
}
/* アクセス */
@media screen and (min-width: 768px){
.access-col-left,
.access-col-right {
display: inline-block;
vertical-align: top;
}
.access-col-left {
width: 50%;
}
.access-col-right {
width: 47%;
margin-left: 1em;
font-size: 15px;
}
}
/* テーブル */
table {
margin-bottom: 1.5em;
}
table th,
table td {
padding: 0.6em 0.8em;
}
table th {
background-color: #ddd;
}
table td {
background-color: #eee;
}
/* お問い合わせ */
#contact {
max-width: 600px;
margin: 1em auto;
padding: 30px;
background: #fdcecc;
border-radius: 20px;
text-align: center;
}
.contact-btn {
display: inline-block;
width: 100%;
height: 100%;
margin: 0.2em 0;
text-align: center;
}
.contact-btn a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
padding: 0.5em 0;
border: solid 0.5px #4193a6;
border-radius: 10px;
background: #4193a6;
color: #fffdfd;
text-decoration: none;
}
.contact-btn a:hover {
background: #fffdfd;
color: #4193a6;
transition: 0.5s;
}
.contact-icon {
font-size: 1.5em;
}
@media screen and (min-width: 900px){
.contact-btn {
width: 40%;
height: 80px;
margin: 1em 1em;
}
}
/*
#fb8781 濃いピンク
#fdcecc 薄いピンク
#fffdfd 白
#5acae6 青
#4193a6 緑
*/
JavaScriptは特に変更点はないので今回は割愛です。
コメント