Works

Home Works プルダウンUI

プルダウンUI

コンテンツを途中まで隠すUI。

隠したい要素にクラスjs-pullContentを付与し、開閉させるボタンにクラスjs-pullToggleを付与。それぞれにdata-pull属性で「ユニークな同じ値(ここではstory2」を指定し紐付ける。
隠したい要素にはdata-default属性隠しておく時の要素の高さを指定する。指定がない場合は、初期値「0」で、完全に隠れる。
開閉させるボタンに、span要素を使って.open要素と.close要素を入れておくと、開閉時に切り替わる。

二、活版所

 ジョバンニが学校の門を出るとき、同じ組の七八人は家へ帰らずカムパネルラをまん中にして校庭のすみさくらの木のところに集まっていました。それはこんやの星祭に青いあかりをこしらえて川へ流す烏瓜からすうりを取りに行く相談らしかったのです。
 けれどもジョバンニは手を大きくってどしどし学校の門を出て来ました。すると町の家々ではこんやの銀河の祭りにいちいの葉の玉をつるしたりひのきのえだにあかりをつけたりいろいろ仕度したくをしているのでした。
 家へは帰らずジョバンニが町を三つ曲ってある大きな活版処にはいってすぐ入口の計算台に居ただぶだぶの白いシャツを着た人におじぎをしてジョバンニはくつをぬいで上りますと、き当りの大きなをあけました。中にはまだ昼なのに電燈がついてたくさんの輪転器がばたりばたりとまわり、きれで頭をしばったりラムプシェードをかけたりした人たちが、何か歌うように読んだり数えたりしながらたくさん働いてりました。
 ジョバンニはすぐ入口から三番目の高い卓子テーブルすわった人の所へ行っておじぎをしました。その人はしばらくたなをさがしてから、
「これだけ拾って行けるかね。」と云いながら、一枚の紙切れをわたしました。ジョバンニはその人の卓子の足もとから一つの小さな平たいはこをとりだして向うの電燈のたくさんついた、たてかけてあるかべの隅の所へしゃがみむと小さなピンセットでまるで粟粒あわつぶぐらいの活字を次から次と拾いはじめました。青い胸あてをした人がジョバンニのうしろを通りながら、
「よう、虫めがね君、お早う。」と云いますと、近くの四五人の人たちが声もたてずこっちも向かずに冷くわらいました。
 ジョバンニは何べんも眼をぬぐいながら活字をだんだんひろいました。
 六時がうってしばらくたったころ、ジョバンニは拾った活字をいっぱいに入れた平たいはこをもういちど手にもった紙きれと引き合せてから、さっきの卓子の人へ持って来ました。その人はだまってそれを受け取ってかすかにうなずきました。
 ジョバンニはおじぎをすると扉をあけてさっきの計算台のところに来ました。するとさっきの白服を着た人がやっぱりだまって小さな銀貨を一つジョバンニに渡しました。ジョバンニはにわかに顔いろがよくなって威勢いせいよくおじぎをすると台の下に置いたかばんをもっておもてへ飛びだしました。それから元気よく口笛くちぶえきながらパン屋へ寄ってパンのかたまりを一つと角砂糖を一ふくろ買いますと一目散いちもくさんに走りだしました。

<div class="js-pullContent" data-pull="story2" data-default="240"> <h4>二、活版所</h4> ︙ </div> <button type="button" class="c-more -xs js-pullToggle" data-pull="story2"> <span class="open">もっと見る</span><span class="close">閉じる</span> </button>

開閉させるボタンはいくつでも置け、data-pull属性で紐付けた隠したい要素を開閉させることができるので、例えば、ここをクリックしても、上のコンテンツを開閉できる。

<p>開閉させるボタンはいくつでも置け、<b>data-pull属性</b>で紐付けた隠したい要素を開閉させることができるので、例えば、<span class="c-textlink js-pullToggle" data-pull="story2">ここをクリック</span>しても、上のコンテンツを開閉できる。</p>

プルダウンしそうなボタン

プルダウン専用のボタンも用意してある。button要素にクラスc-pullを付与し、中身には下向き矢印アイコンを置く。

五、天気輪てんきりんの柱

 牧場のうしろはゆるい丘になって、その黒い平らな頂上は、北の大熊星おおぐまぼしの下に、ぼんやりふだんよりも低く連って見えました。
 ジョバンニは、もう露の降りかかった小さな林のこみちを、どんどんのぼって行きました。まっくらな草や、いろいろな形に見えるやぶのしげみの間を、その小さなみちが、一すじ白く星あかりに照らしだされてあったのです。草の中には、ぴかぴか青びかりを出す小さな虫もいて、ある葉は青くすかし出され、ジョバンニは、さっきみんなの持って行った烏瓜からすうりのあかりのようだとも思いました。
 そのまっ黒な、松やならの林をえると、にわかにがらんと空がひらけて、あまがわがしらしらと南から北へわたっているのが見え、またいただきの、天気輪の柱も見わけられたのでした。つりがねそうか野ぎくかの花が、そこらいちめんに、ゆめの中からでもかおりだしたというように咲き、鳥が一ぴき、丘の上を鳴き続けながら通って行きました。
 ジョバンニは、頂の天気輪の柱の下に来て、どかどかするからだを、つめたい草に投げました。
 町の灯は、やみの中をまるで海の底のお宮のけしきのようにともり、子供らの歌う声や口笛、きれぎれのさけび声もかすかに聞えて来るのでした。風が遠くで鳴り、丘の草もしずかにそよぎ、ジョバンニのあせでぬれたシャツもつめたく冷されました。ジョバンニは町のはずれから遠く黒くひろがった野原を見わたしました。
 そこから汽車の音が聞えてきました。その小さな列車の窓は一列小さく赤く見え、その中にはたくさんの旅人が、苹果りんごいたり、わらったり、いろいろな風にしていると考えますと、ジョバンニは、もう何とも云えずかなしくなって、また眼をそらに挙げました。
 あああの白いそらの帯がみんな星だというぞ。
 ところがいくら見ていても、そのそらはひる先生の云ったような、がらんとした冷いとこだとは思われませんでした。それどころでなく、見れば見るほど、そこは小さな林や牧場やらある野原のように考えられて仕方なかったのです。そしてジョバンニは青いことの星が、三つにも四つにもなって、ちらちらまたたき、脚が何べんも出たり引っんだりして、とうとうきのこのように長く延びるのを見ました。またすぐ眼の下のまちまでがやっぱりぼんやりしたたくさんの星の集りか一つの大きなけむりかのように見えるように思いました。

<div class="js-pullContent" data-pull="story5" data-default="200"> <h4>五、<ruby><rb>天気輪</rb><rp>(</rp><rt>てんきりん</rt><rp>)</rp></ruby>の柱</h4> ︙ </div> <button type="button" class="c-pull -border js-pullToggle" data-pull="story5"> <svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#pull"/></svg> </button>

グラデーションして隠す

隠したい要素にクラス-gradientを併記すると、隠れる時に下部がグラデーションで消えてゆくようになる。

六、銀河ステーション

 そしてジョバンニはすぐうしろの天気輪の柱がいつかぼんやりした三角標の形になって、しばらくほたるのように、ぺかぺか消えたりともったりしているのを見ました。それはだんだんはっきりして、とうとうりんとうごかないようになり、鋼青こうせいのそらの野原にたちました。いま新らしくいたばかりの青いはがねの板のような、そらの野原に、まっすぐにすきっと立ったのです。
 するとどこかで、ふしぎな声が、銀河ステーション、銀河ステーションとう声がしたと思うといきなり眼の前が、ぱっと明るくなって、まるで億万の蛍烏賊ほたるいかの火を一ぺんに化石させて、そら中にしずめたという工合ぐあい、またダイアモンド会社で、ねだんがやすくならないために、わざとれないふりをして、かくして置いた金剛石こんごうせきを、たれかがいきなりひっくりかえして、ばらいたという風に、眼の前がさあっと明るくなって、ジョバンニは、思わず何べんも眼をこすってしまいました。
 気がついてみると、さっきから、ごとごとごとごと、ジョバンニの乗っている小さな列車が走りつづけていたのでした。ほんとうにジョバンニは、夜の軽便鉄道の、小さな黄いろの電燈のならんだ車室に、窓から外を見ながらすわっていたのです。車室の中は、青い天蚕絨びろうどを張った腰掛こしかけが、まるでがら明きで、向うのねずみいろのワニスを塗ったかべには、真鍮しんちゅうの大きなぼたんが二つ光っているのでした。
 すぐ前の席に、ぬれたようにまっ黒な上着を着た、せいの高い子供が、窓から頭を出して外を見ているのに気が付きました。そしてそのこどものかたのあたりが、どうも見たことのあるような気がして、そう思うと、もうどうしても誰だかわかりたくて、たまらなくなりました。いきなりこっちも窓から顔を出そうとしたとき、俄かにその子供が頭を引っ込めて、こっちを見ました。
 それはカムパネルラだったのです。

<div class="js-pullContent -gradient" data-pull="story6" data-default="200"> <h4>六、銀河ステーション</h4> ︙ </div> <button type="button" class="c-more -xs js-pullToggle" data-pull="story6"> <span class="open">もっと見る</span><span class="close">閉じる</span> </button>