サイト制作のSTART:DASH!!

第5章　ライブステージページを作る

共通の構造部分とトップページをここまで作っていきました。この章ではライブステージページを作っていきます。ライブステージページもトップページと同じくmain要素の中をHTMLでマークアップしていきます。

はじめにHTMLファイルをlivestage.htmlという名前でindex.htmlを置いたディレクトリーに作ります。index.htmlをコピー&ペーストし、livestage.htmlのmain要素内を全て消してから作業すると効率がいいです。

5.1　main要素にライブステージページと分かるようなIDを付ける

はじめにmain要素へライブステージページと分かるようなIDを次のように付けます。

<main id="ll-livestage-page-contents">
</main>

5.2　動画部分のマークアップ

動画部分のマークアップをしていきます。アーティスト名と曲名部分にCSSを適用させるため、それぞれspan要素で括ります。

今回動画はYouTubeにあるものを使います。YouTubeの動画をページ内へ埋め込む方法は図のようにYouTubeの「共有」内の「埋め込みコード」をコピーしてHTML内に貼り付けます。

YouTubeの埋め込みコードをHTML内にコピー&amp;ペーストする

図5.1: YouTubeの埋め込みコードをHTML内にコピー&ペーストする

ウィンドウ幅を狭めた場合に動画が収まりきらない状態で表示されるのを防ぐため埋め込みコード（iframe要素）をdiv要素で囲います。この埋め込みコードを囲ったdiv要素にはのちほど動画がウィンドウ幅内へ収まるようにするスタイルを適用します。

<div class="col-md-6">
  <h2 class="ll-video-title-and-artist">
    <span class="ll-video-artist">μ's</span><span class="ll-video-title">Angelic Angel</span>
  </h2>

  <div class="ll-live-video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/oWIE7GwJu3c" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

5.3　動画情報部分のマークアップ

動画情報部分は今回コメント部分のみを実装します。コメントの実装はTwitterのハッシュタグ検索ウィジェットを使って、擬似的にコメントを再現します。動画情報のCommentタブを目立たせるために、グローバルナビゲーションと同じくll-activeというクラス名を付けます。

<div class="col-md-3 col-sm-6 ll-video-detail">
  <ul class="nav nav-tabs nav-justified ll-video-tabs">
    <li><a href="">Status</a></li>
    <li><a href="">Like</a></li>
    <li class="active ll-active"><a href="">Comment</a></li>
    <li><a href="">Settings</a></li>
  </ul>

  <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/hashtag/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96" data-widget-id="620242924207386625">#ラブライブ のツイート</a>
  <script id="twitter-wjs" src="https://platform.twitter.com/widgets.js" async></script>
</div>

5.4　広告部分のマークアップ

続いて広告部分のマークアップをしていきます。基本はBootstrapで定義されているクラス名をHTMLに書いていくのみとなります。

<div class="col-md-3 col-sm-6 ll-livestage-ad">
  <h2 class="ll-ad-title">
    Ad
  </h2>

  <div class="list-group">
    <a href="https://github.com/kubosho/Nico" class="list-group-item">
      <div class="list-group-item-heading">
        Nico
      </div>

      <p class="list-group-item-text">
        "Nico" a fork of "Honoka" which is a Bootstrap theme.
      </p>
    </a>

    <a href="https://github.com/kubosho/kotori" class="list-group-item">
      <div class="list-group-item-heading">
        Kotori
      </div>

      <p class="list-group-item-text">
        A tool that automatically format and evaluate for CSS.
      </p>
    </a>
  </div>
</div>

最後に今まで書いたHTMLの全体（main要素は除く）を次のHTMLで囲ったら完成です。

<div class="container-fluid">
  <div class="row">
  </div>
</div>

5.5　HTMLのまとめ

ここまでをまとめると、次のHTMLになります。

<main id="ll-livestage-page-contents">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <h2 class="ll-video-title-and-artist">
          <span class="ll-video-artist">μ's</span><span class="ll-video-title">Angelic Angel</span>
        </h2>

        <div class="ll-live-video">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/oWIE7GwJu3c" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>

      <div class="col-md-3 col-sm-6 ll-video-detail">
        <ul class="nav nav-tabs nav-justified ll-video-tabs">
          <li><a href="">Status</a></li>
          <li><a href="">Like</a></li>
          <li class="active ll-active"><a href="">Comment</a></li>
          <li><a href="">Settings</a></li>
        </ul>

        <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/hashtag/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96" data-widget-id="620242924207386625">#ラブライブ のツイート</a>
        <script id="twitter-wjs" src="https://platform.twitter.com/widgets.js" async></script>
      </div>

      <div class="col-md-3 col-sm-6 ll-livestage-ad">
        <h2 class="ll-ad-title">
          Ad
        </h2>

        <div class="list-group">
          <a href="https://github.com/kubosho/Nico" class="list-group-item">
            <div class="list-group-item-heading">
              Nico
            </div>

            <p class="list-group-item-text">
              "Nico" a fork of "Honoka" which is a Bootstrap theme.
            </p>
          </a>

          <a href="https://github.com/kubosho/kotori" class="list-group-item">
            <div class="list-group-item-heading">
              Kotori
            </div>

            <p class="list-group-item-text">
              A tool that automatically format and evaluate for CSS.
            </p>
          </a>
        </div>
      </div>
    </div>
  </div>
