コピペ

1/2ページ

【コピペOK】1分で完成!「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメーションを実装しよう!
【コピペOK】1分で完成!「ScrollReveal.js」ライブラリを使って憧れのスクロールアニメ…

  • 2021.02.02

1分で実装できる「ScrollReveal.js」。「ScrollReveal.js」ライブラリを使ってコピペで簡単に今流行のスクロールアニメーションができるようにまとめました。サンプルもあります。

【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう。
【コピペOK】jQueryを使って数字がカウントアップするアニメーションを3ステップで簡単実装しよう…

  • 2021.02.01

数字をカウントアップするアニメーションはサイト制作で視覚的に数字を表現する時によく使われる手法です。 ■brotherのサイト 企業サイトでも数字で見る○○というページによく使われていますね! アニメーションがあ…

【コピペOK】2020年版 WordPressのチートシート〜よく使う独自関数・コードをコピペで使おう!〜
【コピペOK】2020年版 WordPressのチートシート〜よく使う独自関数・コードをコピペで使お…

  • 2020.07.27

WordPressはアップデートで大きな変更が入ったり、非推薦になったコードが出てきたりします。あれ?あのタグ使えなくなってる??って事が多々あるので最新のWordPress(WordPress 5.0系)で私がよく使う関数・コード…

【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで使おう!
【コピペOK】無料・日本語対応・商用利用可のWEBフォント「Google Fonts」を簡単コピペで…

  • 2020.07.22

かっこいいタイトルを画像じゃなくフォントで表現したい! 注目させたい見出しの書体を変えたい! サイト全体をどの環境でみても同じフォントで表現したい! そんな時に便利なのがWEBフォントです。 大丈夫!! 今…

CSS

【コピペOK】CSSだけで縦・横・斜めのストライプアニメーションをする方法
【コピペOK】CSSだけで縦・横・斜めのストライプアニメーションをする方法

  • 2020.07.12

サイトのアクセントになるCSSアニメーション。効果的に使っていきたいですね。 今回はストライプをCSSで作成し、それを文字の背景やBoxにアニメーションで表示させていきます。 ストライプの作り方 ストライプはCSS…

【コピペOK】CSSで「最初」「最後 」「何番目」「 何番目以降」など要素の順番を取得するnth-childタグまとめ
【コピペOK】CSSで「最初」「最後 」「何番目」「 何番目以降」など要素の順番を取得するnth-c…

  • 2020.07.02

CSS3で要素の場所を指定出来るnth-childの書き方をよく忘れるのでコピペで使えるようにまとめました。 互い違いに色を変えた表や一覧を作ったり、リストの最初の1件の前にmarginを入れたり、コーディング時によく…

コピペで入れるだけ!Twitterのタイムラインをキレイにする方法
コピペで入れるだけ!Twitterのタイムラインをキレイにする方法

  • 2020.06.29

twitterをしていると自分のタイムラインにいらない情報が沢山流れてきてイライラしませんか? 「〇〇さんがいいね!しました」 なこ ごっつエロい写真にいいねしてるやん…そんな一面見たくなかった 「○○さんがフォ…

【WordPress】たった1行!インストールしたディレクトリ以外の階層でワードプレスのタグを使う方法!
【WordPress】たった1行!インストールしたディレクトリ以外の階層でワードプレスのタグを使う方…

  • 2020.06.15

お知らせやニュースを管理するために WordPressをサイト内の特定ディレクトリに入れて運用してきたけど、 やっぱりTOPにもお知らせ表示したい…。 もっと言ったらTOP以外他の階層にも表示したい… そんなときにたった…

【コピペOK】吹き出しの色・文字色・装飾を変える!吹き出しパターンサンプル
【コピペOK】吹き出しの色・文字色・装飾を変える!吹き出しパターンサンプル

  • 2020.06.12

会話形式の吹き出しデザインのバリエーションを増やしたい! 無機質なんは嫌や…カラフルにたのしくするんや。 考え中の吹き出しがほしい! そんな訳で色も形も自分好みにして楽しい会話を演出する為のベースを作成…

