知識の枝

"All is well"

My team pageを作る

約404日前 2020年10月18日14:21
デジタル
HTML devchallenges

改訂履歴


2020/10/18 投稿

1. 背景


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

ある会社やプロジェクトのホームページを見に行くと、
仕事に携わるメンバー紹介ページがある場合があります。

このページを作ってみようというのが今回の課題です。

2. チャレンジ内容


・指定された構成の「My team page」ページを作成する。
・ページはレスポンシブデザインであること。



【レスポンシブデザイン】
ウェブページを閲覧する端末(画面サイズ)によってページの表示内容を変更し、画面サイズごとに見易い最適な表示を行う設計のこと。

3. 成果物の公開方法


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

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

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

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

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

4. コンテンツ


4.1 - リンク


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

成果物のデモページはこちらです。
デモページ - My team page

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

挑戦課題の元ページはこちらです。
挑戦課題 - My team page

4.2 - 概観





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

4.3 - 解説


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

<title>My team page</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=PT+Serif&family=Poppins&display=swap" rel="stylesheet">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />

</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-sm-5 offset-sm-1 mt-1 mb-4">
<h1 style="font-family: 'PT Serif' ;font-weight: 700;">The creative crew</h1>
</div>
<div class="col-sm-5">
<h5 style="font-family: 'Poppins';font-weight: 700;">WHO WE ARE</h5>
<h5 style="font-family: 'Poppins';">We are team of creatively diverse, driven, innovative individuals working in various locations from the world.</h5>
</div>
</div>
<div class="row mt-5">
<div class="col-6 col-md-4">
<div class="container">
<div class="row">
<div class="col-10" style="padding: 0">
<img src="{% static 'My_team_page/photo1.png' %}" class="img-fluid" />
</div>
<div class="col-2" style="padding: 0;">
<h6 class="ml-4" style="font-family: 'PT Serif';transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">PRODUCT OWNER</h6>
</div>
</div>
<div class="row">
<div class="col" style="padding: 0;">
<h5 class="mt-3" style="font-family: 'Poppins';font-weight: 700;">Bill Mahoney</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4">
<div class="container">
<div class="row mt-5">
<div class="col-10" style="padding: 0">
<img src="{% static 'My_team_page/photo2.png' %}" class="img-fluid" />
</div>
<div class="col-2" style="padding: 0;">
<h6 class="ml-4" style="font-family: 'PT Serif';transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">ART DIRECTOR</h6>
</div>
</div>
<div class="row">
<div class="col" style="padding: 0;">
<h5 class="mt-3" style="font-family: 'Poppins';font-weight: 700;">Saba Cabrera</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4">
<div class="container">
<div class="row">
<div class="col-10" style="padding: 0">
<img src="{% static 'My_team_page/photo3.png' %}" class="img-fluid" />
</div>
<div class="col-2" style="padding: 0;">
<h6 class="ml-4" style="font-family: 'PT Serif';transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">TECH LEAD</h6>
</div>
</div>
<div class="row">
<div class="col" style="padding: 0;">
<h5 class="mt-3" style="font-family: 'Poppins';font-weight: 700;">Shae Le</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4">
<div class="container">
<div class="row mt-5 mt-md-0">
<div class="col-10" style="padding: 0">
<img src="{% static 'My_team_page/photo4.png' %}" class="img-fluid" />
</div>
<div class="col-2" style="padding: 0;">
<h6 class="ml-4" style="font-family: 'PT Serif';transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">UX DESIGNER</h6>
</div>
</div>
<div class="row">
<div class="col" style="padding: 0;">
<h5 class="mt-3" style="font-family: 'Poppins';font-weight: 700;">Skylah Lu</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4">
<div class="container">
<div class="row mt-md-5 mt-0">
<div class="col-10" style="padding: 0">
<img src="{% static 'My_team_page/photo5.png' %}" class="img-fluid" />
</div>
<div class="col-2" style="padding: 0;">
<h6 class="ml-4" style="font-family: 'PT Serif';transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">DEVELOPER</h6>
</div>
</div>
<div class="row">
<div class="col" style="padding: 0;">
<h5 class="mt-3" style="font-family: 'Poppins';font-weight: 700;">Griff Richards</h5>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4">
<div class="container">
<div class="row mt-5 mt-md-0">
<div class="col-10" style="padding: 0">
<img src="{% static 'My_team_page/photo6.png' %}" class="img-fluid" />
</div>
<div class="col-2" style="padding: 0;">
<h6 class="ml-4" style="font-family: 'PT Serif';transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">DEVELOPER</h6>
</div>
</div>
<div class="row">
<div class="col" style="padding: 0;">
<h5 class="mt-3" style="font-family: 'Poppins';font-weight: 700;">Stan Jhon</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="text-center">
<div class="container mt-5">
<p class="text-black">chuna @ DevChallenges.io</p>
</div>
</footer>
</html>

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

