投稿日：2020-07-31T23:39:00+09:00

CSSで三角形をサクッと作れるジェネレーターまとめ

0から書き出すとそれなりに時間が取られる三角形。主に吹き出しなどに使う機会が多いと思います。そんな時にパッと使える三角形ジェネレーターまとめです。

吹き出しジェネレーター

border付きの吹き出しジェネレーターです。
beforeとafterを重ねて表現しているベーシックな形です。

http://www.cssarrowplease.com/

CSS三角形作成ツール

とてもシンプルで、とりあえず三角形を作ってから調整したい場合はコレです。

http://apps.eky.hk/css-triangle-generator/ja

CSS Triangle Generator

CSS三角形作成ツールと記述方法は変わらず、ちょっとお洒落な雰囲気なので使いやすいです。

https://triangle.designyourcode.io/

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T20:09:29+09:00

初心者によるプログラミング学習ログ 387日目

100日チャレンジの387日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
387日目は、

おはようございます
昨日の作業⇩

●キンドル読書 10分
●プログラミング学習387日目 2h
・メンターの課題
・背景画像の位置調整#駆け出しエンジニアとつながりたい #100DaysOfCode #早起きチャレンジ
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 30, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T16:52:41+09:00

読みやすく、簡略化されたコードを作る（HTML,CSS）

本記事は主にフロントエンド始めたての方向けになると思います。
自分自身フロントを始めて、2か月程度でまだまだ改善するところがあります。
今回デザインからコーディングする際のお話です。

これを書こうと思ったきっかけ

理由は簡単で、HTML,CSSで使うクラス名の書き方に統一性がなく、コードも長かった為、色々な問題が起きたためです。
CSSのプロパティもある程度使いこなせていた為、その頃はとにかく早く作ろうと思い、コードの見やすさはあまり重要視せずにやってたと思います。

起きた問題

・チームで作業する際、他の方が修正やコード追加するのが大変
・自分でも後から見直して、どこを修正していいか分からなくなる、修正に時間がかかる
・とにかく余計な時間がかかる

原因

・HTML,CSSの設計でBEMを使うことになっていたが、正しく使えていなかった
・CSSで共通化を意識せず、一つ一つの要素をゼロから作成していた

※BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。
https://tech-dig.jp/bem-css-html/

改善・意識したこと

・見た目からCSSで共通化できるところを探し、なるべくゼロから作らないようにする。

例としてwebサイトをコーディングする際、↓のようなレイアウトがよくあると思います。
https://www.dentsusciencejam.com/
このコンテンツ内に様々なセクションがあり、ページ検証を行うと分かりますが、セクションごとのタイトル、本文、配置など同じクラスが使われており、多少違うものは、その要素にクラスを追加して上書きするような形になっています。

・クラス名などBEMを正しく使い、Sassの記述も見やすくする
まずは↓のように、使う命名を整理する。
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

結果

・コード量が非常に減った
　とある案件でのコーディングで、TOPページだけでも意識前後で半分以下になったと思います
・HTML、SASS（CSS)が見やすくなった
　何が、どういう要素かが一目で分かる（↓一例ですが、BEMは破綻しないように意識）
あるTOPページの業務内容セクション（例）
<section class="content-section service">
  <div class="content-section__inner">
    <div class="content-section__head">
      <div class="content-section__logo">
      </div>
      <h2 class="content-section__title">
        <div class="content-section__title--eng">SERVICE</div>
        <div class="content-section__title--jp">業務内容</div>
      </h2>
    </div>
    <div class="content-section__body">
      <article class="card">
        <div class="card__image"></div>
        <h2 class="card__title">業務内容（例）</h2>
        <div class="card__body">
          <div class="card__body--top">テスト本文</div>
          <div class="card__body--center">テスト本文</div>
          <div class="card__body--foot category">
            <div class="category__item">カテゴリーA</div>
            <div class="category__item">カテゴリーB</div>
            <div class="category__item">カテゴリーC</div>
            <div class="category__item">カテゴリーD</div>
          </div>
          <div class="card__body--link">
            <a href="#" class="arrow">詳しくみる</a>
          </div>
        </div>
      </article>
Sass(css)もBEMを正しく使えばこのようにまとめられます
//コンテンツ(共通)例
.content-section
  &__inner
    max-width: 1110px
    margin: 0 auto
  &__head
    display: flex
    justify-content: flex-start
  &__logo
    width: 60px
    height: 60px
  &__title
    margin-left: 15px
    &--eng
      color: #3E3838
      font-size: 38px
      font-weight: bold
    &--jp
      font-size: 20px
      font-weight: bold
  &__body
    font-weight: 500
    letter-spacing: 2px
    margin-top: 50px
    color: #FFFFFF
まとめ

