サイト遊び記録 − ３キャラクター紹介ページ改装終わったよ

diary programming update HTML CSS Site

2017/09 17

ただいま見参！
- キャラクター紹介ページ開通

ただいま見参！のキャラクター紹介ページをリニューアルしました。

記載データはかなり簡略化しました。

天空も近々準備でき次第繋げますね。

GravをアプデしたらSummary部分の挙動がなんかおかしいなーと思ってたら、やっぱり不具合だったようだ。
公式フォーラムに同じこと聞いてる人がいらっしゃったよ。
次のアプデで修正予定だよ！って言っていたらか大人しく待とうじゃないか。
まだかなー。

さて本題。キャラ紹介ページのレイアウト改装が終わりました。
現在ただいまだけ繋げています。

前回の記事：

サイト遊び記録 − １キャラ紹介ページを改装してみんとす

で、今回最終的にこうなりました。

＊ 2021/01/09 追記

現在サイトでは使用していないので、サンプルページを公開しました。

斜め切りレイアウトサンプルページ

斜め切りレイアウトってカッコイイと思うんだ……。
その分結構苦労しましたが（笑）背景画像とか背景画像とか。

前回のと全然違うじゃないですか！って言われたら、全員分の全身立ち絵描くの絶対めんどいじゃねーかという結論に至ったとしか言えません！
いや絶対めんどいし時間食うじゃないですか。私は楽したいんだよ。

あと、キャラデータ見るのにワンクッション置く必要なくね？ともなりました。
この形ならスクロールでざーっと見れるし。意外とクリックって回数多くなると煩雑に感じるんですよね。

あ、足りないリソース準備してたってのはここに表示するキャラ画像でした。
ただいまの塗りに合わせて全部アニメ塗りに直してたんですわ。
ちなみに全部元絵があって、ネット上で全部確認できます。興味あったら探してみてね☆

今回実装する上で参考にさせていただいたのはこちら様とか。

コリス
[CSS]ちょっと大胆に、斜めのラインを使うスタイルシートのチュートリアル
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイン

あと、一回サンデーのどっかのwebでコナン特集やってた時のページ。
あれ、ちょうど斜めレイアウトだったので。

実際のHTMLコードは下記。整理と備忘録で自分用に書いておきます。

HTML

<!-- HTML -->
<div class="character-container">
  <!-- ▼ この部分を繰り返す -->
  <div class="character-slope">
    <article class="character-content">
      <div class="character">
        <!-- ▼ キャラクターの立ち絵 -->
        <div class="image">
          <img src="" alt="">
        </div>
        <!-- ▼ キャラクタープロフィール -->
        <div class="profile">
          <div>
            <h3 class="name">名前</h3>
            <p class="description">キャラクター説明</p>
          </div>
          <dl class="data">
            <dt>年齢</dt><dd>歳</dd>
            <dt>出身地</dt><dd>場所</dd>
          </dl>
        </div>
      </div>
    </article>
  </div>
  <!-- ▲ この部分を繰り返す -->
</div>

これにそれぞれcssをあてていく。

.character-container

<!-- HTML -->
<div class="character-container">
    〜略〜
</div>

/* CSS */
.character-container {
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  width: 100%;
}

表示場所の大枠。
中をレイアウトしていくと色々はみ出るので、見えないようにoverflowを指定します。
横幅はお好みで。

.character-slope

<!-- HTML -->
<div class="character-container">
  <div class="character-slope">
    〜略〜
  </div>
</div>

/* CSS */
.character-container .character-slope {
  margin: -90px;
  overflow: hidden;
  height: 550px;
}
.character-container .character-slope:first-child {
  padding-top: 60px;
}
/* 奇数 */
.character-container .character-slope:nth-child(odd) {
  background-color: #ccc;
  transform: rotate(5deg);
}
.character-container .character-slope:nth-child(odd):not(:first-child) {
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.4);
}
/* 偶数 */
.character-container .character-slope:nth-child(even) {
  background-color: #aaa;
  transform: rotate(-5deg);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset;
}
.character-container .character-slope:last-child {
  height: 230px;
  position: relative;
}
.character-container .character-slope:last-child p {
  margin-left: 2rem;
  margin-top: 1.5rem;
}

斜めを作るところ。
縦に並べた時の奇数に当たるブロックと偶数にあたるブロックでそれぞれ傾ける角度（transform: rotate）を設定。

.character-slope:last-childは一番最後のブロックを「戻るリンク」専用にしているためなので、使わなければここの部分はバッサリいらない。

個別の背景色を設定する場合は、下記のようにクラスを作って「.character-slope」に連ねて書くと反映されます。
（※記述順だけお気をつけください）

<!-- HTML -->
<div class="character-container">
  <div class="character-slope color">
      〜略〜
  </div>
</div>

/* CSS */
.character-container .character-slope.color {
  background-color: #fff;
}

こんな感じ。

.character-content

<!-- HTML -->
<div class="character-container">
  <div class="character-slope">
    <article class="character-content">
      〜略〜
    </article>
  </div>
</div>

/* CSS */
/* 奇数 */
.character-container .character-slope:nth-child(odd) .character-content {
  transform: rotate(-5deg);
}
/* 偶数 */
.character-container .character-slope:nth-child(even) .character-content {
  transform: rotate(5deg);
}
.character-container .character-content {
  background-image: url("/img/common/h/light-wool.png");
  background-repeat: repeat;
  box-sizing: border-box;
  height: 100%;
  margin: -50px auto 0;
  padding: 100px 40px 0 50px;
  position: relative;
  width: 90%;
}