</main>

5.6　ライブステージページ全体の見た目を整える

HTMLによるマークアップが終わったらCSSで見た目を整えていきます。はじめにライブステージページ全体へ関わるスタイルを適用します。

ライブステージページのmain要素に対し、要素の内側の余白を指定するpaddingや背景色を指定するbackground-colorを指定することでライブステージページの見た目に近づけていきます。さらに見出しにもスタイルを適用することでサイトの見た目をアニメ版に近づけていきます。

/* ライブステージページ：コンテンツ */
#ll-livestage-page-contents {
  padding: 1em 0;
  background-color: #dcdcdc;
}

/* ライブステージページ：見出し */
.ll-video-title-and-artist,
.ll-ad-title {
  margin-top: 0;
  margin-bottom: 16px;
}

5.7　アーティスト名と曲名部分の見た目を整える

アーティスト名と曲名部分にスタイルを適用していきます。アーティスト名部分は背景が白で上下に黄色い線が引かれているという見た目です。こちらは背景色として白色を示す#fffを指定します。黄色い線に関しては上下にborderプロパティでスタイルを定義することにより再現可能です。

曲名の左右にある括弧は、特にHTML内へ書いておく必要がないため::beforeと::afterという擬似要素を使ってCSS側で追加します。

/* ライブステージページ：アーティスト名 */
.ll-video-artist {
  padding: 3px 0.5em;
  border-top: 2px solid #ffdc00;
  border-bottom: 2px solid #ffdc00;
  background-color: #fff;
}

/* ライブステージページ：曲名 */
.ll-video-title::before {
  content: "【";
}

.ll-video-title::after {
  content: "】";
}

5.8　動画部分の見た目を整える

動画部分にスタイルを適用していきます。YouTubeの動画をページ内へ埋め込んでいますが、初期状態だとウィンドウ幅を狭めた場合に動画が収まりきらない状態で表示されてしまいます。そのためCSSで動画をウィンドウ幅内へ収まるように調整します。

ライブステージページへYouTubeの動画を埋め込んだときに動画をdiv要素で囲みました。そのdiv要素に指定しているll-live-videoというクラスにCSSでアスペクト比を設定します。動画部分のiframe要素に対し絶対配置にするposition: absolute;を指定した上で幅と高さを100％にすることにより、動画が収まって表示されます。

/* ライブステージページ：動画部分をレスポンシブにする */
.ll-live-video {
  position: relative;
  height: 0;
  /* 16:9のアスペクト比で動画を表示する */
  padding-bottom: 56.25%;
}

.ll-live-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

5.9　動画の情報を表示している要素の見た目を整える

動画の情報を表示している要素に対しスタイルを適用していきます。はじめにウィンドウ幅を狭くしたとき、余白が上下に空くようmarginを定義します。

/* ライブステージページ：動画の情報 */
.ll-video-detail {
  margin: 1em 0;
}
@media (min-width: 992px) {
  .ll-video-detail {
    margin: 0;
  }
}

次に動画の情報表示を切り替えるタブをグローバルナビゲーションと同じような見た目にしていきます。とはいえBootstrap内でグローバルナビゲーションとタブ部分に対し同じスタイルが適用されているわけではありません。そのためスタイル定義が少し違うものになります。

/* ライブステージページ：動画の情報タブ */
.ll-video-tabs {
  background-color: #ff50ac;
}

.ll-video-tabs > li > a {
  margin-bottom: 0 !important;
  text-transform: uppercase;
}

.ll-video-tabs > li > a:link,
.ll-video-tabs > li > a:visited {
  color: #fff;
}

.ll-video-tabs > li > a:hover,
.ll-video-tabs > li > a:focus {
  color: #ff188b;
}

.ll-video-tabs > .ll-active > a:link,
.ll-video-tabs > .ll-active > a:visited {
  color: #555;
}

5.10　動画の情報部分の見た目をウィンドウ幅ごとに整える

動画の情報部分の見た目を整えたら、今度はウィンドウ幅ごとに整えていきます。特にタブ内の文字はウィンドウ幅を小さくしていくとタブからはみ出して表示されます。文字がはみ出すのを防ぐため細かく文字サイズを調整しています。

他のスタイルは主にタブレットやPCで見たとき、グローバルナビゲーションと同じような見た目になるようスタイル定義しています。

