知識の枝

"All is well"

Interior Consultantページを作る

約389日前 2020年11月2日19:55
デジタル
HTML devchallenges

改訂履歴


2020/11/2 投稿
2020/11/7 改訂1「5.4 - ハンバーガーの色変更」に詳細記事へのリンクを追加

1. 背景


この記事はDev Challengesでスキルアップの第三弾です。

今回の課題はちょっとオシャレなWebページを作るものです。
課題タイトルは「インテリア コンサルタント」

オシャレさやデザイン性を売りにした商売なのに、紹介するWebページが地味だとなんかちょっと嫌ですよね。
レスポンシブなナビバーを使用したり、コンテンツが重ね合わさった構成になっています。
では始めましょう!

2. チャレンジ内容


・指定された構成の「Interior Consultant」ページを作成する。
・モバイル端末では、ナビゲーションメニューが折り畳まれて隠れること。
・ハンバーガー(三本線のアイコン)をクリックしたら、メニューが表示されること。



【ハンバーガーメニュー】
ページ上部に表示されているメニューバーは画面が大きいときはメニューが全て表示されますが、スマホ等の小さい画面では隠れて見えなくなります。
メニューが隠れる代わりに「ハンバーガーメニュー」と呼ばれるアイコンが表示されます。



3. 成果物の公開方法


Dev Challengesのルールに則り下記①~③の構成とする。

①トップページ
成果物スクショ、デモページへのリンク、経験・学んだこと、何を使用して制作したか

②デモページ
成果物の動作が確認可能なページ

③解説ページ
どのように課題を解決したか説明

①、③は本記事で代用したいと思います。

4. コンテンツ


4.1 - リンク


課題はこちらのサイトから頂いております。
Devchallenges.io

成果物のデモページはこちらです。
デモページ - Interior Consultant

どのように取り組んだかは4.3項で解説しています。
解説へのショートカット

挑戦課題の元ページはこちらです。
挑戦課題 - Interior Consultant

4.2 - 概観





この成果物は
「html」と「CSS(bootstrap4.5)」を使用して作られ、
Djangoによってこのホームページに公開されています。

4.3 - 解説


作成したhtmlコードは下記の通りです。
{% load static %}
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8" />
<title>Interior Consultant</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Lora&family=Montserrat&display=swap" rel="stylesheet">
<!--
font-family: 'Crimson Pro', serif;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
-->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{% static 'Interior_consultant/interior_consultant.css' %}" />
</head>

<body>
<div class="container">
<div class="row mb-lg-5">
<div class="col-3">
<button class="mt-3 border" style="font-family: Crimson Pro; font-size: 12px; color: white; background-color: black;">THIS INTERIOR</button>
</div>
<div class="col-9">
<nav class="navbar navbar-expand-lg">
<div></div>
<button class="btn btn-link d-lg-none" type="button" data-toggle="modal" data-target="#menuModal" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Expand表示時のNavbar表示設定 -->
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item mx-4">
<a class="nav-link" href="#" style="font-weight: 700;">Home</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="#">Collection</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<!-- Modal表示時のリスト設定 -->
<div class="modal fade fullscreen" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close mb-5" data-dismiss="modal" aria-label="Close">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="modal-body text-center mt-5">
<ul style="list-style-type:none;">
<li><a href="#" style="font-weight: 700;">Home</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-5">
<h1 class="mt-4 mb-3" style="font-family: Lora;">Modern interior</h1>
<h5 class="my-5" style="font-family: Montserrat; color: lightgray;">A full-Service residential & commercial interior design and staging company offering professional organizing & eco-services.</h5>
<a>Read more →</a>
</div>
<div class="col-lg-7 offset-lg-1 mt-3">
<img src="{% static 'Interior_consultant/photo1.png' %}" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-9 offset-lg-8 offset-2">
<div class="containter mr-1 py-2" style="background-color: black; margin-top: -75px;">
<div class="row">
<div class="col-3">
<img src="{% static 'Interior_consultant/photo2.png' %}" class="img-fluid ml-3 mt-1" style="border-radius: 50%;">
</div>
<div class="col-9 mt-3">
<h6 style="font-family: Montserrat;">Aliza Webber</h6>
<h6 style="font-family: Montserrat; color:gray">Interior designer</h6>
</div>
</div>
<div class="row">
<div class="col ml-3 mt-3">
<h5 style="font-family: Lora;">Designed in 2020 by<br> Aliza Webber</h5>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>

