webサイト制作の勉強|2018月2月クラスブログ

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>フルスクリーンレイアウトその1</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<header>
<h1>タイトル</h1>
<nav>
<ul class="gnav">
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
</ul>
</nav>
</header>

<div class="container">
<div class="top top-L">
<a href="#">
<div class="cap">
<h2>コンテンツのタイトル</h2>
<p class="txt">コンテンツの説明文</p>
<p class="more">view more &gt; </p>
</div><!--/.cap-->
</a>
</div>

<div class="top top-R">
<a href="#">
<div class="cap">
<h2>コンテンツのタイトル</h2>
<p class="txt">コンテンツの説明文</p>
<p class="more">view more &gt; </p>
</div><!--/.cap-->
</a>
</div>
<div class="bottom btm-L">
<a href="#">
<div class="cap">
<h2>コンテンツのタイトル</h2>
<p class="txt">コンテンツの説明文</p>
<p class="more">view more &gt; </p>
</div><!--/.cap-->
</a>
</div>
<div class="bottom btm-C">
<a href="#">
<div class="cap">
<h2>コンテンツのタイトル</h2>
<p class="txt">コンテンツの説明文</p>
<p class="more">view more &gt; </p>
</div><!--/.cap-->
</a>
</div>
<div class="bottom btm-R">
<a href="#">
<div class="cap">
<h2>コンテンツのタイトル</h2>
<p class="txt">コンテンツの説明文</p>
<p class="more">view more &gt; </p>
</div><!--/.cap-->
</a>
</div>
</div>
</body>
</html>


スタイルシート

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

html,body,h1,h2,h3,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト*/
header {
  width:10%;
  height:100vh;
  background:#666666;
  float:left;
}
nav {
  width:100%;
  height:300px;
  margin-top:100px;
}
.gnav li {
  height:100px;
}
.gnav li a {
  display:block;
  text-align:center;
  padding: 64px 0 20px 0;
  color:#FFF;
  border-top:1px solid #FFF;
  position:relative;
}
.gnav li:last-child a {
  border-bottom:1px solid #FFF;
}
.gnav li a:hover {
  background:#003366;
}
/*疑似要素*/
.gnav li a:after {
  content:"";
  display:block;
  width:40px;
  height:40px;
  background:url(../img/icon01.svg) no-repeat center center/contain;
  position:absolute;
  top:-30px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}
.gnav li:nth-child(2) a:after {
   background:url(../img/icon02.svg) no-repeat center center/contain;
}
.gnav li:nth-child(3) a:after {
   background:url(../img/icon03.svg) no-repeat center center/contain;
}

.container {
  width:90%;
  float:right;
  overflow:hidden;
}
h1 {
  width:160px;
  height:160px;
  background:url(../img/logo.svg) no-repeat center center/cover;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:10%;
  margin:auto;
}
.top {
  width:50%;
  height:50vh;
  float:left;
  overflow:hidden;
}
.bottom {
  width:33.33%;
  height:50vh;
  float:left;
  overflow:hidden;
}
.top-L {
  background:url(../img/L1.png) no-repeat center center/cover;
}
.top-R {
  background:url(../img/L2.png) no-repeat right top/cover;
}
.btm-L {
  background:url(../img/S1.png) no-repeat left top/cover;
}
.btm-C {
  background:url(../img/S2.png) no-repeat center center/cover;
}
.btm-R {
  background:url(../img/S3.png) no-repeat right top/cover;
}

.cap {
  width:100%;
  height:50vh;
  background:rgba(234,50,65,0);
  text-align:center;
  padding-top:180px;
  box-sizing:border-box;
  color:#FFFFFF;
  transition:0.2s;
}
.cap:hover {
  width:100%;
  height:50vh;
  background:rgba(234,50,65,1);
  text-align:center;
  padding-top:60px;
  box-sizing:border-box;
  color:#FFFFFF;
}
h2 {
  font-size:22px;
  margin-bottom:60px;
}
p.txt {
  margin-bottom:60px;
}
p.more {
  width:40%;
  color:#C9B274;
  padding: 10px 0;
  margin: 0 auto;
  border-top: 1px solid #C9B274;
  border-bottom: 1px solid #C9B274;
}
@media screen and (max-width:767px){
  /*スマホのレイアウト*/
header {
  width:100%;
  height:80px;
  float:none;
  padding:10px;
  box-sizing:border-box;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
}
nav {
  width:230px;
  float:right;
  height:60px;
  margin-top:0;
}
.gnav {
  overflow:hidden;
}
.gnav li {
  width:33.33%;
  height:60px;
  float:left;
}
.gnav li a {
  font-size:12px;
  padding: 43px 0 5px 0;
  border-top:none;
}
.gnav li:last-child a {
  border-bottom:none;
}
.gnav li a:hover {
  background:transparent;/*背景色を透明にする*/
}
.gnav li a:after {
  width:30px;
  height:30px;
   top:-20px;
}



.container {
  width:100%;
  float:none;
  overflow:hidden;
  padding-top:80px;
}
h1 {
  width:60px;
  height:60px;
  position:static;
  margin:0;
  float:left;
}

.top {
  width:100%;
  height:50vh;
  float:none;
  overflow:visible;
  margin-bottom:40vh;
  position:relative;
}
.bottom {
  width:100%;
  height:50vh;
  float:none;
  overflow:visible;
  margin-bottom:40vh;
  position:relative;
}
.cap {
  width:100%;
  height:40vh;
  background:rgba(234,50,65,1);
  padding-top:60px;
  transition:none;
  position:absolute;
  left:0;
  top:100%;
}
}