徐々に文章を透明化と、すべて読むコピペで使えるHTML+CSS AMP対応

新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になるデザインの作り方。

JavaScriptを用いないためAMPサイトでも利用できます。

INDEX

文章を徐々に透明化
文章を徐々に透明化。クリックで表示
使用したCSSなどの説明

文章を徐々に透明化

まずは表示から。ここでは「全てを読む」をクリックしても無反応です。別ページに移動する際などに利用します。

全て読む

「ではみなさん、さういふふうに川だと云はれたり、乳の流れたあとだと云はれたりしてゐた、このぼんやりと白いものが何かご承知ですか。」　先生は、黒板に吊した大きな黒い星座の圖の、上から下へ白くけぶつた銀河帶のやうなところを指しながら、みんなに問ひをかけました。　カムパネルラが手をあげました。それから四五人手をあげました。ジヨバンニも手をあげようとして、急いでそのままやめました。　たしかにあれがみんな星だと、いつか雜誌で讀んだのでしたが、このごろはジヨバンニはまるで毎日教室でもねむく、本を讀むひまも讀む本もないので、なんだかどんなこともよくわからないといふ氣持がするのでした。　ところが先生は早くもそれを見附けたのでした。「ジヨバンニさん。あなたはわかつてゐるのでせう。」　ジヨバンニは勢よく立ちあがりましたが、立つて見るともうはつきりとそれを答へることができないのでした。ザネリが前の席から、ふりかへつて、ジヨバンニを見てくすつとわらひました。ジヨバンニはもうどぎまぎしてまつ赤になつてしまひました。　先生がまた云ひました。「大きな望遠鏡で銀河をよつく調べると銀河は大體何でせう。」　やつぱり星だとジヨバンニは思ひましたが、こんどもすぐに答へることができませんでした。　先生はしばらく困つたやうすでしたが、眼をカムパネルラの方へ向けて、「ではカムパネルラさん。」と名指しました。銀河鉄道の夜（宮沢賢治）

コード

<div style="width: 80%; margin: auto; position: relative;">
  <div class="white-gradient"> </div>
  <div class="all-read"><span style="color: #ffffff; font-weight: bold;">全て読む</span></div>
  <div style="width: 100%;">「ではみなさ～銀河鉄道の夜（宮沢賢治）</div>
</div>

スタイルシート

.white-gradient{
  position: absolute;
  bottom: 0px; 
  width: 100%; 
  height: 60%; /* 下から60％の位置までグラデーション */
  background: linear-gradient(to top,#ffffff 30%, transparent 100%); /* 30%までは#ffffff 以降100%までグラデーション */
}
.all-read{
  position: absolute;
  bottom: 10%; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 180px; 
  height: 50px; 
  line-height: 50px;
  background-color: #133345; 
  text-align: center; 
}

文章を徐々に透明化。クリックで表示

全て読む

大まかな仕組み

全てを読むをクリックすると、labelの効果でdisplay:none;で隠れているinputにチェックが入る。結果として、チェックされたinputの弟についてCSSが適用される。例えば、input:checked ~ div.main-content　は、チェックされたinputの弟でクラス名main-contentのdivが適用され、高さがauto;つまりデフォルトの通常の高さになる。

全てを読む→inputチェック→グラデーションや、全てを読むが消え、main-contentが完全に表示される。

コード

<div id="read-box"><input id="toggle" class="input-go" type="checkbox" />
  <div class="white-gradient"> </div>
  <div class="all-read"><label for="toggle"><span style="color: #ffffff; font-weight: bold;">全て読む</span></label></div>
  <div class="main-content">「ではみなさ～ました。銀河鉄道の夜（宮沢賢治）</div>
</div>

スタイルシート

#read-box{
  width: 80%; 
  margin: auto; 
  position: relative;
}
#read-box input{
  display:none;
}
#read-box .white-gradient{
  position: absolute; 
  bottom: 0px;
  width: 100%;
  height: 60%; 
  background: linear-gradient(to top,#ffffff 30%, transparent 100%);
}
#read-box .all-read{
  position: absolute; 
  width: 180px;
  height: 50px; 
  bottom: 0px; 
  left: 50%;
  transform: translateX(-50%); 
  background-color: #133345; 
  line-height: 50px;
  text-align: center;
}
#read-box .main-content{
  overflow: hidden;
  width: 100%;
  height: 200px; 
}
#read-box input:checked ~ div.white-gradient{ // + を使用せず、~と要素.クラス名で指定する方法を強く推奨します。
  background:none;
}
#read-box input:checked ~ div.all-read{
  display:none;
}
#read-box input:checked ~ div.main-content{
  height:auto;
}