<footer class="text-center">
<div class="container mt-5">
<p class="text-black">chuna @ DevChallenges.io</p>
</div>
</footer>
</html>

デモページの成果物は上記のhtmlコードで作成されています。

基本的にはBootstrapのCSSを使用していますが、そのままの流用では対応できないデザインについては別途CSSファイルを作成しています。
body {
background-color: black;
color: white;
}

a:link,
a:visited,
a:hover,
a:active {
color: white;
font-family: Montserrat;
}

.navbar-toggler {
border-color: "white";
}

.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.fullscreen .modal-dialog {
margin: 0 0 0 0;
max-width: 100%;
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
}

.fullscreen .modal-content {
height: 100%;
min-height: 100%;
border-radius: 0;
background: black;
overflow: auto;
}

.fullscreen .modal-content .modal-header .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8 l20 20 M4 28 l20 -20'/%3E%3C/svg%3E");
}

.fullscreen .modal-content .modal-header {
border: 0px;
}

.fullscreen .modal-content button {
opacity: 1;
}

.fullscreen .modal-content button span {
font-size: 20px;
text-shadow: none;
}

.fullscreen .modal-body ul {
padding: 0 0 0 0;
}
.fullscreen .modal-body li {
padding-bottom: 43px;
}
.fullscreen .modal-body a {
color: white;
font-size: 16px;
}

CSSの中身については後で解説します。



課題の完成イメージをパッと見て、だいたいこんな感じかな~と最初に作った枠組みです。
基本的にこの構成でそのまま作ることができました。

それでは次項から詰まった箇所について解説していきます。

5. 詰まったところ


進める上で困ったところがいくつかあったので紹介します。

5.1 - Navbarの中身を右寄せ


Bootstrapのナビバーのメニューはデフォルトで左寄せになっています。
今回は右寄せで表示したい為、下記のように変更します。

【変更前】
<div class="collapse navbar-collapse" id="navbarNav">

【変更後】
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

「justify-content-end」をnavbar要素に追加するだけです。

5.2 - 透明Navbar


Bootstrapのナビバーの背景色は公式サイトのコードをコピペすると、薄グレーの背景に黒系の文字色で表示されます。
<nav class="navbar navbar-light bg-light">




今回は背景が黒色のページでナビバーも黒色にしたいので、背景色の指定を取り除きます。
<nav class="navbar navbar-light">

「bg-light」を消しました。
これで背景色の指定が無くなった(=透明になった)ので、ナビバーの背景が黒色になります。

ちなみに好きな背景色にしたい場合、
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">

こんな感じでスタイルとして背景色を指定します。
下記のように色名でも指定可能です。
<nav class="navbar navbar-light" style="background-color: black;">

色名や色コードは下記サイトを参考にすると良いと思います。
★WEBカラーリファレンス

スタイルで直接変更する以外にも、CSSで指定することもできます。
nav {
  background-color: blue;
}

背景色を指定する対象が<nav>タグなので、CSSでnavを対象として背景色を指定します。

今回の場合、文字色が黒色のままだとナビメニューが見えなくなってしまうので、文字色は白にしておきましょう。

5.3 - ハンバーガーを右に表示


画面サイズが小さいとき、ナビゲーションメニューが折り畳まれてハンバーガーメニューに変わります。
このハンバーガーメニューを右側に表示する方法(左側に表示する方法)をお教えします。

結論から言うと、
ボタン要素よりも上位に別のタグ要素があると右側に表示され、
タグ要素が何も無いと左側に表示されます。
<nav class="navbar navbar-expand-lg">
<div></div> #←この部分の「ある」「なし」で位置が変わる
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

上記はBootstrapの公式ページからコピペしたコードです。
ハンバーガートグルボタン要素の上側に、空の<div>要素を入れています。
この状態のとき、ハンバーガーメニューは右側に表示されます。
この<div>要素が無いと、ハンバーガーメニューは左側に表示されます。

