まとまった文章を書きたくなったときに書いてます。感想はプロフィールページにある一言メッセージフォームからお願いします。
No.62
てがろぐでpreっぽい自由装飾記法
- 2022.3.28(Mon) 13:52:02
- Web
このブログで使っているてがろぐは投稿にHTMLタグが使えません。その代わり、文字修飾に使える独自の記法があります。例えば[B:太字]と書けば太字と表示されます。この記法の中に自由装飾記法というのがあります。自由に記法を追加できるもので、追加した記法の見た目はCSSを追加することで行います。
.deco-pre{
display:block;
position:relative;
width:100%;
line-height:1.4;
white-space:pre;
font-family: 'Inconsolata', monospace;
background-color:#f0f8ff;
border-left: .3rem solid #93b6b8;
padding:1rem 0 1rem 4.2rem;
margin:1.6rem 0;
overflow-x:auto;
overflow-y:hidden;
}
.deco-pre:before {
position:absolute;
top:1rem;
left:0;
bottom:1rem;
overflow:hidden;
color:#93b6b8;
content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A";
border-right:.1rem solid #93b6b8;
padding-right:1rem;
width:2.6rem;
text-align:right;
}ざっくり解説すると、タグをブロックレベル要素にした上でbefore擬似要素を使って行番号を追加してます。まずは.deco-pre{〜}の詳細から。
てがろぐの自由装飾記法の元になるタグは<span>ですが、このタグはインライン要素なのでdisplay:block;でブロックレベル要素と同じ挙動にします。position:relative;はbefore擬似要素で行番号を表示する際に必要になりますので後述。width:100%;はボックスの幅が親要素と同じなのを表し、line-height:1.4;は行の高さを指定してます。行の高さを指定したのは、<body>に指定している値が1.7とやや高いからで、特に指定の必要はないです。white-space:pre;はソースの中の半角スペースや改行などを<pre>と同じように扱う指定です。つまり改行しなければボックスをはみだし、折り返しはしません。はみ出してしまうと困るので、ボックスに横スクロールバーを必要時のみ表示させるようにするのがoverflow-x:auto;です。
なお、font-familyはmonospaceを指定しますが、私はGoogle Fontsから引っ張ってきてます。preとcodeのfont-familyとカラーバリエーションという記事が背景色や文字色を含め一般的な指定の参考になると思います。
次にbefore擬似要素。position:absolute;を指定しますが親要素にposition:relative;を指定してるため、親要素の左上が起点になります。親要素に何も指定してないとウインドウ全体の左上が起点になってしまうので、このふたつは必ず書く必要があります。top:1rem;とleft:0;はその起点からどれだけ動かすかという指定ですね。
そしてcontentの中身が行番号です。そのまま数字を羅列しても横方向にずらっと表示されるだけなので、\Aで改行表示されるようにしてます。この改行は親要素、もしくはbefore擬似要素のwhite-spaceがソース内の改行に対応してないと反映されないので注意してください。
このやり方は書いた数字分だけ行番号が表示されるわけですが、書いた行番号以上の行数になっても数字が表示されないだけです。しかし書いた最大の行番号より行数が少なかった場合、ボックスから残りの行番号がはみ出して表示されることになってしまいます。それを防ぐためにoverflow:hidden;を指定して、はみ出した部分は非表示にしてます。
後はborderやらpaddingやらを弄れば完成です。このブログでは1rem≒10pxになってるので、ご自分のサイトに合わせて数値を弄ればいいでしょう。
実のところここまでして行番号を表示する必要はないと思うのですが、やれるとなるとやってみたくなる質なもので。興味ある方は参考にしてください。
#CSS #てがろぐ
例えば、以下のⒶように記述すると、Ⓑのように出力されます。これを使って、てがろぐで整形済みテキストとして表示するタグ<pre>と同じような自由装飾記法を作ってみたいと思います。私がこのブログで使ってるCSSは下記の通り。これが表示サンプルでもあります。参考にした記事はPre CodeブロックにCSS擬似要素で行番号をつける方法 – Sakurai Rono PENです。/*pre*/
Ⓐ自由装飾記法： [F:sakura:あいうえお]
Ⓑ出力されるHTML： <span class="deco-sakura">あいうえお</span>
てがろぐ 使い方・設定方法 - にししふぁくとりー
.deco-pre{
display:block;
position:relative;
width:100%;
line-height:1.4;
white-space:pre;
font-family: 'Inconsolata', monospace;
background-color:#f0f8ff;
border-left: .3rem solid #93b6b8;
padding:1rem 0 1rem 4.2rem;
margin:1.6rem 0;
overflow-x:auto;
overflow-y:hidden;
}
.deco-pre:before {
position:absolute;
top:1rem;
left:0;
bottom:1rem;
overflow:hidden;
color:#93b6b8;
content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A";
border-right:.1rem solid #93b6b8;
padding-right:1rem;
width:2.6rem;
text-align:right;
}ざっくり解説すると、タグをブロックレベル要素にした上でbefore擬似要素を使って行番号を追加してます。まずは.deco-pre{〜}の詳細から。
てがろぐの自由装飾記法の元になるタグは<span>ですが、このタグはインライン要素なのでdisplay:block;でブロックレベル要素と同じ挙動にします。position:relative;はbefore擬似要素で行番号を表示する際に必要になりますので後述。width:100%;はボックスの幅が親要素と同じなのを表し、line-height:1.4;は行の高さを指定してます。行の高さを指定したのは、<body>に指定している値が1.7とやや高いからで、特に指定の必要はないです。white-space:pre;はソースの中の半角スペースや改行などを<pre>と同じように扱う指定です。つまり改行しなければボックスをはみだし、折り返しはしません。はみ出してしまうと困るので、ボックスに横スクロールバーを必要時のみ表示させるようにするのがoverflow-x:auto;です。
なお、font-familyはmonospaceを指定しますが、私はGoogle Fontsから引っ張ってきてます。preとcodeのfont-familyとカラーバリエーションという記事が背景色や文字色を含め一般的な指定の参考になると思います。
次にbefore擬似要素。position:absolute;を指定しますが親要素にposition:relative;を指定してるため、親要素の左上が起点になります。親要素に何も指定してないとウインドウ全体の左上が起点になってしまうので、このふたつは必ず書く必要があります。top:1rem;とleft:0;はその起点からどれだけ動かすかという指定ですね。
そしてcontentの中身が行番号です。そのまま数字を羅列しても横方向にずらっと表示されるだけなので、\Aで改行表示されるようにしてます。この改行は親要素、もしくはbefore擬似要素のwhite-spaceがソース内の改行に対応してないと反映されないので注意してください。
このやり方は書いた数字分だけ行番号が表示されるわけですが、書いた行番号以上の行数になっても数字が表示されないだけです。しかし書いた最大の行番号より行数が少なかった場合、ボックスから残りの行番号がはみ出して表示されることになってしまいます。それを防ぐためにoverflow:hidden;を指定して、はみ出した部分は非表示にしてます。
後はborderやらpaddingやらを弄れば完成です。このブログでは1rem≒10pxになってるので、ご自分のサイトに合わせて数値を弄ればいいでしょう。
実のところここまでして行番号を表示する必要はないと思うのですが、やれるとなるとやってみたくなる質なもので。興味ある方は参考にしてください。
#CSS #てがろぐ
- この投稿日時に関連する投稿：
- この投稿に隣接する前後3件ずつをまとめて見る