CSS

CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法
CSSでanimation指定したSVGアニメーションをスクロールで画面内に入った時に動かす方法

  • 2020.08.06

CSSのアニメーションで動かしたSGVアニメーションをスクロール連動させてみました! 複数ページにも対応しています。 今回の困った問題点 SVGをアニメーションする時に各パーツにクラスを作成しアニメーションさせ…

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を入れたり、コーディング時によく…

CSS

吹き出しやフローチャートで使える!CSSだけで三角形を作るジェネレーター5選
吹き出しやフローチャートで使える!CSSだけで三角形を作るジェネレーター5選

  • 2020.06.23

CSSで三角形を作るにはbodrerタグを使うのですが、数値を変えて微妙なニュアンスを作っていくのがめんどくさいときがありませんか? そんなときに役立つ、吹き出しやフローチャートで使える三角形を見た目を確認し…

【コピペ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(ワードプレス)カスタマイズ!プラグイン無しでペー…

WordPress(ワードプレス)で「highlight.js」を使って<pre><code>タグをCSSで見やすくデザイン変更しよう
WordPress(ワードプレス)で「highlight.js」を使って<pre><…

  • 2018.07.13

Crayon Syntax Highlighterは便利だけどもっと違うレイアウトにしたい!軽くしたい! Crayon Syntax Highlighter ということでWeb用のシンタックスハイライトhighlight.jsを使ってCSSカスタマイズしました。 公式サ…