ページレイアウト(CSS)の部分についてはBootstrapのコンテナをフル活用しています。
目新しいテクニックは使用していないので、第一弾の404 Not Foundと比較して変わり映えしないかもしれません。

今回は手当たり次第進めるのではなく、事前に構成を考えてから作り始めました。
(雑ですが・・・)



出来上がりのレイアウトイメージを見ながら、
「ここには〇〇を使おう」
「ここには▲▲を使おう」
と作り方を考えていきました。

そうすると「ここってどうやるんだろう」という箇所が出てくるので、
その場所については自分でトライ&調べながら進めました。

もっと「コードはこう書いたほうが良い」等 アドバイスがある方はコメントでご教示願います。

5. 詰まったところ


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

5.1 - 文字を傾ける


人物写真の右上にその人の役割が記載されています。
ただ書いてあるだけじゃなくて、90度右回転して記載されています!



さて、どうしたものかと調べてみると、
「CSS」もしくは「style」の記述でなんとかなることが分かりました。

該当箇所の回転指定方法は下記の通りです。
<h6 class="ml-4" style="font-family: 'PT Serif'; transform-origin: top left; transform: rotate(90deg); white-space: nowrap;">PRODUCT OWNER</h6>

回転を指示しているのは
transform: rotate(90deg);

の部分です。
回転角度は「90deg」なら時計回りに90度回転します。
逆に「-90deg」だと反時計回りに90度回転します。

回転させるときに重要なのが「どこを支点に回転させるか」です。
その支点を指示しているのが下記部分です。
transform-origin: top left;

ここでは回転対象物の「top」「left」部分を支点に指定しています。



支点を指定しない場合、回転対象物の中心を支点に回転します。

支点の対象にできるのは「点」だけではなく「軸」も指定できます。



指定方法
style="transform: rotateX(180deg);"
(X or Y or Zのどれかを指定)

回転させたい要素に対し上記を指定するだけです。

ちなみに上記でのrotateX, rotateYの角度を「90度」に指定すると、
画像が平面になってしまうので何も映らなくなってしまいます。

5.2 - 改行させない


上述の回転要素についてもう1つ問題が発生した為、解決策を書きます。

下記文字列を90度回転させたとき、どうしてもスペースの部分で改行が入ってしまいました。
「PRODUCT OWNER」



上記問題はstyleに下記を指定することで解決しました。
white-space: nowrap;

そもそもなぜ改行してしまうのか原因を掴めていないので、
もし分かる方がいたら、原因と正しい解決方法をコメントにてお知らせ下さい。

5.3 - 最小で2カラム表示


今回の課題はレスポンシブデザインで作成する必要があり、
最小表示時に元々3列だったメンバー表示が2列表示に変わります。

これまで学んだことから考えると、ブレークポイントを上手く使えば良さそうです。
あるサイズ以上では「カラム幅:〇」それ以下では「カラム幅:▲」とすれば目的の表示になりそうです。

そんなときの指定方法は下記の通りです。
<div class="col-6 col-md-4">

「col-6」は最も影響力の大きい指定方法で、
「何も指定がない場合はどんな画面サイズでも6カラムで表示する」という意味です。

その横に続けて例外を指定します。
「col-md-4」はmd(画面幅が768px以上)でカラム幅を4とする指定です。
この例外が当てはまる画面サイズのときは、上記の「col-6」が無効化されます。

最初間違えた失敗例が下記のコードです。
<div class="col-xs-6 col-md-4">

画面が小さいときにカラム幅を6としたかったので、
「col-xs-6」と指定してしまいました。

よくよく考えるとこれは
xs(画面幅が576px)以上でカラム幅を6とする指定なので、
最小表示時、576px以下の画面幅ではカラム幅指定が解除され、12カラム表示(画面幅いっぱい)になってしまいます。
同じ間違いを起こさないよう注意しましょう。

5.4 - 位置調整


与えられた課題では、隣り合うメンバー(画像)の表示位置が上下にズレています。



こういったときはズラしたい要素にマージンを指定すれば良さそうですね。
ただここで問題になるのが、
3列表示 → 2列表示 になったときにズレる画像が変化する という点です。

具体的に説明すると、
4人目のメンバー画像は3列表示時は「上寄り」の位置ですが、
2列表示になると「下寄り」の位置に変わります。

普通のマージン設定では上記のレスポンシブに対応できないので、
別途対策が必要そうです。

下記が対策後のコードです。
<div class="row mt-5 mt-md-0">

「mt(マージントップ)」にブレークポイントを指定すれば良いのです!

上記の書き方だと下記のような意味になります。
「通常時は上側マージン5、画面幅md以上ではマージン無し」

つまり3列表示時は「上寄り」、2列表示時は「下寄り」になります!

6 - さいごに


細かいところで直したい点はいくつかあるのですが、
細かいことなので今回はそこまで深追いせずに終わろうと思います。
(形になったからOK)

以上、お疲れ様でした。