体験型の記事などでよく見る「顔写真付きで会話させる」ちょっと古い方法

これは、ライティングや編集にまつわるあれこれ Advent Calendar 2018の1日目の記事です。

体験系の記事などで見かける、顔写真で会話するレイアウトの話をしたいとおもいます。

モーリ

こうやって顔写真の横にセリフが出て、喋ってるように見えるやつ、よく見かけますね。

これってよく見かけるわりには、どこでも誰でも使ってる定番のレイアウトが共有されてるとかではなくて、各サイトごとにCSSを工夫してるみたいなんですね。なので、編集コストの関係から、こうなってる記事も見かけます。

ときどき、顔の横にレイアウトできなくて、セリフが下に並んでることもありますね。

というのは、背景色と三角のハンドルで吹き出しっぽく見せるといったデザイン的な工夫をしなくても、そもそもいいかんじで横に並べるだけで、それほど単純ではないんですね。

この記事では、僕が最初にこの手のレイアウトをしたときにどう考えたのかってことを共有してみます。

その1. 写真を左寄せする

まず、たぶんパッと考えるのは「float: left;で顔写真を左寄せしてしまえばいいんじゃね？」ということなんですけど、試してみます。

できました。
このように写真が左寄せになって、右側にテキストが配置されるので、顔写真でセリフを話しているように見えます。

キャラクターを交互に入れ替えながら並べていけば、会話しているように見えるでしょう。

これは、ただこういうHTMLです。

<div>
<img src="顔写真のURL" width="80" style="float: left; margin-right: 10px;">
<p>できました</p></div>

複数のセリフを並べるときには、顔写真＋セリフをセットでくくったdivにmargin-bottomあたりを指定してあげるとよさそうです。

とはいえ、これで終りというほどそう簡単ではないんですね。というのは、

セリフが短くて、テキストの高さが顔写真に足らないと

こんな風に、顔の位置がズレてっちゃうんですよ。ということは、短いセリフが連続すると、こんな風にどんどん顔がつながってっちゃうんですね。これはめちゃくちゃかっこう悪いので、ぜったいに避けたい。さらに、短いセリフの次のセリフが長かったりすると、こんな風に折返しすので、すごく混沌としたかんじになるんです。

フロートした右側にさらにフロートした画像が来ちゃうという、よくあるパターンに見えます。どうすればいいんでしょう？

その2. セリフごとに写真のフロートをクリアする

フロートを解除したいんだから、セリフごとにclear: left;してやればいいんじゃね？と思いつくわけですが、単純にやるとこうなります。

セリフが短くて、テキストの高さが顔写真に足らないけれど

clearしてるので高さが認識されて写真の下に写真が並びます。
けど、写真がひっついてるな……。margin-bottomは入れてるんだけど……

マージンを空けたはずなのに効いてない。これはなぜかというと、floatしてclearしたときにマージンが相殺されちゃうことがあるらしいんです。

そこでどうするのか？いろいろ試して、顔写真とセリフをワンセットでくくっているdivに、顔写真分の高さをmin-heightで指定するといいのではないか？ということを思いついたのでやってみます。

セリフが短くて、テキストの高さが顔写真に足らないけど

clearしてるので高さが認識されて写真の下に写真が並ぶし、ボックスの高さが最低でも80pxなので、上下マージンが効いてセリフのあいだにちゃんと隙間が空くし、これでなんとかかっこうは付いてるんじゃないかなー。こうやって次のセリフが長くなったときに折返しても、ちゃんとひと固まりのセリフとして認識できそうだからよかった

第一部完

うまくいきました。次回作にご期待ください！

その3. セリフ部分を上下で中揃えする ─ テーブルを使う

ひとまずこれで使えるわけですが、もうちょっといい感じにしたいですね。写真をできれば丸く切り取りたいし（画像を加工するのも面倒）、セリフが短くてテキストの高さが顔写真に足らないときには、セリフを写真の上下中央に中揃えしたくなりませんか？

セリフの中揃えにを解決するのは、実はテーブルを使うと楽なんです。

	セリフが短くて、テキストの高さが顔写真に足らないけど
	テーブルなのでいい感じで上下にバランス取れて並ぶし、上下の中揃えもできるし、罫線だけCSSで消せば問題ないから、これで十分じゃないのかな？あ、セリフが長くなったときの折返しがちょっと違うことに気づきましたか？左端まで戻らないで、テキストの部分のカラムに戻るだけになるんですね。
	終わり

このテーブルからborder: none;で罫線を消してみましょう。

セリフが短くて、テキストの高さが顔写真に足らないけど

テーブルなのでいい感じで上下にバランス取れて並ぶし、上下の中揃えもできるし、罫線だけCSSで消せば問題ないから、これで十分じゃないのかな？
あ、セリフが長くなったときの折返しがちょっと違うことに気づきましたか？左端まで戻らないで、テキストの部分のカラムに戻るだけになるんですね。