/* ライブステージページ：動画の情報タブの各ウィンドウ幅ごとのスタイル定義 */
@media (min-width: 768px) {
  .ll-video-detail .ll-video-tabs > li > a {
    padding: 5px 0;
    border-right: 1px solid #fff;
  }

  .ll-video-detail .ll-video-tabs > li:last-child > a {
    border-right: 0;
  }

  .ll-video-detail .ll-video-tabs > .ll-active > a {
    border-width: 0 1px 0 0;
    background-color: #ff50ac;
    color: #fff;
  }

  .ll-video-detail .ll-video-tabs > .ll-active::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 3px solid #ffdc00;
  }
}
@media (min-width: 992px) {
  .ll-video-detail .ll-video-tabs > li > a {
    font-size: 0.8125em;
  }
}
@media (min-width: 1000px) {
  .ll-video-detail .ll-video-tabs > li > a {
    font-size: 0.875em;
  }
}

5.11　広告部分の見た目を整える

最後に広告部分の見た目を整えます。ここはある程度Bootstrapによって整えられているため、最低限のスタイルを適用するだけです。

/* ライブステージページ：広告 */
.ll-livestage-ad {
  margin: 1em 0;
}
@media (min-width: 992px) {
  .ll-livestage-ad {
    margin: 0;
  }
}

5.12　CSSのまとめ

ここまでをまとめると、次のCSSになります。

/* ライブステージページ：コンテンツ */
#ll-livestage-page main {
  padding: 1em 0;
  background-color: #dcdcdc;
}

/* ライブステージページ：見出し */
.ll-video-title-and-artist,
.ll-ad-title {
  margin-top: 0;
  margin-bottom: 16px;
}

/* ライブステージページ：アーティスト名 */
.ll-video-artist {
  padding: 3px 0.5em;
  border-top: 2px solid #ffdc00;
  border-bottom: 2px solid #ffdc00;
  background-color: #fff;
}

/* ライブステージページ：曲名 */
.ll-video-title::before {
  content: "【";
}

.ll-video-title::after {
  content: "】";
}

/* ライブステージページ：動画部分をレスポンシブにする */
.ll-live-video {
  position: relative;
  height: 0;
  /* 16:9の比率で動画を表示する */
  padding-bottom: 56.25%;
}

.ll-live-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ライブステージページ：動画の情報 */
.ll-video-detail {
  margin: 1em 0;
}
@media (min-width: 992px) {
  .ll-video-detail {
    margin: 0;
  }
}

/* ライブステージページ：動画の情報タブ */
.ll-video-tabs {
  background-color: #ff50ac;
}

.ll-video-tabs > li > a {
  margin-bottom: 0 !important;
  text-transform: uppercase;
}

.ll-video-tabs > li > a:link,
.ll-video-tabs > li > a:visited {
  color: #fff;
}

.ll-video-tabs > li > a:hover,
.ll-video-tabs > li > a:focus {
  color: #ff188b;
}

.ll-video-tabs > .ll-active > a:link,
.ll-video-tabs > .ll-active > a:visited {
  color: #555;
}
/* ライブステージページ：動画の情報タブの各ウィンドウ幅ごとのスタイル定義 */
@media (min-width: 768px) {
  .ll-video-detail .ll-video-tabs > li > a {
    padding: 5px 0;
    border-bottom: 0;
    border-right: 1px solid #fff;
  }

  .ll-video-detail .ll-video-tabs > li:last-child > a {
    border-right: 0;
  }

  .ll-video-detail .ll-video-tabs > li.ll-active::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 3px solid #ffdc00;
  }

  .ll-video-detail .ll-video-tabs > li > a:focus,
  .ll-video-detail .ll-video-tabs > li > a:hover {
    background-color: #ff92cb;
    color: #fff;
  }

  .ll-video-detail .ll-video-tabs > .ll-active > a {
    border-top: 0;
    border-bottom: 0;
    background-color: #ff50ac;
    color: #fff;
  }
}
@media (min-width: 992px) {
  .ll-video-detail .ll-video-tabs > li > a {
    font-size: 0.8125em;
  }
}
@media (min-width: 1000px) {
  .ll-video-detail .ll-video-tabs > li > a {
    font-size: 0.875em;
  }
}

/* ライブステージページ：広告 */
.ll-livestage-ad {
  margin: 1em 0;
}
@media (min-width: 992px) {
  .ll-livestage-ad {
    margin: 0;
  }
}

スクリーンショットは次のとおりになります。

図のようにPCで見たときは横に並んで各要素が表示されています。

PCで見たときのラブライブ！参加者募集サイト

図5.2: PCで見たときのラブライブ！参加者募集サイト

また図のようにタブレットで見たときは動画が1番目立つ位置にあります。

タブレットで見たときのラブライブ！参加者募集サイト

図5.3: タブレットで見たときのラブライブ！参加者募集サイト