デザインどうりに反映していく事に意識がいき、コードの見やすさなど後回しになることがあると思いますが

Webサイトは修正、変更追加、メンテナンス作業など定期的に入ってきますので、チームで作業する際は、

他の方が見てもすぐに分かるように特に意識した方が良いと思います。

自分自身もっと良い書き方、まとめ方を取り入れていきたいと思ってます。

参考サイト

CSSのクラス名を決めるときに使うリストをつくりました
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
HTML・CSSの設計にBEMを取り入れてみよう！
https://tech-dig.jp/bem-css-html/

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T12:37:44+09:00

【IE対応】Google Material Iconsをdata 属性を使ってスマートに表示する

Google Material IconsをIE対応して使うには？

方法1： HTMLで直接書く
<i class="material-icons">email</i>
一番簡単な方法ですが、問題が1つあります。
グーグルの検索結果に表示されるようなタイトルやメニュー部分にこの方法でアイコンを設置してしまうと、emailお問い合わせフォームのような形でアイコンのコードが
テキストとして一緒に表示されてしまいます。

方法2： CSSで旧文字コードを使って書く

Google Material IconsをCSSで表示することができます。
公式サイトの「email」などのコードをcontentに入れることで使えますが、IEでは
以前の文字コードじゃないと表示されません。。
.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: "\e0be"; //IE以外は「email」でOK
}
ただ、この方法だとアイコン毎にCSSを書かなければいけないためかなり面倒です。

HTMLだけで擬似要素として表示させる

CSSで表示できれば何も問題ないので、<i class="material-icons">email</i>のようにHTMLで完結した上で、擬似要素として表示する方法をまとめました。

ベースのHTML・CSSを用意
.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: attr(data-icon);
}
<i class="material-icon" data-icon="文字コード"></i>
data-iconに入れたコードがcontent:にはいるようになります。
ベースができたので、アイコンを表示するために以下の手順で文字コードを用意します。

1. 使いたいアイコンを選ぶ

今回は公式サイトから「email」を選びます

2. 文字コードを調べる

「email」で検索して「e0be」の文字コードを取得
文字コード一覧：GitHub

3. 10進数に変換する

data-icon="\e0be"で表示されて欲しいところですが、これだと表示されません。
「\」を「&#」にした上で、e0beを10進数にすることで表示されます。

変換ツール


できた
<i class="material-icon" data-icon="&#57534;"></i>メールでお問い合わせ
これで検索結果のテキスト表示も無く、アイコンの追加はHTMLだけでできるようになりました。文字コードを探して変換する手間はありますが、CSSで毎回設定するよりは楽になります。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T12:11:52+09:00

【Bootstrap4】d-flexも使おう、row / colだけがレスポンシブを表現するわけじゃない

Bootstrap4を利用していたときの気づきをご紹介します。

こういうデザインにしたいときがある
PC版
[ あなたのお名前：marshmallow88             ▶変更する ]

SP版
[  あなたのお名前：           ]
[  marshmallow88            ]
[                  ▶変更する ]
仕様の確認をしてしましょう。
上記は以下の要素に分かれています。

あなたのお名前

名前

変更する

そして仕様は以下のようになります。

PC版では、あなたのお名前 + 名前 が左寄せ、変更するは右寄せ

SP版では、あなたのお名前、名前、変更するがともに改行され、かつ変更するは右寄せ

Bootstrap4を利用して、row + col を利用して書いてみると...？

cssがそこまで得意ではないので、やはりよく頼るのがCSSフレームワーク、Bootstrapはその代表格です。
ではBootstrapを使って、row + colのクラスを利用して書いてみましょう。仕様どおりに作成できるでしょうか...？
<div class="row">
    <div class="col-md text-danger">
        あなたのお名前：
    </div>
    <div class="col-md font-weight-bold">
        marshmallow88
    </div>
    <div class="col-md text-right">
        ▶変更する
    </div>
</div>
まず仕様2に関して満たせるようになります。col-mdを指定しているので、SP版の場合はブレイクポイントの範囲外となるため、flex-basisやflex-growなどのスタイルが付与されないため、それぞれブロックが積み上がる状態で表示がされます。

では次に仕様1についてはどうでしょうか。実はここで問題が発生します。col-** 関係はそれぞれ両端にpaddingを取るため、[あなたのお名前:＿名前]のような空白が発生しています。ではどうするのか。

d-flex + flex-column + flex-md-row を利用して表現する

d-flexは知っていて、なるほどdisplay:flex;にする程度のものだと思っていたのですが、それ以外にもflex-columnやflex-md-rowを併記することで、仕様を実現することができます。
<div class="d-flex flex-column flex-md-row">
    <div class="text-danger">
        あなたのお名前：
    </div>
    <div class="font-weight-bold">
        marshmallow88
    </div>
    <div class="flex-md-fill">
        ▶変更する
    </div>
