,ィ┐
///|
/////|
//////{
///////ハ
|///////∧
|////////∧
{/////////ハ
}/////////ハ
Ⅷ////////∧
Ⅷ//////// ∧
Ⅷ/////////ハ
Ⅶ//////////∧ _,. -‐、
Ⅵ//////////,∧ ,. -‐'"´ /////∧
Ⅵ/////////,//\ー'"/////////////,\
Ⅶ/////////\//\///,、__,、__////// \
Ⅷ////////// \//\⌒ヽィ_ゝ{/////////\
|//////////////\//\/::/=ミx////////
Ⅵ////,. =- ___\//\//ノ////////
∨// ``ー- 、\´/////////
/ / ヽ,\////////
/ イ /./ l ∨\//////
// |/'\ | ∨/,\////
// :|_ _ \ _ | | \//,\/
/ |{斥ミxiⅣ | | ∨// \
____ / | ヒ刈ヽ\Ⅵ、-‐ '_¨ ̄¨ =- ∨///
___) ,' , vソ `ー,≦_∨ ∨//
∨ _ // ゝ.¨ ⌒`if示ヽ、\ l \∨/
∨{/ / { '" らi刈ハ}, \\} \
\' / 圦 、 vシ゜ ∨, \\
| / ∧  ̄ 〉 _\
{∧ {, ∧ `ヽ、 _,.、_∨ ∧``
\ ‘, ヽ {、_ ∨ ∧
\ 込 ___ _ _,. -―'=ミx、`∨ ∧
/ヽ_{/`"´ } ∨ ∧
/`ヽ/ヽ} } / Ⅵ },) 〉
_/| / , -}ノ、 _,. -イヽ、 } //
} / /_,.イ ``''"´ `ー//=ミx
/}/_,。s≦爪:::| .。s≦/‐-、'"、
{//::::::://:::l:::| ,。s≦ 、-―-` ノ: :) ヽ'
____/:::::::/:::/:::::l::::| / 、-―‐-': / /: :/ /
八::::::::::::::,:::::::::::/::::::/:::::::l:::::| / /: : : : : :/,/:/ ,イ
\:::/::::::/:::::::::/::::::::::l:::::| ,/、-': : :/: //: / //
/::::::::::::::::::::::::::::::::::::::l::::::|ノ- ' : /: /// /: ノ}
∧::::::::::::::::::::::::::::::::::::/::l::/ヽ: : / : /// /: //
、-∧::::::::::/::::::::::::::ノ:://_,. -' : ノ: :⌒´: /_ /: /,ィ
〉| >tュ'::::::::::::::/:::// ヽ: , : /: ===- ミ: :__//
ゝイヽ} |::::::::::,;:':::::::// /://: : : : : : : : : : :/
: : : : :└ ミ´: : : // >{/: : : ゝ: : : : : : /
: : : : : } | ̄ヽ_ノ、_/{:_/ : : : : : : : ; イ/
:__: :, -ヽⅥ_ゝ-=ミY: : ミx: : -=ニ三/
{ Y: :=ミx: :ヾ、: :``': : : : : : : : : _,. イ
改行用のスペース山盛空間
今回はboxを使って右側にアスキーアートを、左側にテキストを表示する方法を考えてみた。
肝心のアスキーアートを縮小する方法はスペースなどを入れて横長のAAにしてしまうというお粗末なモノだ。スマホとPCでサイズ感が変わってしまうのは確認できているね。
2つのboxを横に並べる方法は特殊タグboxの中にinlineを入れれば可能だ。
ついでに、overhiddenを入れておけばスクロールバーが表示されなくなるね。
,ィ┐
///
《orange》 /////
《orange》 //////{
///////ハ
《orange》
《orange》 {/////////ハ
}/////////ハ
Ⅷ////////∧
Ⅷ//////// ∧
Ⅷ/////////ハ
Ⅶ//////////∧ _,. -‐、
Ⅵ//////////,∧ ,. -‐'"´ /////∧
Ⅵ/////////,//\ー'"/////////////,\
Ⅶ/////////\//\///,、__,、__////// \
Ⅷ////////// \//\⌒ヽィ_ゝ{/////////\
|//////////////\//\/::/=ミx////////
Ⅵ////,. =- ___\//\//ノ////////
∨// ``ー- 、\´/////////
/ / ヽ,\////////
/ イ /./ l ∨\//////
// |/'\ | ∨/,\////
// :|_ _ \ _ | | \//,\/
/ |{斥ミxiⅣ | | ∨// \
____ / | ヒ刈ヽ\Ⅵ、-‐ '_¨ ̄¨ =- ∨///
___) ,' , vソ `ー,≦_∨ ∨//
∨ _ // ゝ.¨ ⌒`if示ヽ、\ l \∨/
∨{/ / { '" らi刈ハ}, \\} \
\' / 圦 、 vシ゜ ∨, \\
| / ∧  ̄ 〉 _\
{∧ {, ∧ `ヽ、 _,.、_∨ ∧``
\ ‘, ヽ {、_ ∨ ∧
\ 込 ___ _ _,. -―'=ミx、`∨ ∧
/ヽ_{/`"´ } ∨ ∧
/`ヽ/ヽ} } / Ⅵ },) 〉
_/| / , -}ノ、 _,. -イヽ、 } //
} / /_,.イ ``''"´ `ー//=ミx
/}/_,。s≦爪:::| .。s≦/‐-、'"、
{//::::::://:::l:::| ,。s≦ 、-―-` ノ: :) ヽ'
____/:::::::/:::/:::::l::::| / 、-―‐-': / /: :/ /
八::::::::::::::,:::::::::::/::::::/:::::::l:::::| / /: : : : : :/,/:/ ,イ
\:::/::::::/:::::::::/::::::::::l:::::| ,/、-': : :/: //: / //
/::::::::::::::::::::::::::::::::::::::l::::::|ノ- ' : /: /// /: ノ}
∧::::::::::::::::::::::::::::::::::::/::l::/ヽ: : / : /// /: //
、-∧::::::::::/::::::::::::::ノ:://_,. -' : ノ: :⌒´: /_ /: /,ィ
〉| >tュ'::::::::::::::/:::// ヽ: , : /: ===- ミ: :__//
ゝイヽ} |::::::::::,;:':::::::// /://: : : : : : : : : : :/
: : : : :└ ミ´: : : // >{/: : : ゝ: : : : : : /
: : : : : } | ̄ヽ_ノ、_/{:_/ : : : : : : : ; イ/
:__: :, -ヽⅥ_ゝ-=ミY: : ミx: : -=ニ三/
{ Y: :=ミx: :ヾ、: :``': : : : : : : : : _,. イ
改行用のスペース山盛空間
アスキーアート内部でも文字色の変更は可能なようだ。プレビューでの確認だと効果を示している《orange》とそうじゃないものがあるが、条件は不明だ。気の遠くなる作業が筆よかもしれないが、フルカラーアスキーアートの実装をハーメルンでもできるかもしれないね。
_、+''"~. . . . . . .``ヽ、
、+'". . . . . . . . . . . . .. .. .. : .
,.:´. . . .. .. .. .. ..\. . \. . . . . . :.
'. . . . . Ⅵ. . . . . . ..\. . \ . . . . ゚。
/. ../. . .. ..Ⅵ. . . . \. . \. . \. . . /,
: . . {..∨ /. .Ⅵ. . . . . .\. . \ . }. . . ./,
{... ..{. ..∨. /. Ⅵ. . .__`''<_}_ノ(. . :
{.〉. . ._∨. . ..}\´. . . . . . . . . . . .∠_. :
{.∧'´. . . \. ..}. . .ィi笊沁㍉. __,.ィ⌒ }
__ : . . ィi「笊ぅ`¨⌒ 乂;ツ }. . . ../ . . . }
;';';';';';'\ '. . .ハ弋;ツ .: . /./ . . . . :.
;';';';';';';';';/, ‘,ハ . .乂 :、 _ノ. ./....|〉. . . . . :.
;';';';';';';';';';'/, 乂ノ 込 、 ノ ⌒/|... ..|∧. . . . . .\
;';';';';';';';';';';'∧ ⌒:. . 个s。_ ,. ´ !. . .|. ∧.. . . :`¨⌒
-=ミ;';';';';';';';';} .}......l. . . .〈う爪 八. . |. . ∧. . .{
二ニ-_;';';';';';';}\ :.. ..|.. .._..__> ∨ / ∧..‘,、、 . . . ∨ /
二ニニ-_;';';';'}二\}>''~/⌒ヽ ∨ { ∧.‘, >┐..∨
二ニニニ-_;'; }二二\∠_ __〕/__ :. .∨\``~、、
二ニ-トニ-_;';}二二二\ 〕 O⌒廻/⌒} .}.. ..∨ 〉 \
>''"_} \_}/_ミ二二二 \ / { O | ̄}.八..} ̄
二〈 爻 /∨〉二二ニ-\〈__ノ\ | }' ) ∨ /
二ニ) {ニ-∨〉ニニニニ/⌒V、 \_| ∨ /
二二⌒⌒二二∨〉二二ニ-' /,人i:\ ‘, V
二二二二二二-}/∧二二{_ノ /ヽ__', ‘, }
二二二二二二-}'//}二二/ / / _〉 ゚。 }〉
二二二二二二////二ニ└(__/┐⌒{i:i∨ ゚。 .}∧
二二二二二-////二二二二二八 {i:i:i∨ 。 }i:∧
bo#DDDDDDでやっていた枠線の灰色を消してみたよ。
書くことがないのでいちおうの復習だ。boxタグ内のwは横幅、%表示でも行数表示でもできる。
hは縦幅だ。数字で行数、%で表示するとき、どこからどこまでが100%か、私はいまいち把握できていなかったりする。
ただ、枠線を入れていないとbox同士のつながりでアスキーアートが崩れて見えてしまうから、今回私は同じラインに1行の空白のboxを入れてみた
| |
_ ニ=- ―― -=ニ _ | |
>''´>''´ ``''< | |
(_/ /,,、、---=ミ ヽ ,,、、-===-、、, | |
/´ { / ./ ___ >''"-=ニニニニ=-ヽ. | |
( ゝ _ .イ /.。s≦////>''´-=ニニニニニニニ=-', | |
{ 乂__ノイ///// >''´-=ニニニニニ二ニニニ=-} | |
ゝ __ .イ ///////-=ニニニ二二二二二ニニ=-ア | |
V// /-=ニニニニニ二ニニニニ=-ア | |
}/-=ニ>''´ / `寸ニニ=->''´. | |
,,、、、、.,,_ /-=ニ/ / / ,イ/ } マ>''´ | |
,イ-=ニニニ>'-=ニ/ /芒㍉イ_.ィノ.ノ ハ | |
,'.-=ニ二/-=ニア.イ 八ゞ゚' 忙アイ 从 | |
{.-=ニ/-=≦-=彡' /ゝ ′从 i| ヘ', | |
ゝ=彡-=>''´イ ハ {\}h ` ,イ/ 八 . }} | |
`¨¨¨´ // ヘ V¨¨''ミ=彳ハ { { ノ} | |
``~、、,,_,,、< /ヽヽ `ヽ<从.乂イ人 | |
``ー=ニ_,,、、、-=彡/ ゞ=- }ヽ.\ヾ `ヽ | |
// / / | | |>`''<.ハ | |
_ .イ/ / /| /. 八 -=ヽヽ_ | |
 ̄ ,ィ / / /. |/ /\ ――>二=-、、,, (乂V_| |
イ / >'´ ,′ /、:.:.:.:` 、イ___≧x:.ヽ ,、< ̄≧===<⌒Y
-=彡 イ>'´ / /ノノ ̄\.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.{ ヽ__ア'⌒''<ヘ=ヘ
. >''´ / /_ノ-'~ヽノ |` 、:.:.:.:.:.:.:.:.:.:.:.:.:< / { 、` 、_) V.ヘ
‐'´ / /:}. /_ノ_)...ノ´ | ヽ `<.:.:.:.:.:.:.:.:/ 〈 > 、ヽ)_〉.} }
∠____/: : :l /⌒.:)h、 l ヽ `'<__/zzァ_.>…≧x__>' / ./
>''"´ ̄ /: : :/ /.:.:.:.:.:.:.:.):h、 lj l. ', |/|_//
'´ /: : : :/ / /ニニ≧x.:.:.:.:.:㍉ハ ト、', く二>''´
/ : ,ィ: : :{/>/.:.:.:.:.`''<ニヘ.:.:.:.マ}. ', | . 〉
/:, イ }>'´.:.:/ .:.:.:.:.:.:.:.:. `寸ヘ.〔叨}-、 ', | /
/ >'´.:.:.:.:.:.:.:.:.:.:.:.:.:.:.`¨¨¨¨¨´:.〉ゝノ\ ∨ l/
/ ‐''"´:.:.:.:.:.:.:.:.:.:.:.:.:.斗‐x.:.:.:.:.:.)ヽ-彳乂V、 .斗'
/―/.:.:.:.:._,,. -‐ ''"´/ V.:.:.:.:.:7/´厂) マ 「 乂_
/>''"´ / /: ㍉:.://: 厂 ): :マゝ、ヽ\`ヽ
/''´ )⌒''~^ヽ /: : : 寸/: / ¨´|: : :マ、 `^'‐'¨¨´
, イ ヽ: : : : : : : ≧=-、 _/: : :./ | : : : : 〉
{ > ''"´ ̄/⌒ヽ: : : :) : ≧=-/ |: : :イ ヽ
チラシの裏には、作品以外を透過してもいいってルールになっているみたいだからね
| |
_ ニ=- ―― -=ニ _ | |
>''´>''´ ``''< | |
(_/ /,,、、---=ミ ヽ ,,、、-===-、、, | |
/´ { / ./ ___ >''"-=ニニニニ=-ヽ. | |
( ゝ _ .イ /.。s≦////>''´-=ニニニニニニニ=-', | |
{ 乂__ノイ///// >''´-=ニニニニニ二ニニニ=-} | |
ゝ __ .イ ///////-=ニニニ二二二二二ニニ=-ア | |
V// /-=ニニニニニ二ニニニニ=-ア | |
}/-=ニ>''´ / `寸ニニ=->''´. | |
,,、、、、.,,_ /-=ニ/ / / ,イ/ } マ>''´ | |
,イ-=ニニニ>'-=ニ/ /芒㍉イ_.ィノ.ノ ハ | |
,'.-=ニ二/-=ニア.イ 八ゞ゚' 忙アイ 从 | |
{.-=ニ/-=≦-=彡' /ゝ ′从 i| ヘ', | |
ゝ=彡-=>''´イ ハ {\}h ` ,イ/ 八 . }} | |
`¨¨¨´ // ヘ V¨¨''ミ=彳ハ { { ノ} | |
``~、、,,_,,、< /ヽヽ `ヽ<从.乂イ人 | |
``ー=ニ_,,、、、-=彡/ ゞ=- }ヽ.\ヾ `ヽ | |
// / / | | |>`''<.ハ | |
_ .イ/ / /| /. 八 -=ヽヽ_ | |
 ̄ ,ィ / / /. |/ /\ ――>二=-、、,, (乂V_| |
イ / >'´ ,′ /、:.:.:.:` 、イ___≧x:.ヽ ,、< ̄≧===<⌒Y
-=彡 イ>'´ / /ノノ ̄\.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.{ ヽ__ア'⌒''<ヘ=ヘ
. >''´ / /_ノ-'~ヽノ |` 、:.:.:.:.:.:.:.:.:.:.:.:.:< / { 、` 、_) V.ヘ
‐'´ / /:}. /_ノ_)...ノ´ | ヽ `<.:.:.:.:.:.:.:.:/ 〈 > 、ヽ)_〉.} }
∠____/: : :l /⌒.:)h、 l ヽ `'<__/zzァ_.>…≧x__>' / ./
>''"´ ̄ /: : :/ /.:.:.:.:.:.:.:.):h、 lj l. ', |/|_//
'´ /: : : :/ / /ニニ≧x.:.:.:.:.:㍉ハ ト、', く二>''´
/ : ,ィ: : :{/>/.:.:.:.:.`''<ニヘ.:.:.:.マ}. ', | . 〉
/:, イ }>'´.:.:/ .:.:.:.:.:.:.:.:. `寸ヘ.〔叨}-、 ', | /
/ >'´.:.:.:.:.:.:.:.:.:.:.:.:.:.:.`¨¨¨¨¨´:.〉ゝノ\ ∨ l/
/ ‐''"´:.:.:.:.:.:.:.:.:.:.:.:.:.斗‐x.:.:.:.:.:.)ヽ-彳乂V、 .斗'
/―/.:.:.:.:._,,. -‐ ''"´/ V.:.:.:.:.:7/´厂) マ 「 乂_
/>''"´ / /: ㍉:.://: 厂 ): :マゝ、ヽ\`ヽ
/''´ )⌒''~^ヽ /: : : 寸/: / ¨´|: : :マ、 `^'‐'¨¨´
, イ ヽ: : : : : : : ≧=-、 _/: : :./ | : : : : 〉
{ > ''"´ ̄/⌒ヽ: : : :) : ≧=-/