【学習60-62日目】架空歯科サイト作成　下層ページ編

前回トップページの作成が終わり、下層ページの作成を行いました。

作ったページは以下の通り。

診療案内ページ
スタッフ紹介ページ
アクセス・診療時間ページ
WEB予約ページ
お知らせ一覧ページ

スタッフ紹介ページとお知らせ一覧ページはWEBデザインでは作成していませんでしたが、リンクが想定されていたページだったので作成しました。

診療案内ページ
1. 使いまわしポイントを考える
  1. ページタイトルを作る
  2. パンくずリストを作る
2. 工夫したこと
  1. スムーススクロールをつけた
  2. 歯周病治療に背景をつけた
スタッフ紹介ページ
アクセス・診療案内ページ
お知らせ一覧ページ
これにて架空サイト完成

診療案内ページ

さて、下層ページたちをざっと見てみると、いくつか使いまわせそうなポイントがありますね。

他にも、診療案内ページを円滑に見るために工夫してみたことがあります。

それらを紹介していきます。

使いまわしポイントを考える

各下層ページを見たときに、使いまわせそうだったのはこちら。

ページタイトル
パンくずリスト

じゃあこれをどう構成するか？ですね。

ページタイトルを作る

ページタイトルは「メインビジュアルになる画像＋画面中央にテキスト」という構成です。

トップページのようにテキストの位置を考える必要はなく、ど真ん中に設置すればいいので簡単です。

テキストの背景をどうやってつけるかは一瞬悩みましたが、単純に文字に背景をつけただけです。

パンくずリストを作る

そもそも「パンくずリスト」という名前が思い浮かばなくて……。聞いたことはあったのですが、これのことか～！となりました。

「パンくずリスト　作り方　HTML」みたいに検索すれば、様々なデザインのパンくずリストの作り方がヒットします。是非調べてみてね。

私はオーソドックスに、リストでページの流れをまとめて（この場合順番があるのでulじゃなくてolです！）、疑似要素でリスト間に「＞」をつけて……というやり方です。

工夫したこと

このページを作る上で工夫したことです。

スムーススクロールをつけた

ページのレイアウトは、上部に診療内容ボタンがあり、その下に各診療内容が並んでいるスタイルです。

そのため診療内容ボタンをクリックすると、その診療内容に移動するようにアンカーリンクをつけています。

診療内容ボタンをクリックしたときに、急に切り替わるのではなく自動でスクロールされたほうがページ内の移動であることがわかりやすい（他の診療内容が並んでいることがわかる）ので、jQueryで学んでスムーススクロールをつけました。

PC・タブレットではヘッダーを固定していて、かつヘッダーの高さが異なります。
ヘッダーの高さを認知して、その分小さくスクロールするようにする（ヘッダーの次にコンテンツが来る）ようにしました。

コードはこれです。

////////// スムーススクロール
    $('a[href^="#"]').click(function(){
        var target = $($(this).attr('href')).offset().top;
        var header = $('header').height();

        if ($(window).width() > 600) {  // モバイル以外
            target = target - header;  // ヘッダーの高さを引く
        }

        $('html,body').animate({scrollTop: target}, 500, 'swing');
        return false;
    });

歯周病治療に背景をつけた

なんとなく、診療内容ごとに背景を変えた方がのっぺりしないかな……と思って。トップページはそんな感じで背景がついてるし。好みです。

スタッフ紹介ページ

デザインの時点ではヘッダーにはないのにフッターにはある項目でした。謎。

でも医療従事者として言えるのは、病院選びに医師の経歴は絶対見るので必須項目だと思うということ。

なので作成。ヘッダーにも項目を追加しました。

内容は結構シンプルです。

Flexboxを用いてPCでは3カラム、タブレット以下では1カラムになるようにしています。

各boxの間に線を入れるのが難しかったです。
borderで指定することも考えましたが、boxの高さ100%だとちょっともたつくなあと思い、違う方法にすることに。

各boxの右に幅1px、長さ80%の背景を用意する。（＝縦線）
最後のboxはそれを消して、各boxの間だけ線が引かれるようにする。

という方法にしました。

レスポンシブで1カラムになり縦に並んだ場合は、下（bottom）に線が引かれるように設定しました。

.career { /* 経歴の各box */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: 0 1px 0 0;
    background-image: linear-gradient(var(--blue),var(--blue));
    background-repeat: no-repeat;
    background-size: 1px 80%;
    background-position: right center;
}

.career:last-child {
    background-image: none;
}

アクセス・診療案内ページ

このページは特筆することがない……かな。

デザイン上では、診療時間のモバイル表示は行と列が入れ替わって、横長から縦長の表になっていました。

writing-mode: vertical-lr;とwriting-mode: horizontal-tb;を用いて入れ替える方法はぐぐったら出てきてWindows上では上手くいったのですが、iPhone実機で見るとまたーずれる。

試行錯誤したのですがうまく直せず、また「そもそも行と列を入れ替えて縦になった診療時間ってめちゃ見づらくね？」と思い。

いくつかクリニックのサイトを見ましたが、行と列は入れ替えず横長の表のまま小さくなっているところがほとんとでした。

やっぱりこっちの方が見やすいので、こっちを採用。

私が見た中で1つのクリニックだけ行と列を入れ替えていましたが、1つの表をCSSで入れ替えているわけではなく、HTMLに2つの表（片方は行と列が入れ替わっている）を記載、レスポンシブに合わせて表示する法を決める、というやり方をされていました。

お知らせ一覧ページ

トップページにあるお知らせ一覧ですが、デザイン的には絶対にリンクできる感じなのにデザインがありませんでした。

そこで、トップページと同じデザインで作成することに。

さらに、トップページも編集・お知らせ一覧ページも編集……となると忙しい歯科医院の事務さん（？）が困るだろうと思い、お知らせ一覧ページを更新すればトップページも更新されるようにしました。

お知らせ一覧ページの上から3つ目までがトップページに表示されます。

こういうとき、WordPressなら実装やお知らせの更新が簡単なんだろうな～～と思いました……。

トップページのお知らせ欄の見出し以下にnews-containerクラスをつけています。

また、お知らせ一覧ページのお知らせは1つずつをarticleタグで囲い、その親要素にはnews-listクラスがついています。

news.html .news-list article:nth-of-type(-n+3)は、「news.htmlの中のnews-listの上から3番目までのarticle」という意味です。

というわけで、「トップページのnews-container内に、news.htmlの中のnews-listの上から3番目までのarticleを読み込む」というコードになります。

////////// お知らせの取得
    $('#news-container').load('news.html .news-list article:nth-of-type(-n+3)', function(response, status, xhr) {
        if (status === "error") {
          $('#news-container').html("<p>お知らせを読み込めませんでした。</p>");
        }
    });

これでお知らせ一覧ページを更新すればトップページも自動で更新されます。

これはAjaxという手法らしい。いまいち理解しきれていません。奥が深すぎるよ～～。