</div>
flex-column はflex-directionをcolumnに、つまり縦方向に並べます。そして、flex-md-rowはmdのブレイクポイントの対象となる場合に、flex-directionをrowにします。つまり普通のflexによる横並びが実現されます。

上から順に、

display: flex; に変更

flex-direction: column; に変更

mdのブレイクポイントの対象となる場合は、flex-direction: row;に変更（※メディアクエリで指定されています）

という仕組みでレスポンシブを実現しています。

flexだけ知っているだけじゃなく、flex-directionも知ろう

flexは雰囲気で書いていたけれど、原理の解説記事を起こすと、改めてflexのことを知らないのだなあと思いました。特定のサイズのみに対応するのであれば横並べのためにflexを使い、縦並びにはdivで積む、といったことで対応できます。ですが、様々なデバイスサイズに対応したものを作成するとなったときに、やはりflex-directionの知識も知っておくとよいなと思いました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T11:23:38+09:00

inline、block、inline-blockの違いを毎回忘れる

基礎中の基礎にもかかわらず毎回忘れてイライラするのでメモ

inline

横並びになるよ
縦横(width,height)は無視されるよ
中央揃えには親要素にtext-alineをつけるよ

block

改行されるよ
縦横が反映されるよ
中央揃えにはmarginで左右をauto指定するよ(widthの値が設定されている必要がある)

inline-block

横並びになるよ
縦横が反映されるよ
中央揃えには親要素にtext-alineをつけるよ

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T11:23:38+09:00

inline、block、inline-block達

ちょっと忘れてたのでメモ

inline

横並びになるよ
縦横(width,height)は無視されるよ
中央揃えには親要素にtext-alineをつけるよ

block

改行されるよ
縦横が反映されるよ
中央揃えにはmarginで左右をauto指定するよ(widthの値が設定されている必要がある)

inline-block

横並びになるよ
縦横が反映されるよ
中央揃えには親要素にtext-alineをつけるよ

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:47:25+09:00

【Vueですぐに使える】CSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

動きは下の画像のような感じになります

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する



【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する



【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

２. flexでhoverした画像が100％拡大する画像アニメーション

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

コードを確認する



【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

コードを確認する



【Web制作に最適】背景を重ねるCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する



【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する



マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

動きは下の画像のような感じになります

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する



transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

動きは下の画像のような感じになります

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:47:25+09:00

【初心者はまず見て】Vueでもすぐに使えるCSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

動きは下の画像のような感じになります

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する



【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する



【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

２. flexでhoverした画像が100％拡大する画像アニメーション

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

コードを確認する



【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

コードを確認する



【Web制作に最適】背景を重ねるCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する



【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する



マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

動きは下の画像のような感じになります

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する



transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

動きは下の画像のような感じになります

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:47:25+09:00

【初心者はまず見て】Vueですぐに使えるCSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

動きは下の画像のような感じになります

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する



【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する



【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

２. flexでhoverした画像が100％拡大する画像アニメーション

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

コードを確認する



【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

コードを確認する



【Web制作に最適】背景を重ねるCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する



【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する



マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

動きは下の画像のような感じになります

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する



transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

動きは下の画像のような感じになります

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:33:44+09:00

【CSSの本気見せます】世界に一つしかない完全オリジナルのCSSアニメーション５５選（現役Vueエンジニア実装）

コピペだけで作れるCSSスライダーアニメーションを５５個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSスライダーアニメーション５５選

１. 複数のtransform×transitionでつくるCSSスライダーアニメーション３選【未経験でもOK】

filterプロパティの応用、transform:translateの移動エフェクト、skewの傾斜エフェクト、scaleの拡大エフェクト、rotateの回転エフェクトで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

２. transform:translate&skewで絵画のスライドショーを実現！CSSスライダーアニメーション３選

。filterプロパティの応用、transform:translateの移動エフェクトとskewの傾斜エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

３. transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

filterプロパティの応用、transform:translateの移動エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

４. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

５. filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

６. コピペだけでCSSアニメーション！ECサイトでそのまま使えるスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

７. コピペだけ！画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン３選

画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

８. 洗練されたマテリアルデザインをコピペで！CSSスライダーアニメーション３選（ナビゲーションボタン編）

Web制作やWebアプリケーションなどで利用できるデザインになっています

↓参考記事は下の記事です↓

９. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選（コントロールボタン編）

コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

１０. 【解説付き】3Dマテリアルデザインをコピペで！CSSスライダーアニメーション３選（rotate編）

実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

１１. 【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

それぞれに違ったfilterアニメーションがついていて面白いです

↓参考記事は下の記事です↓

１２. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

いろいろなtransformエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