そのままだと傾いたままの表示になるので、ここで表示用の傾きを元に戻す。
傾けた分をそのまま戻せばいいです。

戻したものに対して背景画像を設定すれば、背景画像の傾きも問題なくなります。
最初ここの入れ子を作っていなかったせいで頭を悩ませていました……。しかし、入れ子が多くなるー。

＊ 2021/01/09 追加

ここで使用している背景画像は下記サイト様の半透過のものを使用させていただいています。

Transparent Textures

.character

<!-- HTML -->
<div class="character-container">
  <div class="character-slope">
    <article class="character-content">
      <div class="character">
        〜略〜
      </div>
    </article>
  </div>
</div>

/* CSS */
.character-container .character-content .character {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
}
/* 奇数部分だけ左右の表示順を逆にする */
.character-container .character-slope:nth-child(odd) .character-content .character {
  flex-direction: row-reverse;
}

キャラクターデータ表示用の Flexbox です。
ここで奇数にあたる部分に row-reverse を指定して表示順を逆にしています。

.image

<!-- HTML -->
<div class="character">
  <!-- ▼ キャラクターの立ち絵 -->
  <div class="image">
    <img src="" alt="">
  </div>
  <div class="profile">
    〜略〜
  </div>
</div>

/* CSS */
.character-container .character-content .image {
  text-align: center;
  width: 45%;
}
.character-container .character-content .image img {
  position: absolute;
  margin: 0 auto;
  width: 480px;
}
/* 奇数 */
.character-container .character-slope:nth-child(odd) .character-content .character .image img {
  right: -25px;
}
/* 偶数 */
.character-container .character-slope:nth-child(even) .character .image img {
  left: -25px;
}
.character-container .character-content .image + .profile {
  margin: 0 auto 0 5%;
}

立ち絵の表示位置調整。

.profile

<!-- HTML -->
<div class="character">
  <div class="image">
    〜略〜
  </div>
  <!-- ▼ キャラクタープロフィール -->
  <div class="profile">
    <div>
      <h3 class="name">名前</h3>
      <p class="description">キャラクター説明</p>
    </div>
    <dl class="data">
      <dt>年齢</dt><dd>歳</dd>
      <dt>出身地</dt><dd>場所</dd>
    </dl>
  </div>
</div>

/* CSS */
.character-container .character-content .profile {
  background: rgba(255, 255, 255, 0.5);
  padding: 2px;
  position: relative;
  margin: 40px auto 0;
  width: 45%;
}
.character-container .character-content .profile > div:not(.icon) {
  box-sizing: border-box;
  border: solid 2px #333;
  padding: 10px;
  position: relative;
  width: 100%;
}

/* キャラクター名 */
.character-container .character-content .profile > div:not(.icon) .name {
  border-bottom: dotted 2px #333;
  font-size: 1.125rem;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

/* キャラクター説明 */
.character-container .character-content .profile > div:not(.icon) .description {
  font-size: 0.875rem;
}

/* その他キャラクターデータリスト */
.character-container .character-content .profile .data {
  display: block;
  margin: 10px 10px 1em;
  width: 100%;
}
.character-container .character-content .profile .data dt,
.character-container .character-content .profile .data dd {
  display: inline-block;
}
.character-container .character-content .profile .data dt {
  border-bottom: 1px solid #333;
  box-sizing: border-box;
  position: relative;
  width: 35%;
}
.character-container .character-content .profile .data dt::after {
  content: ":";
  position: absolute;
  right: -.5rem;
}
.character-container .character-content .profile .data dd {
  text-indent: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  width: 65%;
}
.character-container .character-content .profile .data dd::after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: -webkit-gradient(linear, left top, right bottom, from(#333), to(rgba(204, 204, 204, 0)));
  background: -moz-linear-gradient(left, #333, rgba(204, 204, 204, 0));
  background: -o-linear-gradient(left, #333, rgba(204, 204, 204, 0));
  background: -ms-linear-gradient(left, #333, rgba(204, 204, 204, 0));
  background: linear-gradient(left, #333, rgba(204, 204, 204, 0));
}
.character-container .character-content .profile .data dd:last-of-type {
  margin-bottom: 0;
}

/* 設定画像リンク */
.character-container .character-content .profile .icon {
  margin: 0 10px;
}
.character-container .character-content .profile .icon img {
  border-radius: 3px;
  width: 70px;
}
.character-container .character-content .profile .icon img:hover {
  opacity: .7;
}

この辺でキャラデータ表示部分をごにょごにょと。
名前・説明枠したのキャラデータ部分の「：」区切りは揃えるためにCSSから指定しています。
下線グラデも border ではなく、:afterセレクタで background グラデを指定してます。

世の中すごい使い方を思いつく人がいるものデスね……。

とりあえずコリスさんとこの使えば、基本的な斜めレイアウトは作れましたよ。
回転させるブロックをうまくやらないと背景画像設定がうまく水平になってくれないのがめんどうでした。

しばらくこれで運営していってみまーす。

サイト遊び記録 − ４いいねボタン作りました TOP 由利誕 2017

サイト遊び記録 − ３ キャラクター紹介ページ改装終わったよ