四字熟語の意味問題は、傍線部の読みを答えさせる問題です。
これが、前半2文字だったり後半2文字だったりするので、こちらも語群に含めなければなりません。
今回は傍線（縦棒）ではなく、下線（横棒）として下記のように表示させます。
See the Pen Underline Samples by gulf_stream (@Hitomi-Kuge) on CodePen.
上記のように四字熟語によって下線位置を動的に変更して表示させようと思います。
が、今回はPHP（Controller）を使って表示させます。
また、上記ではCSSを使っていますが、今回はTailwindcssを使っていこうと思います。（ほぼ変わりませんが）
substr と mb_substr
下線を引くwordを抜き出します。
echo substr('四字熟語',0,2);すると
と、文字化けしてしまいました・・・。
このsubstrは1バイト用の関数なので、こんな風に文字化けしてしまうわけです。
これを1バイト文字列にすればちゃんと表示されます。
echo substr('abcdefg',0,2);
じゃあ、どうすればいいの？と思うかもしれませんが、しっかりマルチバイト用のmb_substrという関数が用意されています。
日本語の1文字＝2バイトとしてカウント
echo mb_substr('四字熟語',0,2);
substrもですが、このmb_substrの引数は
mb_substr(‘〇’,△,×); ＝ 〇という文字列から△を先頭にして×個の文字を取り出してください
という意味です。
（△は0から数えた数なのでご注意ください）
mb_strcut
似たような関数にマルチバイト関数にmb_strcutがあります。
ですが、これもsubstr同様、上記で言う日本語の1文字あたり□=3でカウントします。
echo mb_strcut("四字熟語",0,6);substr、mb_strcut使いづらいので、mb_substrを使います。
mb_substr で文字列を抜き出す
先に対象の文字列からmb_substrを使って、下線を引く文字列を取得しておきます。
動的だと表現するために、今回はrand()関数を使って四字熟語の前半2文字にするのか後半2文字にするのか決めようと思います。
0か1しか出ないrand()関数を作り、0がでたら前半2文字、1がでたら後半2文字を抜き出します。
$num = rand(0,1);
if($num === 0){
// 前半2文字
$part = mb_substr("四字熟語",0,2);
}else{
// 後半2文字
$part = mb_substr("四字熟語",2,2);
}0がでたら「四字」、1がでたら「熟語」が抜き出されます。
これに下線を引いていこうと思います。
str_replace でHTMLタグに置き換える
str_replaceで上記で抜き出した下線を引きたい語句を、実際のHTMLタグに置き換えます。
そんなことして、全部文字列じゃなくて、HTMLタグとして認識されるの？と思われるかもしれませんが、
htmlspecialcharsを使っている場合を除けばこれがちゃんと認識されるんです！
str_replace(〇, △ , ×) = ×の中に入っている〇を全て△に置換してくださいという意味です。
なので、上記で抜き出した語句にのみHTMLタグが付与された状態になっています。
$word = str_replace(
$part,
'<span class="underline decoration-blue-500 decoration-4">' . $part . '</span>',
"四字熟語"
);冒頭で説明した通り、今回のstyleはTailwindcssで書いています。
親要素にflexやinline-blockが指定されていても改行されないように、spanタグをおすすめします。
今回の場合であれば、
mb_substrの第一引数とstr_replaceの第三引数は必ず同じでなければなりません。
Viewで表示する
上記で置換した変数を使ってViewで表示します。
<div><?=$word?></div>上記は
<div><span class="underline decoration-blue-500 decoration-4">四字</span>熟語</div>または
<div>四字<span class="underline decoration-blue-500 decoration-4">熟語</span></div>としてみなされます。
なので、リロードする度に前半か後半かのどちらかに青い下線が表示されるようになります。
おわりに
今回はPHP（Controller）から下線を引く位置を動的に変更する方法をお伝えしました。
これが出来れば、故事・成語・諺あたりの一文でも使えそうかなと思っています。
htmlspecialcharsさえ使っていなければ、HTMLタグもPHP側から送れるのは大きいですよね。
この方法が少しでも参考になれば嬉しいです。