#31　行頭揃えの方法

「彼らは巨人を発見次第、赤の信煙弾を発射する」（『進撃の巨人』諫山創 )

日本語学習サイト作成作業は、まずまず順調に進んでいる。
現在、第１章のレッスン２が終了し、レッスン３に手をつけ始めたところ。
このレッスン３が終わること、すなわち第１章が終わる。
学習サイトは全部で７章構成なので、第１章が終われば7分の１終了を意味する。

ところで、サイト内での行頭揃えについての情報がネット上にあまりない。
何がしたいのかというと、ワープロソフトでいうところのタブ設定のこと。
インデントと言えばわかる人もいるかもしれない。たとえば、下のような会話で…

鈴木先生：リンさん、おはよう。
リン：先生、おはようございます。

「リンさん、おはよう」と「先生、おはようございます」の行頭を揃えたいということ。

強引にやるなら、全角スペースを何度も打ち込むこともできるが、スマートではない。
レイアウトボックスやらカラムによる分断やらの方法もあるが、それもちょっと…
それで、何とかCSSによる装飾か何かを使ってお手軽にやりたいなと思って探してみたが、
これと言った方法を載せている人がいない。うーん困った。

それで、AIさんに相談すると、また奇妙奇天烈な返答を返してきた。もう騙されませんよ。
これはドツボにハマるパターン。自身のAIリテラシー能力が上がっていることを感じる。
で、AIのアドバイスは無視して、もう一度検索ワードなど変えたりして右往左往してみた。

ここで、何度も見たとは思うのだが、以下のサイトが心に引っかかり、しばし考える。
Webliker.info　すぐわかる！HTMLでスペースや空白を入れる正しい方法
https://webliker.info/html/03847/

このページ内の「CSSで文字の左右に余白をとる【推奨度：高】」にあったコード。
HTMLは次の一行だけのコード。<span class="mgr-10">語句</span>
CSSは次の三行のコード。.mgr-10{（改行） margin-right : 10px;（改行）}
このコードで、「語句の右側に10pxの余白を作る」ことができる。とてもシンプル。

ただ、これだと、その場で欲しい余白が変わったときに対応ができない。
mgr-10、mgr-11、mgr-....とか、何十個も作るのはナンセンスだと思って見送っていた。
しかし、待てよ？これをmgr-xにして、xの変数として自在に余白を作る方法ってない？
これをAIさんに投げてみた。BINGO！いい答えが返ってきた。

HTMLのコード一行。<span class="mgr" style="--m:変数px">語句</span>
CSSのコード四行。,mgr{（改行）display:inline-block;（改行）width:var(--m);（改行）}

上のコードを使うと、１文字で大体5pxの空白を作ることができる。
例えば、語句の右に５文字分の空白が欲しければ、変数を25にすればいいというわけ。
まあ、実際は、空白の微調整でプレビューと変数を書き換えの右往左往が面倒だけど、
コードがシンプルで確認しやすいから、ストレスはそんなにない。
AIさんよお、僕がこんな苦労をする前に、早く教えてくれないかなあ。はあああ。

というわけで、これからもコツコツ、日本語学習サイトを作り上げていく。
来週にはおそらく、第１章が終了していることだろう。