Works

プルダウンUI
コンテンツを途中まで隠すUI。
隠したい要素にクラスjs-pullContent
を付与し、開閉させるボタンにクラスjs-pullToggle
を付与。それぞれにdata-pull属性で「ユニークな同じ値(ここではstory2
)」を指定し紐付ける。
隠したい要素にはdata-default属性で隠しておく時の要素の高さを指定する。指定がない場合は、初期値「0
」で、完全に隠れる。
開閉させるボタンに、span要素を使って.open
要素と.close
要素を入れておくと、開閉時に切り替わる。
二、活版所
ジョバンニが学校の門を出るとき、同じ組の七八人は家へ帰らずカムパネルラをまん中にして校庭の
けれどもジョバンニは手を大きく
家へは帰らずジョバンニが町を三つ曲ってある大きな活版処にはいってすぐ入口の計算台に居ただぶだぶの白いシャツを着た人におじぎをしてジョバンニは
ジョバンニはすぐ入口から三番目の高い
「これだけ拾って行けるかね。」と云いながら、一枚の紙切れを
「よう、虫めがね君、お早う。」と云いますと、近くの四五人の人たちが声もたてずこっちも向かずに冷くわらいました。
ジョバンニは何べんも眼を
六時がうってしばらくたったころ、ジョバンニは拾った活字をいっぱいに入れた平たい
ジョバンニはおじぎをすると扉をあけてさっきの計算台のところに来ました。するとさっきの白服を着た人がやっぱりだまって小さな銀貨を一つジョバンニに渡しました。ジョバンニは
開閉させるボタンはいくつでも置け、data-pull属性で紐付けた隠したい要素を開閉させることができるので、例えば、ここをクリックしても、上のコンテンツを開閉できる。
プルダウンしそうなボタン
プルダウン専用のボタンも用意してある。button要素にクラスc-pull
を付与し、中身には下向き矢印アイコンを置く。
五、天気輪 の柱
牧場のうしろはゆるい丘になって、その黒い平らな頂上は、北の
ジョバンニは、もう露の降りかかった小さな林のこみちを、どんどんのぼって行きました。まっくらな草や、いろいろな形に見えるやぶのしげみの間を、その小さなみちが、一すじ白く星あかりに照らしだされてあったのです。草の中には、ぴかぴか青びかりを出す小さな虫もいて、ある葉は青くすかし出され、ジョバンニは、さっきみんなの持って行った
そのまっ黒な、松や
ジョバンニは、頂の天気輪の柱の下に来て、どかどかするからだを、つめたい草に投げました。
町の灯は、
そこから汽車の音が聞えてきました。その小さな列車の窓は一列小さく赤く見え、その中にはたくさんの旅人が、
あああの白いそらの帯がみんな星だというぞ。
ところがいくら見ていても、そのそらはひる先生の云ったような、がらんとした冷いとこだとは思われませんでした。それどころでなく、見れば見るほど、そこは小さな林や牧場やらある野原のように考えられて仕方なかったのです。そしてジョバンニは青い
グラデーションして隠す
隠したい要素にクラス-gradient
を併記すると、隠れる時に下部がグラデーションで消えてゆくようになる。
六、銀河ステーション
そしてジョバンニはすぐうしろの天気輪の柱がいつかぼんやりした三角標の形になって、しばらく
するとどこかで、ふしぎな声が、銀河ステーション、銀河ステーションと
気がついてみると、さっきから、ごとごとごとごと、ジョバンニの乗っている小さな列車が走りつづけていたのでした。ほんとうにジョバンニは、夜の軽便鉄道の、小さな黄いろの電燈のならんだ車室に、窓から外を見ながら
すぐ前の席に、ぬれたようにまっ黒な上着を着た、せいの高い子供が、窓から頭を出して外を見ているのに気が付きました。そしてそのこどもの
それはカムパネルラだったのです。