漫画的な表現が好きです、網干です。

最近は電子書籍でPC上でも漫画を読むことができます。
ですが、個人的にはもっとWeb上の技術を使った動きのある漫画があっても良いのではないかと思ったりします。
といっても、いろいろと制限があったり、時間に見合わない労力が発生する等の問題があって実現は難しいのだと思ったりもします。
では、実際に作ってみたらどの程度の労力がかかるのか…？
ちょっと気になったので、まずはとっかかりとして漫画の1コマを表示する方法を調査してみました。

ということで、今回はHTMLとCSSの設定だけで漫画の一コマのような表示をWebページ上で実現する方法を記載します。
今回の記事を読むことで下記のような漫画のような一コマを作成することができます。

HTMLコードで枠組みを用意する

まずはHTMLコードで一コマを表示するための枠組みを用意します。
今回は下記のようなHTMLコードを使用します。

<div class="img-campus">
  <div class="fukidashi-box">
    <div>
      <p>Excelのことなら</p>
      <p>僕に任せて！！</p>
    </div>
  </div>
  <img class="img-tanaka-san" src="https://incloop.com/wp-content/uploads/2017/04/01_田中さん.png">
</div>

HTMLコードの作成イメージとしては、
・一コマ用の枠を用意。
・一コマの中に吹き出し用の枠を用意して、その中にコメントを入れる。
・吹き出し用の枠の後に画像を表示。
こんな感じで作成しています。

といっても、コードだけではイメージしづらいので、ここは読み飛ばしてしまって構いません。

では次に、素材となる画像を用意しましょう。

素材となる画像を用意する

今回使用する画像は、キャラクター、吹き出し、背景の三種類です。

キャラクター画像は弊社T氏の画像を使用します。

吹き出し画像に関しては、今回は「フキダシデザイン」様の画像を使用させていただきました。

背景画像に関しては、今回は「無料写真素材　写真AC」様の画像を加工して使用させていただきました。

これで画像の準備は完了です！

CSSで表示を整える

では、CSSで表示を整えていきます。
今回は漫画的な一コマを作成したいので、横幅や縦幅はほぼ全て固定の数値で指定します。
具体的には、こんな感じのCSSを設定します。

.img-campus {
  width: 420px;
  margin: 0px auto 10px;
  background: url('https://incloop.com/wp-content/uploads/2017/04/03_背景.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border: solid 5px;
}

.fukidashi-box {
  width: 300px;
  height: 230px;
  background: url('https://incloop.com/wp-content/uploads/2017/04/02_雲みたいな吹き出し.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.fukidashi-box > div{
  text-align: center;
  position: relative;
  top: 80px;
}

.fukidashi-box p {
  font-size: 24px;
  margin: 5px;
  line-height: normal;
}

.img-campus img {
  width: 300px;
  margin: auto auto auto 120px;
  display: block;
}

@media screen and (max-width : 450px) {
  .img-campus {
    width: 250px;
  }
  
  .fukidashi-box {
    width: 150px;
    height: 120px;
  }
  
  .fukidashi-box > div {
    top: 40px;
  }
  
  .fukidashi-box p {
    font-size: 13px;
  }
  
  .img-campus img {
    width: 170px;
    margin: auto auto auto 80px;
  }
}

ここまで来て、ようやくHTMLコードと見比べてもらうと「あぁなるほど」となるかもしれません。
CSSの内容としては、イメージに沿ってスタイルを整えているだけですね。

上記の内容を全て詰め込むと、下記のような漫画的な一コマが表示されるようになります。

編集の際には画像編集が不要！文章や画像素材を切り替えるだけで一コマを編集！

記事をここまで読んでみて「え？こんなの作りたかったら全部画像で作っちゃえばいいじゃん…」と思われる方が多いと思います。
そう！その通りです！
その通りなのですが…。
今回の一コマは一枚の画像ではなく複数の要素から構成しているため、一部分の編集がコード上で可能になっているのです。

例えば、吹き出しの文言だけ変えたい場合は、下記のように文言の編集だけで終わってしまいます。

例えば、背景と吹き出しだけ変えたい場合は、下記のように文言と背景素材の変更だけで終わってしまいます。

このように、デザイナーさんの手を借りずに画像編集（のようなこと）ができてしまいます！
使い方次第ではかなり汎用性が高くなりそうですね。

使い方次第では作業効率の改善も可能！

いかがでしたか？

今回の例のような一コマをWebページに表示させたい場合は、一枚の画像で作成してしまうほうが良いように思えます。
ですが、下記のいずれかの条件が入った場合はどうでしょうか？

1. 吹き出しの中身を毎日変化させたい。
2. キャラクターを週ごとに変化させたい。
3. 吹き出しの中身もキャラクターも曜日ごとに変化させたい。

もし上記の条件を画像で対応し続ける場合は、毎回のように画像を作り変えてアップロードしなければなりません。
ですが、今回紹介したようなHTMLコードやCSSの構成であれば、テキストを変えたり画像を切り替えたりするだけで対応が完了してしまいます。

使い方次第ではありますが、こういった「画像っぽい表示の仕方」もコーディングする際の一つの方法として頭に入れておくと、役に立つ時が来るかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。