SimpleIsm

Re: CSSテキスト飾り罫

CSS

• CSS テキスト飾り罫（TexTsiTe）

お遊び程度の実験に便乗してみる。

A: 「ありがちな連続+」のアレンジ

[]を使って細長い四角にしてみる。

h3#a:before {
   display: block;
   content:"-[]-[]-[]-[]-[]-[]-[]-[]-[]-[]-[]-[]-[]-";
   font-weight: normal;
   font-size: 10px;
   text-align: left;
   letter-spacing: -0.1em;
   white-space: pre;
}

B: 立体的(に見える)四角

よくやるよね。

h3#b:before {
   display: block;
   content:"＿/ ＿/ ＿/ ＿/ ＿/ ＿/ ＿/ ＿/ ＿/ ＿/";
   font-weight: normal;
   font-size: 10px;
   text-align: left;
   letter-spacing: -0.1em;
   white-space: pre;
}

C: 卍

これがホントの卍LINE。

h3#c:before {
   display: block;
   content:"卍卍卍卍卍卍卍卍卍卍卍卍卍卍卍卍卍卍卍卍";
   font-weight: normal;
   font-size: 10px;
   text-align: left;
   letter-spacing: -0.1em;
   white-space: pre;
}

D: おたまじゃくし

どう見ても下ネタです。本当にありがとうございました。

h3#d:before {
   display: block;
   content:"～● ～● ～● ～● ～● ～● ～● ～● ～● ～●";
   font-weight: normal;
   font-size: 10px;
   text-align: left;
   letter-spacing: -0.1em;
   white-space: pre;
}

E: バーコード

もうちょい縦に長ければ、それっぽく見えたかも。

h3#e:before {
   display: block;
   content:"| | || || | | |  || | || || |  | | || | ||";
   font-weight: normal;
   font-size: 10px;
   text-align: left;
   letter-spacing: -0.1em;
   white-space: pre;
}

F: 有刺鉄線

アスタリスクを使いたかったのだけど、あいにくバツ(×)に横棒(-)のやつだった。

h3#f:before {
   display: block;
   content:"→I←→I←→I←→I←→I←→I←→I←→I←";
   font-weight: normal;
   font-size: 10px;
   text-align: left;
   letter-spacing: -0.1em;
   white-space: pre;
}

そのファイル。書いてる途中で気付いたのだけど、ローカルで実験してみた(デフォルトでスタイルシートが適用されてない)のと見え方が大分違う。まぁ当たり前か。あー、と言うかfont-familyを指定しなければいいのか。

いい暇つぶしにはなりました。卒論やれって話ですね、はい。