これは一つのテキスト遊び。スクロールと展開
昨日の記事で違う方面の反響があったので、そこら辺を共有したいと思う。
指定したスペース内でのスクロール
スペース内でのスクロール。あまり使う機会はないかもしれない。
難しいことは無くて、widthとheightで指定したスペースにoverflowを入れるだけで、その中でスクロールしてくれる。
※下のテキストは枠内でスクロールします。中にコードもいれてあります。
(´・ω・ ｀)
( ´_ゝ`)ノ
(*^ｍ^)
(*´ー｀*)
(`･ω･´)
(*´ー｀*)
(´・ω・`)
(´；ω；｀)
(｀；ω；´)
(｡･ω･｡)ﾉ
(･ε･｀ )
ヾ(*´∀｀*)ﾉ
｡:.ﾟヽ(´∀`｡)ﾉﾟ.:｡ ゜
※コードはこんな感じ
<div class="samplescroll">
( ˘•ω•˘ )
(´・ω・ ｀)
( ´_ゝ`)ノ
(*^ｍ^)
(*´ー｀*)
(`･ω･´)
(*´ー｀*)
(´・ω・`)
(´；ω；｀)
(｀；ω；´)
(｡･ω･｡)ﾉ
(･ε･｀ )
ヾ(*´∀｀*)ﾉ
｡:.ﾟヽ(´∀`｡)ﾉﾟ.:｡ ゜
</div>
<style>
.samplescroll {
width: auto;
height: 180px;
overflow: auto;
padding: 5px;
border: 1px solid #ddd;
}
</style>
widthで横幅を指定できるけど面倒だったのでautoにしてるだけ。overflowもautoにしているけど、scrollにすると見た目がまた違う。
瞬時なテキスト展開
これもあまり見かけない。展開が瞬時に行われる。
使い勝手が良いと僕は思う。CSSを必要としない（たぶん）
アコーディオン的なやつも
紹介されていたサイトのコードを少しいじった。はてな記法だと無理っぽい。
tajuso.net
See the Pen
NWqvNOe by mikoto (@mikotohodo)
on CodePen.
まとめ
展開系は道案内や地域案内での地図などの表示に良いと思います。
「MAPはこちら！」などと設置して押すと地図が出てくる。記事内の表示される縦幅の縮小ができる。まあ、スマートにしたら良いってモノでもないと思いますが、物は使いようですかね。
全部HTMLとCSSだけで出来るので使ったことがない人は機会があれば是非に。
