WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スマートフォンでのナビメニュー

ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。
PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。
スマホでは制限された面積の中でメニューを作らないといけない為、PC以上に解り易いメニューの作成を心掛ける必要があります。

もちろん今現在、「ハンバーガーメニュー」がスマホ時のメニューのスタンダードになっていますが、しかし必ずしも全ての状況でハンバーガーメニューが良いという訳ではなく、色々なパターンから適切なスマホ用のナビを選べるようになりましょう。


ドロップダウン
f:id:yachin29:20180417114648p:plain

Apple(日本)



ドロワー(右から)
f:id:yachin29:20180417114736p:plain

Yahoo! JAPAN


アニメーション
f:id:yachin29:20180417114900p:plain

西武鉄道Webサイト



固定ナビ
f:id:yachin29:20180417114611p:plain

NTTドコモ ホーム








www.genius-web.co.jp


www.i3design.jp


pantograph.co.jp





f:id:yachin29:20180417210108p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<h1>ロゴ</h1>
<nav class="gnav">
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
</ul>
</nav>
</header>

<div class="container">
<div class="top top-L">
<a href="#">
<div class="cap"> 
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="top top-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-L">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-C">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
<div class="btm btm-R">
<a href="#">
<div class="cap">
<h2>タイトル</h2>
<p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more">view more</p>
</div>
</a>
</div>
</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
/*PCレイアウト*/
header {
  width:10%;
  height:100vh;
  background:#B5B5B5;
  float:left;
}
.container {
  width:90%;
  overflow:hidden;
  float:right;
}

h1 {
  width:160px;
  height:160px;
  background:url(../img/logo-0717.svg) no-repeat center center/cover;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:10%;
  margin:auto;
  z-index:1000;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
.gnav {
  width:100%;
  background:#F44649;
  margin-top:200px;
}
.gnav li {
  width:100%;
  height:calc((100vh - 200px) / 4);
  box-sizing:border-box;
  position:relative;
}
.gnav li a {
  display:block;
  text-align:center;
  color:#FFF;
  line-height:calc((100vh - 200px) / 4);
  box-sizing:border-box;
  padding-top:30px;
}
.gnav li:nth-child(-n+3){
  border-bottom:1px solid #FFF;
}
.gnav li a:before {
  content:"";
  display:block;
  width:40px;
  height:40px;
  background:url(../img/nav1.svg) no-repeat center center/contain;
  position:absolute;
  top:0;
  right:0;
  bottom:30px;
  left:0;
  margin:auto;
  z-index:100;
}
.gnav li:nth-child(2) a:before {
  background:url(../img/nav2.svg) no-repeat center center/contain;
}
.gnav li:nth-child(3) a:before {
  background:url(../img/nav3.svg) no-repeat center center/contain;
}
.gnav li:nth-child(4) a:before {
  background:url(../img/nav4.svg) no-repeat center center/contain;
}
.top {
  width:50%;
  height:50vh;
  float:left;
  position:relative;
  overflow:hidden;
}
.btm {
  width:33.33%;
  height:50vh;
  float:left;
  position:relative;
  overflow:hidden;
}
.top-L {
  background:url(../img/L1.png) no-repeat center center/cover;
}
.top-R {
  background:url(../img/L2.png) no-repeat center center/cover;
}
.btm-L {
  background:url(../img/S1.png) no-repeat center center/cover;
}
.btm-C {
  background:url(../img/S2.png) no-repeat center center/cover;
}
.btm-R {
  background:url(../img/S3.png) no-repeat center center/cover;
}

/*キャプションレイヤー*/
.cap {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50vh;
  padding-top:100px;
  background:rgba(255,0,51,0);
  text-align:center;
  color:#FFFFFF;
  transition:0.2s;
}
.top:hover .cap {
  padding-top:0;
  background:rgba(255,0,51,1);
}
.btm:hover .cap {
  padding-top:0;
  background:rgba(255,0,51,1);
}
.cap h2 {
  font-size:28px;
  padding: 80px 0 50px;
}
.cap .txt {
  font-size:18px;
  margin-bottom:60px;
  line-height:1.5;
}
.cap .more {
  width:30%;
  margin: 0 auto;
  padding: 10px 0;
  border-top: 1px solid #FC3;
  border-bottom: 1px solid #FC3;
}

@media screen and (max-width:767px){
/* SP用スタイル*/
header {
  width:100%;
  height:60px;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  background:#B5B5B5;
  float:none;
}
h1 {
  width:50px;
  height:50px;
  background:url(../img/logo-0717.svg) no-repeat center center/cover;
  position:absolute;
  top:5px;
  right:0;
  bottom:0;
  left:5px;
  margin:0;
  z-index:1000;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
.gnav {
  width:calc(100% - 60px);
  margin-left:60px;
  background:#F44649;
  margin-top:0;
}
.gnav ul {
  overflow:hidden;
}
.gnav li {
  width:25%;
  float:left;
  height:60px;
  box-sizing:border-box;
  position:relative;
}
.gnav li a {
  display:block;
  text-align:center;
  color:#FFF;
  line-height:60px;
  box-sizing:border-box;
  padding-top:18px;
  font-size:12px;
}
.gnav li:nth-child(-n+3){
  border-bottom:none;
}
.gnav li a:before {
  content:"";
  display:block;
  width:30px;
  height:30px;
  background:url(../img/nav1.svg) no-repeat center center/contain;
  position:absolute;
  top:0;
  right:0;
  bottom:20px;
  left:0;
  margin:auto;
  z-index:100;
}
.gnav li:nth-child(2) a:before {
  background:url(../img/nav2.svg) no-repeat center center/contain;
}
.gnav li:nth-child(3) a:before {
  background:url(../img/nav3.svg) no-repeat center center/contain;
}
.gnav li:nth-child(4) a:before {
  background:url(../img/nav4.svg) no-repeat center center/contain;
}
.container {
  width:100%;
  overflow:visible;
  float:none;
  margin-top:60px;
}
.top {
  width:100%;
  height:50vh;
  float:none;
  position:relative;
  overflow:visible;
  margin-bottom:40vh;
}
.btm {
  width:100%;
  height:50vh;
  float:none;
  position:relative;
  overflow:visible;
  margin-bottom:40vh;
}
/*キャプションレイヤー*/
.cap {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:40vh;
  padding-top:10px;
  background:#FFF;
  text-align:center;
  color:#222;
  transition:none;
}
.cap h2 {
  font-size:24px;
  padding: 20px 0;
}
.cap .txt {
  font-size:14px;
  margin-bottom:20px;
  line-height:1.5;
}
.cap .more {
  width:30%;
  margin: 0 auto;
  padding: 10px 0;
  border-top: 1px solid #FC3;
  border-bottom: 1px solid #FC3;
}
.top:hover .cap {
  padding-top:0;
  background:#FFF;
}
.btm:hover .cap {
  padding-top:0;
  background:#FFF;
}
}