ウェブページのデザインやUXを考慮する際、特定の高さを超えたコンテンツを折りたたむ「続きを読む…」という機能は非常に役立ちます。このような機能を実装するためのスクリプトとして「readmore.js」があります。 この記事では、このスクリプトを使用して指定した高さ以上のコンテンツエリアに自動で「続きを読む…」リンクを表示する方法について詳しく解説します。 readmore.jsを使った自動「続きを読む…」表示の設定 最初に必要なライブラリとして、jquery-1.9.0.min.js と readmore.js ファイルを読み込む必要があります。 以下のコードは、指定されたコンテンツエリア(今回の例では#info)が指定の高さ(250px)を超えた場合に「続きを読む…」リンクを表示するためのJavaScriptの設定です。 <script src="jquery-1.9.0.min.js"
![「続きを読む」リンクの自動表示:readmore.jsを使った指定高さのコンテンツ制御方法|DAD UNION – エンジニア同盟](https://cdn-ak-scissors.b.st-hatena.com/image/square/b42902a191c53783880a6506d07e8ba31f9457e3/height=288;version=1;width=512/https%3A%2F%2Fdad-union.com%2Fwp-content%2Fuploads%2F2019%2F04%2Fcap20190423.jpg)