コピペでできる動きが気持ちいいSNSボタンのCSSデザイン色々
コピペでできる動きが気持ちいいSNSボタンのCSSデザイン色々

  • 2019.09.30

最近はアニメーションで動きを出すボタンがあたりまえになってきましたね。 どうやって実装するのかがHTML・CSS・JSとサンプル表示でとってもわかりやすい 「CodePen」で公開されているSNSボタンレイアウトを見てみ…

【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集
【コピペOK】SVGやTEXTで作る楽しいテキストアニメーションのサンプル集

  • 2019.08.01

こんにちわ!ナコです。 サイトを訪れると要素が動いたり、楽しいエフェクトが発動したり、 そんなインタラクティブなサイト、憧れませんか? 今回はCODEPENで公開されているソースコードを使って楽しくアニメーシ…

CSS

HTMLとCSSで見やすい連番付きリストを作成!コピペで使えるデザインサンプル
HTMLとCSSで見やすい連番付きリストを作成!コピペで使えるデザインサンプル

  • 2019.07.31

HTMLとCSSを使った連番付きリスト(li)を作成しました。 レスポンシブサイトにも対応しております。 <ol>タグではなくcounter-incrementを使う利点はデザインや表示内容を色々編集できるところです! 前後に文…

CSS

HTMLとCSSをコピペして100種類以上のホバーエフェクトアニメーションを表示する方法
HTMLとCSSをコピペして100種類以上のホバーエフェクトアニメーションを表示する方法

  • 2019.07.21

「Hover.css」を使ってアニメーション 「Hover.css」 リンク、ボタン、ロゴ、SVG、おすすめ画像などに適用される、CSS3のアニメーション付きホバー効果のコレクションです。自分の要素に簡単に適用したり、変更した…

CSS

【コピペOK】おしゃれなオリジナル囲み枠(ボックス)デザインのCSSサンプル
【コピペOK】おしゃれなオリジナル囲み枠(ボックス)デザインのCSSサンプル

  • 2019.07.14

HTMLとCSSを使ったボックス要素の装飾(囲み枠)を作成しました。 レスポンシブサイトにも対応しております。 配色等自由に変更してカスタマイズしてください! 基本のHTML コピー <div class="frame_set&quo…

こいつ…動くぞ!会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル
こいつ…動くぞ!会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

  • 2019.07.10

ブログをみていると度々登場する会話形式の吹き出しデザイン。 ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追加したらもっと気持ちが伝わりやすい!!! そんな思…

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

  • 2019.06.27

話題になっているネタを厳選して並べたい 自分のツイートで特定のタイムラインだけ抜粋したい・・・ twitterはつぶやきの埋込APIを提供していますが、タイムライン全て、もしくは1件しか引用できないので自由自在…

HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタ…

  • 2019.06.21

会話方式で記事の導入を書きたい!! 他のブログさんで会話方式やってらっしゃるのを見て、 「やっばいやん、めちゃ読みやすいやん」と感銘を受けたナコです。 自分視点が多くなるブログで、 他人のツッコミ風に使…

CSS

【コピペOK】CSSだけで要素をくるくる回転させるアニメーションを実装するサンプル
【コピペOK】CSSだけで要素をくるくる回転させるアニメーションを実装するサンプル

  • 2019.04.17

CSSだけで要素が回転するアニメーションを作成してみましょう! コピペするだけで動く縦・横・全体の回転方法を紹介します。 CSSでは@keyframesでアニメーションのタイムラインを指定出来ます。 ここにいろいろ書く…

【レスポンシブ対応】おしゃれなページャーをCSSだけで作る!コピペ出来るデザインサンプル
【レスポンシブ対応】おしゃれなページャーをCSSだけで作る!コピペ出来るデザインサンプル

  • 2019.01.23

ブログにページャーは必須です。 WordPressのデフォルトページャーは要素が多いのでシンプルにしたい… レスポンシブで不要な要素は非表示にしたい… 前回WordPress(ワードプレス)カスタマイズ!プラグイン無しでペー…