ポートフォリオサイト、試しに作ってみる④　～作品紹介ページ編～

　今回は、作品紹介ページの制作過程についてまとめていきたいと思います。

上記の画像は作品紹介ページの完成形です。
このページの「▼Click」というボタンを押すと、左二つのように、該当する作品の紹介ページが出てくる仕様になっています。また、紹介ページが出てくる時に、少しアニメーションを加えてみたいと思ったので、今回はtransitionプロパティを使って簡単なアクセントを入れてみました。

それでは早速、説明に入っていきたいと思います。

➀details・summary・transitionについて

　まず、detailsとsummaryは、このページの最も重要な役割を担う「Click」を押すと作品の説明文が出てくるような仕組みを作る際に使用したタグです。

HTMLファイル

<details>
  <summary>Click<img src="images/bird-site.png"></summary>
  　クリックすることで表示したいものを書きます。
</details>

上記がdetailsとsummaryの基本的な構文です。
見てのとおりですが、
summaryタグの中にクリックする前から表示しておきたいものを入れ、detailsタグの中にクリックした後に表示したいものを入れます。
たったこれだけで、簡単に折り畳み式の説明欄が作れます。

しかし、今回はクリックした時に、何らかのアクセントを加えたかったので、若干CSSに書く文言が増えてしまいました。

CSSファイル

details{
 width: 340px;
 background-color: white;
 text-align: center;
 line-height: 1.8;
 margin: 0 20px;
 margin-top: 30px;
 font-size: 25px;
 transition-duration: .5s;
 height: 0;/*初めからdetailsが開いたままになるのを防ぐ。*/
}

details[open] {
 background: white;
 height: 550px;
 padding-bottom: 20px;
}

summary{
 outline: none;
 cursor: pointer;
 font-size: 20px;
}

この画像を見ると、前回までに紹介してきたコードより膨大に見えますが、実際、アクセントを加えるために書かれているコードは、

details{
 transition-duration: .3s;
 height: 0;/*初めからdetailsが開いたままになるのを防ぐ。*/
}

details[open] {
 background: white;
 height: 550px;
 padding-bottom: 20px;
}

たったのこれだけです。
簡単に説明すると、まずtransition-durationプロパティで、加えたいアクセントにかかる時間を指定します。次に、detailsにopen属性を付け、summaryがクリックされdetailsが開いた時の長さをheightで指定します。
ここで注意することは、クリックを押す前のdetailsタグの高さを0にすることです。０と指定しなければ、クリックを押す前からdetails[open]内で指定したものが表示されてしまいます。

height : 0; を指定しなかった場合
（クリックを押す前に開きっぱなしになっています…）

▼参考サイト（とても分かりやすいです！）

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン

②ページごとに背景画像を変える方法

　わざわざ説明するほどの項目ではありませんが、一応自分用のメモとしてまとめておきます。
同一ファイル内で背景画像を変えるには、背景画像を分けたい部分全体をdivで囲み、そのまとまりごとに背景画像を貼りつけます。

終わりに

少し短いですが、今回は以上で作品紹介ページの作り方についての紹介を終わります。
また、これから自分なりにウェブの知識を増やしながら、今まで作ってきたページに少しずつブラッシュアップをかけていくつもりですので、デザインに更新がかかり次第、随時ブログにまとめていこうと思います。

次回は、自分のスキルについてを紹介するページの制作過程と、サイトをレスポンシブ対応にする方法について書こうと思います。

最後まで読んでくださった方々、ありがとうございました。