【JavaScript】要素をコピーするボタンの作り方

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。

「これをコピペしてください。ボタンを押すとコピー出来ます」的な。

「」こういうアイコンと一緒に表示されてたりもしますね。

通常コピーしたい部分を選択してCtr+Cのショートカットキーでコピーできますが、この動作が面倒だったり、あまり慣れていない方向けにボタンでコピー出来るようにこういった方法がとられてたりすると思います。

実装にはJavaScriptを使うので、JSに慣れない方向けに解説してみたいと思います。

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1-2.「AOS編 スクロール連動カスタムイベント」

前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ

｢AOS (Animate On Scroll)｣

について導入、実装について解説しました。

webabc.hatenablog.jp

AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回はその表示、または非表示になるタイミングにJavaScriptのイベントリスナを使用して、通常とは別の新しいカスタムイベント処理を追加する方法を解説します。

【HTML/CSS】クラスとIDの使い分け方、違い

ウェブサイトの見た目は通常、HTMLにCSSのファイルを読み込んで、タグやclassやidによる指定で装飾を施して成り立っています。

• HTMLで構造を記述
• CSSで装飾を指定

という具合。

その際に、classとidはどう違って、どう使い分けるべきなのか。

Webデザイン勉強中の方が迷うところだと思うので、解説したいと思います。

【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」

サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。

ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。

こんな感じにふわっと表示

↑今回ご紹介するのはこの動きの実装方法です。

ただ単にアニメーションさせる方法としてはCSSでも可能ですが、スクロールに合わせてとなるとJavaScriptが必須です。

そこでJavaScriptに苦手意識がある人も簡単安心なプラグインでの導入を紹介したいと思います。

【JavaScript】ユーザーエージェントでスマホとPCで処理を分岐する方法

スマホやタブレット対応といえば、CSSで画面幅に応じて要素のスタイルを変更したり上書きするメディアクエリを用いた方法が主流です。

ただ状況によってはJavaScriptでもうまくスマホ/タブレット対応する必要があります。

例えばスマホの場合は余計なファイルを読み込まないようにしたり、処理自体を別のものに置き換えたり。

スマホ表示で使わない容量の大きいファイルを読み込むのは無駄な通信になってしまいますからね。

ページ表示速度やパフォーマンス、ひいてはSEOにも影響があると思います。

【JavaScript】Swiper.jsを使ったスライダーデモ&カスタマイズ方法

前回解説したJavaScript製のスライドショープラグイン「Swiper.js」について、カスタマイズ方法をもう少し詳しく見ていきたいと思います。

カスタマイズによっては上の画像のような昔のiTunesっぽいカーバフロースタイルにも出来ます。

導入については前回記事をご参照ください。 

webabc.hatenablog.jp