ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
PREMIUM
CSSでハートアイコンを作ろう
CSSアニメーションを使ってハートアイコンを作る方法についてみていきます。
0%
動画レッスン一覧
(7)
質問と回答
(11)
未完了
#01 ハートのアニメーションを作ろう
(02:51)
無料公開中
概要の説明
index.htmlの作成
styles.cssの作成
未完了
#02 マテリアルアイコンを使ってみよう
(02:51)
無料公開中
マテリアルアイコンの導入
favoriteアイコンの作成
未完了
#03 checkboxを使ってマークアップしよう
(02:24)
checkboxの作成
:checkedのスタイル
未完了
#04 animationの設定をしよう
(01:56)
@keyframes
animation-name
animation-duration
animation-fill-mode
未完了
#05 波紋のアニメーションを作ろう
(02:40)
div要素の設置
波紋アニメーションの設定
未完了
#06 ハートと波紋を重ねよう
(02:54)
flexboxの設定
position: absoluteの設定
未完了
#07 ハートアニメーションを完成させよう
(02:55)
width, heightの設定
inline-flexに変更
transitionの設定
positionの設定
#02 マテリアルアイコンを使ってみよう
マテリアルアイコンのサイズが変わりません
2022年1月27日
#03 checkboxを使ってマークアップしよう
label タグで囲むことで子要素と紐付くのは checkbox と radio ぐらいでしょうか?
2022年1月27日
iタグとspanタグはどちらでも良いのでしょうか
2022年1月27日
ハートの表示が赤くならない
2022年1月27日
[ ] と ~ の使い方がわかりません
2022年1月27日
#05 波紋のアニメーションを作ろう
rippleのアニメーションが作動しません...
2022年1月27日
#06 ハートと波紋を重ねよう
インライン要素に display: flex; と指定したらブロック要素になるのでしょうか?
2022年1月27日
flexとflexboxの違いは何ですか?
2022年1月27日
rippleを絶対配置するとlabelの高さが低くなるのはなぜですか?
2022年1月27日
絶対配置で要素が重なる理由がわかりません
2022年1月27日
#07 ハートアニメーションを完成させよう
inline-flexはどういう指定ですか?
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2020年8月7日
バージョン情報
Chrome 84 / Visual Studio Code 1.47.3
関連キーワード
(5)
基礎講座
(369)
初心者向け
(368)
HTML
(115)
CSS
(116)
ミニプログラム
(142)
このレッスンを共有する