終わり

真ん中のセリフがちょっと変ですね。顔写真まで中揃いになっている。顔写真は上に寄せましょう。

セリフが短くて、テキストの高さが顔写真に足らないけど

テーブルなのでいい感じで上下にバランス取れて並ぶし、上下の中揃えもできるし、罫線だけCSSで消せば問題ないから、これで十分じゃないのかな？
あ、セリフが長くなったときの折返しがちょっと違うことに気づきましたか？左端まで戻らないで、テキストの部分のカラムに戻るだけになるんですね。

終わり

これでもよさそうです。2010年代にもなってテーブルレイアウトというのもなんですが、手っ取り早いかんじはします。

その4. テーブルっぽい表示を取り入れる

とはいえ、表ではないところでテーブルを使うというのもちょっとセマンティクス的にどうなんだろう？という気もしますね。

そんなこともあろうかと、なのかどうかはわかりませんがdisplay: table-cellというものがあります。さらにいくつか試行錯誤したことがあるのですが、そろそろ段階を追うのも面倒でしょうから一気にいきますが、次の3つのスタイルも適用します。

上下の中揃えにはvertical-alignというプロパティをmiddleにする
フロートした画像の下に回り込んでるセリフ部分は高さがなくなってるのでheightで同じだけの高さを確保する
画像にborder-radius: 50%;を指定すると丸抜きできる

その2.のHTMLにこれを適用してみましょう。

セリフが短いときは、上下で中揃い

clearしてるので高さが認識されて写真の下に写真が並ぶし、ボックスの高さが最低でも80pxなので、上下マージンが効いてセリフのあいだにちゃんと隙間が空くし、これでなんとかかっこうは付いてるんじゃないかなー。こうやって次のセリフが長くなったときに折返しても、ちゃんとひと固まりのセリフとして認識できそうだからよかった

第二部完

さて、ここまでを整理してみましょう。これは、こういうHTMLで構成されています。

<div style="margin-bottom: 15px; clear: both; min-height: 80px;">
  <img src="顔写真のURL" width="80" style="float: left; margin-right: 10px; border-radius: 50%;">
  <p style="display: table-cell; vertical-align: middle; height: 80px;">セリフ1</p>
</div>
<div style="margin-bottom: 15px; clear: both; min-height: 80px;">
  <img src="顔写真のURL" width="80" style="float: left; margin-right: 10px; border-radius: 50%;">
  <p style="display: table-cell; vertical-align: middle; height: 80px;">セリフ2</p>
<div style="margin-bottom: 15px; clear: both; min-height: 80px;">
  <img src="顔写真のURL" width="80" style="float: left; margin-right: 10px; border-radius: 50%;">
  <p style="display: table-cell; vertical-align: middle; height: 80px;">セリフ3</p>
</div>

style属性に長々とスタイルが書いてあるのもどうかという気がしますが、ブログのようなCMSを使っていて、サイト全体のCSS設定には触らないで記事を作らないといけないということもあるわけです。そういうときに記事内で凝ったことをするには、どうしてもstyle属性に頼らざるをえない。

これは単純にコピペすればセリフを増やしていけますから、まったく洗練されていないけれど実用にはなるわけで、こういったコピペ用のスタイルが、それぞれの編集部に秘伝のタレのようにたくさんあって、会話させたいならこのHTMLスニペットをコピペして編集する、みたいなことが行われているのではないかなあと推測するのですが、実際のところどうなのか気になるところです。

その5. スタイルを分離する

とはいえ、これはもう十分に長いので、デザインとコンテンツを分離しましょう。適当にクラスを当てるとこうなります。

<div class="talk">
  <img src="顔写真のURL" class="talk-icon">
  <p class="talk-serif">セリフ1</p>
</div>

div.talk {
  margin-bottom: 15px;
  clear: both;
  min-height: 80px;
}
div.talk img.talk-icon {
  width: 80px;
  float: left;
  margin-right: 10px;
  border-radius: 50%;
}
div.talk p.talk-serif {
  display: table-cell;
  vertical-align: middle;
  height: 80px;
}

ということで、この記事は終わりです。

先ほども書いたように、それぞれの編集部でこういったHTMLやCSSのスニペットが使われているのではないかなと思うのですが、この記事のスタイルが最適解だとはおもいませんし、別のやり方でもっと簡単にやってるところがあるなら教えてもらいたいし、このやり方のおかしいところ、まずいところがあるなら教えてもらえると嬉しいです。

なお、いまはfloatで画像を左寄せするのではなく、顔写真とセリフをflexboxで並べるのがよいそうです。ということで、この記事のやり方そのものがもう流行らないスタイルなんですね。来年はそのあたりを取り入れた記事が書けるようになっているといいなあ。

ライティングや編集にまつわるあれこれ Advent Calendar 2018ですが、明日は「本を読む」の @emasakaさんです。よろしくおねがいします。