CSS

【2021年】現役WEBデザイナーが使っているオススメのfont-familyはこれだ!!【コピペOK】
【2021年】現役WEBデザイナーが使っているオススメのfont-familyはこれだ!!【コピペO…

  • 2021.03.12

windowsもmacも古いマシンもフォローしないといけないfont-famlyの指定って悩みますよね… 2021年現在、私が現場で実際に使っている指定方法使っているフォントの解説も含めてを紹介したいと思います!

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

  • 2020.07.22

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

CSS

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

  • 2020.07.12

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

CSS

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

  • 2020.06.23

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

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

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

  • 2019.04.17

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