CSSのafter, beforeに関する覚書とチャット小説の設定

吹き出しのデザインをするときに、CSSのafter, beforeを勉強したときの覚書

CSSにおいてafterやbeforeを指定すると疑似要素を追加することができる。

::after (:after)

::before (:before) - CSS: カスケーディングスタイルシート | MDN

例：

a::before {
 content: "＜＜";
}
a::after {
 content: "＞＞";
}

<a href="/">トップページに戻る</a>

こんな風に要素を追加できる。

デフォルトではインライン要素になっている。色々な装飾も可能。

.box::after {
 content: "オレンジのボックスです。";
 background-color: #FFBA10;
 border-color: black;
 border-style: dotted;
}

<div class="box">box</div>

これを応用してよく使われるのがツールチップと呼ばれるもの。

特定の要素をホバーすると浮き出てくる補足説明やHelpのこと。

span[data-descr] {
 position: relative;
 text-decoration: underline;
 color: #00F;
 cursor: help;
}

span[data-descr]:hover::after {
 content: attr(data-descr);
 position: absolute;
 left: 0;
 top: 24px;
 min-width: 200px;
 border: 1px #aaaaaa solid;
 border-radius: 10px;
 background-color: #ffffcc;
 padding: 12px;
 color: #000000;
 font-size: 14px;
 z-index: 1;
}

[data-descr]はHTML5カスタムデータ属性で、CSSやJavacriptに情報を渡すことができます。attrで中身を取り出せます。

contentに attr(data-descr);で中身を取り出します。

いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ

親要素にposition: relative;を指定して、疑似要素にposition: absolute;を指定することで親要素から見た場所に表示を出すことができます。

他に、チェックリストにも使われています。

疑似要素はいくつか種類があって、

::after
::before 
::cue 
::first-letter 
::first-line
::selection
::slotted()

よく使われるのは::first-letterですかね。 段落の最初の文字だけ大きくしたいとかで使われます。

p::first-letter {
 font-size: 200%;
 color:red;
}

こんな感じです。

::first-lineも似たようなもので、最初の行に適用されます。

ただ、最初の行の長さは閲覧環境によって変わるので、あまり使われないのかも。

::selectionは選択した範囲に適用されるもの。

以下、チャット小説

チャット風のデザインをできる小説投稿サイトはいくつかあるので、どんな感じに実装しているか見てみる。

・ノベルデイズ

<div>
<div>コメント</div>
<div>画像</div>
</div>

比率はスマホ、70％、20％、PCで640px、120px

・テラー

<div>
<div>
<div>名前</div>
<div>コメント</div>
</div>
<div>画像</div>
</div>

位置はdivブロックからの絶対値指定

display:flexでサイズ調整

・プリ小説

Angularで作っているのでやたらとタグが挿入されている。Angularの文法は勉強不足なので構造はよくわからないけど多分テラーみたいな感じ。（適当）

・フォレストページ+

<li>
<div>
<div>
<div>アイコン</div>
<div>
<div><small>名前</small></div>
<p>コメント</p>
</div>
</div>
</div>
</li>

リストで管理している。名前にsmallを使ってる。ラッパー多め。

アイコン60px, コメント58%（スマホ、PC共通）

・nanamarche

なぜかフォレストページ+と同じ。え？

どこか繋がっているのだろうか？