<div>要素の代わりに<a>タグ要素が入っていても同じです。
何かが配置されていると右側に出ます。

今回はただ単純に右側にハンバーガーメニューを表示したかったので、
<div></div>を挿入しています。

5.4 - ハンバーガーの色変更


ハンバーガーメニューの三本線の色は、Bootstrapのデフォルトで黒色です。
このままでは背景色の黒に紛れてしまうので、線の色を白色に変更します。

実はこのハンバーガーメニューアイコン、画像を貼っているわけではないんです。
SVGと呼ばれる形式の画像をテキストデータで作成して描写します。
今回のトグルアイコンは<button>タグに囲まれた<span>タグで表現されています。
<button class="btn btn-link d-lg-none" type="button" data-toggle="modal" data-target="#menuModal" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> #←これがハンバーガーアイコン
</button>

Bootstrapのデフォルトでは「navbar-toggler-icon」は黒線のハンバーガーになっています。
CSSでこの「navbar-toggler-icon」を編集して白色に書き換えます。
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

とても難解そうに見えますが、重要なのは「stroke='white'」の部分です。
ここで”白色”の線として定義しています。

その他の
「stroke-width='2'」は線の幅
「stroke-linecap='round'」は線の角を丸める処理
「stroke-miterlimit='10'」これはいらないと思います
「d='英数字羅列'」は線の形を表しています。

SVGの線の形の表し方は別途記事で解説したいと思います。


改訂1
記事を作成しました。こちら




5.5 - トグルが開かない


これは完全に自分のミスでした。
ハンバーガーアイコンを押してもメニューが表示されなかった為、原因を探りました。
答えはBootstrapの公式ページに書いてありました・・・。
以下、引用です。

デフォルトでレスポンシブになっているが, 変更可能です。レスポンシブの動作はJavaScriptの折り畳みプラグインに依存します。

いくつかのコンポーネントで jQuery, Popper.js などの JavaScript プラグインが必要です。<script> を </ body> の直前に順番通りに入れてください。

JavaScript を必要とするコンポーネントを表示
• Alerts for dismissing
• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper.js)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Tooltips and popovers for displaying and positioning (also requires Popper.js)
• Scrollspy for scroll behavior and navigation updates

https://getbootstrap.jp/docs/4.5/getting-started/introduction/


簡単に言うと、下記を全部<body>タグの最後に入れろ と言っています。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


これで解決です。トグルをクリックするとメニューが開きます。

5.6 - メニューを全画面化


こちらのサイトを参考にさせて頂きました。
丁寧な解説をありがとうございます。
Navbarをフルスクリーンにする方法:Bootstrap 4

レンタルサーバーナレッジ


上記サイトを参考にナビバーの<button>タグを編集します。
変更前のボタンタグは下記のような感じです。
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

最初の部分の
class="navbar-toggler"


class="btn btn-link d-lg-none"

に変更しました。
ボタン要素に変更しつつ、lg画面サイズ以上ではトグルボタンを表示させない設定をしています。

この閾値(=lg)の指定を間違えると、トグルボタンとナビバーが同時に表示されたり、どちらも表示されないようになってしまいます。


変更前の「navbar-toggler」クラス指定のときは、navbarのexpand閾値に合わせて自動で表示・非表示を切り替えてくれていましたが、
ボタン要素に変更しているので自分で表示・非表示の切り替え設定を付け加える必要があります!

全画面化の部分については先ほどのサイトを参考にして頂ければ問題無く実装できると思います。

5.7 - 閉じる「×」を作成


先ほど出てきたSVG画像をここでも使用します。
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

dの部分を抜き出して見やすく並べました。
d='
M4,8
h24
M4,16
h24
M4,24
h24'

上記の文字列は「三本線」を表しています。
ここを下記のように書き換えると「×」マークになります。
d='
M4,8
l20,20
M4,28
l20,-20'

ここでは詳しくは説明しませんが、簡単に言うと上記の数字は「座標」を示しています。
左上を原点(0, 0)とし、右下を正の領域として扱われています。

6 - さいごに


ちょこちょこ調べながら進めていたら思った以上に時間が掛かってしまいました。
少しずつでも進めればいつかは終わるので、今後も継続して課題に取り組みたいと思います。

以上、お疲れ様でした。