【CSS】オシャレで簡単に「続きを読む」を実装する方法【Jquery】

テキストの冒頭部分だけを見せておきながら、ユーザーが続きを読みたい時に「続きを読む」をクリックすることで表示させているサイトをたまに見かけますよね。

ユーザー側に余計なスクロールをさせず、読みたい文章だけ選んで表示させる便利な機能です。

その機能をなるべく簡単に、かつCSSで少しデザインにこだわって作ってみました。

ws000059

CSS

JavaScript(Jquery)

デモ

あなたも今日もっともこの遠慮方ってのの上を受けたない。

もし前へ相当式はさぞその尊敬だでしょなりを過ぎばいるたがは誤解ありですたから、ずいぶんにはおりましますんで。

一人ぼっちにしたものはけっして事実がまるでうたた。

おおかた大森さんが経験がたちょっと生活にありで主人この学校みんなか関係をにおいて今解剖うでたたから、わがほかはそれか釣人にすると、大森さんの事が本位の私がもうご発音と読むてこれ本領とお注意をあっようにいくら実講演にもっだたいて、いやしくもいったい公言をしなけれどもいならはずで云いたた。たとえばそうしてご知人に知らものはそう勝手と申しなけれと、その会員がはするでてというオイケンに聴いからいんた。

続きを読む

解説

テキストを入れる要素に、heightを指定し、高さを設定します。

その要素に対して、overflow:y:hiddenも設定し、縦にはみ出た分は非表示にさせます。

そしてその要素の下に「続きを読む」ボタンを設置。

テキストを入れる要素に対して相対的に配置できるように、cssのpotisionを使用しています。

JavaScriptでは、まずJqueryライブラリを読み込みます。

続きを読むがクリックされたら、heightとoverflowの設定を解除し、すべてのテキストが表示される仕組みになってます。

グラデーションを設定し、途切れる間際の文章は透明化させているのがこだわりの一つです。

プラグイン不要で簡単に設置できますので、よかったら参考にしてください。

スポンサーリンク
レクタングル(大)
レクタングル(大)

フォローする

スポンサーリンク
レクタングル(大)