HOMEJavaScript【JavaScript】グラデーションで隠して「もっと見る」で開閉するコンテンツ【JavaScript】グラデーションで隠して「もっと見る」で開閉するコンテンツ2022.01.28JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptでもっと見るのコンテンツをグラデーションで隠して表示する方法をご紹介しています。コンテンツをグラデーションで隠して「もっと見る」のボタンで開閉させるにはどうすればいいんだろう?上記の疑問にお答えします。本記事で作成するものもっと見るをクリックすると、グラデーションで隠れているコンテンツを開閉して表示します。下記に動作確認用のデモを用意しましたので、ボタンをクリックして開閉する動きを確かめてみてください。CodePen.本記事では、開閉するコンテンツをテーマにしているため、開いた後に閉じる動作を組み込んでいます。開くだけで良い場合は、もっと見るボタンをクリックした後にボタンの要素自体をremoveなどで削除するなどしてご利用ください。HTMLでレイアウトを作成するHTMLでレイアウトから作成していきます。moreを1つのブロックとし、子要素にコンテンツとボタンを持たせるように記述します。レイアウトは好みの方法で組んでいただいて構わないですが、本記事では下記でご紹介する内容でスタイルやスクリプトを組んでいますので、その点ご了承ください。class="more__btn">もっと見る</button></div>続いて作成したHTMLレイアウトにスタイルを定義します。CSSでスタイルを定義するコンテンツが開く前(コンテンツが透明と白のグラデーションで隠れている状態)と、開いた後(コンテンツの全体が表示されて透明と白のグラデーションが非表示になっている状態)のスタイルを定義します。開く前のコンテンツには固定値で高さを設定します。開いた後はスクリプト側で実際のコンテンツの高さを設定するように後ほど処理を組んでいきます。コンテンツが開いた後にグラデーションは必要ないので、擬似要素の透明度を0にし、重なり順が下になるようにopenクラスにスタイルを定義しておきます。openクラスは、コンテンツが開いたときにmore__contentに追加するクラスになります。}}続いてJavaScriptでもっと見るをクリックした後の処理を組んでいきます。JavaScriptJavaScriptでもっと見るのコンテンツが開閉する処理を組んでいきます。処理内容はコメントに記載していますので、参考にしていただければと思います。});});ここまでご紹介した内容を実装すると、冒頭でご紹介したデモの内容が完成します。最後にもっと見るは、そのまま表示するには情報過多のものであったり、全体のバランスが悪くなるコンテンツ等を読み込み時に一部的に非表示にしておく際に使用するテクニックです。制作者目線では、もっと見るを採用することでデザインに沿ったバランスの良いページに仕上げることができるため、色々なサイトで実装されています。ユーザーによってはストレスを感じる方が一定数いらっしゃいますので、メリット・デメリットを天秤にかけて導入を検討していただければと思います。以上、JavaScriptで、グラデーションで隠して「もっと見る」で開閉するコンテンツを実装する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。