１３. コピペだけでスライダーマテリアルデザイン！CSSアニメーション３選【transform:scale編】

コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

１４. スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】

CSSだけで動きのあるスライダーマテリアルデザイン３選が紹介されています

かなりスタイリッシュなデザインだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１５. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選

filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１６. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装

そのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１７. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法

そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-31T00:33:44+09:00

【非エンジニアとは言わせない】世界に一つしかない完全オリジナルのCSSアニメーション５５選（現役Vueエンジニア実装）

コピペだけで作れるCSSスライダーアニメーションを５５個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSスライダーアニメーション５５選

１. 複数のtransform×transitionでつくるCSSスライダーアニメーション３選【未経験でもOK】

filterプロパティの応用、transform:translateの移動エフェクト、skewの傾斜エフェクト、scaleの拡大エフェクト、rotateの回転エフェクトで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

２. transform:translate&skewで絵画のスライドショーを実現！CSSスライダーアニメーション３選

。filterプロパティの応用、transform:translateの移動エフェクトとskewの傾斜エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

３. transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選

filterプロパティの応用、transform:translateの移動エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

４. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選

filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

５. filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。

↓参考記事は下の記事です↓

６. コピペだけでCSSアニメーション！ECサイトでそのまま使えるスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

７. コピペだけ！画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン３選

画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

８. 洗練されたマテリアルデザインをコピペで！CSSスライダーアニメーション３選（ナビゲーションボタン編）

Web制作やWebアプリケーションなどで利用できるデザインになっています

↓参考記事は下の記事です↓

９. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選（コントロールボタン編）

コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

↓参考記事は下の記事です↓

１０. 【解説付き】3Dマテリアルデザインをコピペで！CSSスライダーアニメーション３選（rotate編）

実務で使えるエフェクトがついています

↓参考記事は下の記事です↓

１１. 【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

それぞれに違ったfilterアニメーションがついていて面白いです

↓参考記事は下の記事です↓

１２. マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

いろいろなtransformエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

↓参考記事は下の記事です↓

１３. コピペだけでスライダーマテリアルデザイン！CSSアニメーション３選【transform:scale編】

コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します

↓参考記事は下の記事です↓

１４. スライダーマテリアルデザインをコピペで！CSSアニメーション３選【コード解説付】

CSSだけで動きのあるスライダーマテリアルデザイン３選が紹介されています

かなりスタイリッシュなデザインだからこそ使える場所が多いと思います

↓参考記事は下の記事です↓

１５. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選

filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

１６. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装

そのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

１７. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法

そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

　 Tweet
Qiitaで続きを読む

20200731のCSSに関する記事は12件です。

CSSで三角形をサクッと作れるジェネレーターまとめ

吹き出しジェネレーター

CSS三角形作成ツール

CSS Triangle Generator

初心者によるプログラミング学習ログ 387日目

100日チャレンジの387日目

読みやすく、簡略化されたコードを作る（HTML,CSS）

これを書こうと思ったきっかけ

起きた問題

原因

改善・意識したこと

結果

まとめ

参考サイト

【IE対応】Google Material Iconsをdata 属性を使ってスマートに表示する

Google Material IconsをIE対応して使うには？

方法1： HTMLで直接書く

方法2： CSSで旧文字コードを使って書く

HTMLだけで擬似要素として表示させる

ベースのHTML・CSSを用意

1. 使いたいアイコンを選ぶ

2. 文字コードを調べる

3. 10進数に変換する

できた

【Bootstrap4】d-flexも使おう、row / colだけがレスポンシブを表現するわけじゃない

こういうデザインにしたいときがある

Bootstrap4を利用して、row + col を利用して書いてみると...？

d-flex + flex-column + flex-md-row を利用して表現する

flexだけ知っているだけじゃなく、flex-directionも知ろう

inline、block、inline-blockの違いを毎回忘れる

inline

block

inline-block

inline、block、inline-block達

inline

block

inline-block

【Vueですぐに使える】CSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

コードを確認する

【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

コードを確認する

【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

１. flexで２つの画像が伸縮する画像アニメーション

２. flexでhoverした画像が100％拡大する画像アニメーション

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

コードを確認する

【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

コードを確認する

【Web制作に最適】背景を重ねるCSS画像アニメーション４選

１. 半分の背景が左右から現れるCSS画像アニメーション

２. 背景が両斜めから現れるCSS画像アニメーション

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

４. 半分の背景が上下から現れるCSS画像アニメーション

コードを確認する

【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

２. 右端から背景がスーッと表示されるCSS画像アニメーション

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

４. 下から背景がスーッと現れるCSS画像アニメーション

コードを確認する

マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション ４選

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

コードを確認する

transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選

マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション４選