- 投稿日:2020-07-24T21:32:05+09:00
cssで好きな位置に要素を配置する方法
好きな位置に要素を配置したい
要素を好きな位置に配置したけど、どうやってやるのか?
何もしない状態だと、要素同士が重ならずに配置されてしまいます。
私自身も何度もこの方法を忘れてしまうので、備忘録として書いてます!好きな位置に配置する方法
cssのpositionを使用します。
基本的には親要素に対して、位置を決めると思うので今回はその方法を記します。
positionにはstatic,relative,absolute,fixedがあります。その中で今回はabsoluteとrelativeを使用します。
親要素にrelativeを使用して、基準点を設定します。好きな位置に配置したい子要素に対してabsoluteを使用します。
これによって、親要素が基準になったので、子要素に対してtopやleftなどにより細かな位置を設定することで、好きな位置に要素を配置することができます。私自身もこのabsoluteとrelativeをどっちに設定すれば良いか、すぐ忘れてしまうので今回書かせていただきました。
備忘録としてパッパっと書いたので、画像なんか使用してなくてすみません、、
- 投稿日:2020-07-24T20:01:02+09:00
初心者によるプログラミング学習ログ 380日目
100日チャレンジの380日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
380日目は、
おはようございます
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 23, 2020
昨日の作業・やったこと⇩
●就寝前筋トレ5分、キンドル読書 10分
●ブログ1記事作成
●プログラミング学習380日目 2h
・架空LP(@ririru_123 )作成
・ボタンアニメーション実装
・メンターの課題#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ
- 投稿日:2020-07-24T17:08:48+09:00
Vue.Js リストにマウスオーバー(mouseover)すると文字が拡大され、値を取得する
VueJs初学者のちょっとした倉庫です。
簡単だけどシンプルだけど使えそうな表現を目指しています。カーソルが要素に重なると文字が拡大され、選択された値を取得する
←気が向いたらLGTMボタンぽちっとお願いします。
カーソルが要素に重なると拡大され、要素の値を取得します。
画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
追記:それっぽい犬図鑑つくりました→https://qiita.com/Itsuki_Y/items/288143a97ae2ad5224caソース
shuffle.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PickUp</title> <style> body { font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } ul { margin-left: 700px; list-style: none; } div#mainlist { color: #8EF1FF; font-size: 25px; } div#mainlist ul li:hover { list-style-type: ">"; color: #7B3CFF; font-size: 75px; } .SubTitle { margin-left: 700px; position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #67c5ff; } .SubTitle:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #67c5ff; transition: .2s; } .SubTitle:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } </style> </head> <body> <div id="app"> <h1> <div class="SubTitle">あなたの好きな犬種は??</div> <div id="mainlist"> <ul> <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name"> {{dog.name}} </li> <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img> </ul> </div> </h1> <p v-show="activeDog">selected:{{activeDog}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script> <script> var app = new Vue({ el: "#app", data: { dogs: [ {name: 'チワワ'}, {name: 'トイプードル'}, {name: 'ポメラニアン'}, {name: '柴犬'}, {name: 'ダックスフンド'}, {name: 'パグ'}, {name: 'ブルドック'}, {name: 'コーギー'}, {name: 'パピヨン'}, {name: 'マルチーズ'}, {name: 'シェパード'}, {name: 'ブルドッグ'}, {name: 'プードル'}, {name: 'ラブラドール'}, {name: 'ビーグル'}, {name: 'ゴールデンレトリバー'}, {name: 'ラブラドールレトリバー'}, {name: '秋田犬'}, ], activeDog: "" }, methods: {} }); </script> </body> </html>最後に
以上です。気が向いたらLGTMぽちっとお願いします。
- 投稿日:2020-07-24T17:08:48+09:00
Vuye.Js カーソルがリストに重なると文字が拡大され、値を取得する
VueJs初学者のちょっとした倉庫です。
簡単だけどシンプルだけど使えそうな表現を目指しています。カーソルが要素に重なると文字が拡大され、選択された値を取得する
←気が向いたらLGTMボタンぽちっとお願いします。
カーソルが要素に重なると拡大され、要素の値を取得します。
画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
shuffle.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PickUp</title> <style> body { font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } ul { margin-left: 700px; list-style: none; } div#mainlist { color: #8EF1FF; font-size: 25px; } div#mainlist ul li:hover { list-style-type: ">"; color: #7B3CFF; font-size: 75px; } .SubTitle { margin-left: 700px; position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #67c5ff; } .SubTitle:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #67c5ff; transition: .2s; } .SubTitle:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } </style> </head> <body> <div id="app"> <h1> <div class="SubTitle">あなたの好きな犬種は??</div> <div id="mainlist"> <ul> <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name"> {{dog.name}} </li> <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img> </ul> </div> </h1> <p v-show="activeDog">selected:{{activeDog}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script> <script> var app = new Vue({ el: "#app", data: { dogs: [ {name: 'チワワ'}, {name: 'トイプードル'}, {name: 'ポメラニアン'}, {name: '柴犬'}, {name: 'ダックスフンド'}, {name: 'パグ'}, {name: 'ブルドック'}, {name: 'コーギー'}, {name: 'パピヨン'}, {name: 'マルチーズ'}, {name: 'シェパード'}, {name: 'ブルドッグ'}, {name: 'プードル'}, {name: 'ラブラドール'}, {name: 'ビーグル'}, {name: 'ゴールデンレトリバー'}, {name: 'ラブラドールレトリバー'}, {name: '秋田犬'}, ], activeDog: "" }, methods: {} }); </script> </body> </html>以上です。気が向いたらLGTMぽちっとお願いします。
- 投稿日:2020-07-24T17:08:48+09:00
Vuye.Js リストにマウスオーバー(mouseover)すると文字が拡大され、値を取得する
VueJs初学者のちょっとした倉庫です。
簡単だけどシンプルだけど使えそうな表現を目指しています。カーソルが要素に重なると文字が拡大され、選択された値を取得する
←気が向いたらLGTMボタンぽちっとお願いします。
カーソルが要素に重なると拡大され、要素の値を取得します。
画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
追記:それっぽい犬図鑑つくりました→https://qiita.com/Itsuki_Y/items/288143a97ae2ad5224caソース
shuffle.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PickUp</title> <style> body { font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } ul { margin-left: 700px; list-style: none; } div#mainlist { color: #8EF1FF; font-size: 25px; } div#mainlist ul li:hover { list-style-type: ">"; color: #7B3CFF; font-size: 75px; } .SubTitle { margin-left: 700px; position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #67c5ff; } .SubTitle:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #67c5ff; transition: .2s; } .SubTitle:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } </style> </head> <body> <div id="app"> <h1> <div class="SubTitle">あなたの好きな犬種は??</div> <div id="mainlist"> <ul> <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name"> {{dog.name}} </li> <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img> </ul> </div> </h1> <p v-show="activeDog">selected:{{activeDog}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script> <script> var app = new Vue({ el: "#app", data: { dogs: [ {name: 'チワワ'}, {name: 'トイプードル'}, {name: 'ポメラニアン'}, {name: '柴犬'}, {name: 'ダックスフンド'}, {name: 'パグ'}, {name: 'ブルドック'}, {name: 'コーギー'}, {name: 'パピヨン'}, {name: 'マルチーズ'}, {name: 'シェパード'}, {name: 'ブルドッグ'}, {name: 'プードル'}, {name: 'ラブラドール'}, {name: 'ビーグル'}, {name: 'ゴールデンレトリバー'}, {name: 'ラブラドールレトリバー'}, {name: '秋田犬'}, ], activeDog: "" }, methods: {} }); </script> </body> </html>最後に
以上です。気が向いたらLGTMぽちっとお願いします。
- 投稿日:2020-07-24T17:08:48+09:00
Vuye.Js カーソルが要素に重なると文字が拡大され、値を取得する
VueJs初学者のちょっとした倉庫です。
簡単だけどシンプルだけど使えそうな表現を目指しています。カーソルが要素に重なると文字が拡大され、選択された値を取得する
←気が向いたらLGTMボタンぽちっとお願いします。
カーソルが要素に重なると拡大され、要素の値を取得します。
画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
shuffle.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PickUp</title> <style> body { font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; } ul { margin-left: 700px; list-style: none; } div#mainlist { color: #8EF1FF; font-size: 25px; } div#mainlist ul li:hover { list-style-type: ">"; color: #7B3CFF; font-size: 75px; } .SubTitle { margin-left: 700px; position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #67c5ff; } .SubTitle:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #67c5ff; transition: .2s; } .SubTitle:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } </style> </head> <body> <div id="app"> <h1> <div class="SubTitle">あなたの好きな犬種は??</div> <div id="mainlist"> <ul> <li v-for="dog in dogs" :key="dog.name" @mouseover="activeDog=dog.name"> {{dog.name}} </li> <img v-show="this.activeDog=='柴犬'" src="sibainu.png"></img> </ul> </div> </h1> <p v-show="activeDog">selected:{{activeDog}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script> <script> var app = new Vue({ el: "#app", data: { dogs: [ {name: 'チワワ'}, {name: 'トイプードル'}, {name: 'ポメラニアン'}, {name: '柴犬'}, {name: 'ダックスフンド'}, {name: 'パグ'}, {name: 'ブルドック'}, {name: 'コーギー'}, {name: 'パピヨン'}, {name: 'マルチーズ'}, {name: 'シェパード'}, {name: 'ブルドッグ'}, {name: 'プードル'}, {name: 'ラブラドール'}, {name: 'ビーグル'}, {name: 'ゴールデンレトリバー'}, {name: 'ラブラドールレトリバー'}, {name: '秋田犬'}, ], activeDog: "" }, methods: {} }); </script> </body> </html>以上です。気が向いたらLGTMぽちっとお願いします。
- 投稿日:2020-07-24T16:10:09+09:00
Vue.Js リストをランダムにゆっくり入れ替える
VueJs初学者のちょっとした倉庫です。
簡単だけどシンプルだけど使えそうな表現を目指しています。クリックでリストがゆっくり入れ替わる
←気が向いたらLGTMボタンぽちっとお願いします。
ボタン押下でリストのゆっくりと順番が変わり、上位3つの要素にcssが適用されます。
ひと段落まで作ったところでVueJsの公式のサンプルで似たようなものがあることに気が付いた。ソース
shuffle.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>shuffle</title> <style> /*要素が並び変えにかかる時間*/ .flip-list-move { transition: transform 1.5s; } ul { margin-left: 800px; list-style: none; } div#mainlist { color: #8EF1FF; font-size: 15px; } div#mainlist ul li:first-child { list-style-type: "1:"; color: #7B3CFF; font-size: 75px; } div#mainlist ul li:nth-child(2) { list-style-type: "2:"; color: #B384FF; font-size: 50px; } div#mainlist ul li:nth-child(3) { list-style-type: "3:"; color: #EAD9FF; font-size: 25px; } .btn-border-bottom { margin-left: 750px; position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #67c5ff; } .btn-border-bottom:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #67c5ff; transition: .2s; } .btn-border-bottom:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } </style> </head> <body> <div id="app"> <h1> <div class="backGround"> <div class="btn-border-bottom" v-on:click="shuffle">あなたにお勧めの犬種は??</div> <div id="mainlist"> <transition-group name="flip-list" tag="ul"> <li v-for="dog in dogs" :key="dog.name"> <p> {{dog.name}} </p> </li> </transition-group> </div> </ul> </div> </h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script> <script> var app = new Vue({ el: "#app", data: { error: "error", dogs: [ {name: 'チワワ'}, {name: 'トイプードル'}, {name: 'ポメラニアン'}, {name: '柴犬'}, {name: 'ダックスフンド'}, {name: 'パグ'}, {name: 'ブルドック'}, {name: 'コーギー'}, {name: 'パピヨン'}, {name: 'マルチーズ'}, ] }, methods: { shuffle: function (e) { this.dogs = _.shuffle(this.dogs); } } }); </script> </body> </html>最後に
以上です。気が向いたらLGTMぽちっとお願いします。
- 投稿日:2020-07-24T16:10:09+09:00
Vue.Js リストをランダムに入れ替え、動的に表示する
VueJs初学者のちょっとした倉庫です。
クリックでリストが入れ替わる
ボタン押下でリストの順番が変わり、上位3つの要素にcssが適用されます。
shuffle.html<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>shuffle</title> <style> /*要素が並び変えにかかる時間*/ .flip-list-move { transition: transform 1.5s; } ul { margin-left: 800px; list-style: none; } div#mainlist { color: #8EF1FF; font-size: 15px; } div#mainlist ul li:first-child { list-style-type: "1:"; color: #7B3CFF; font-size: 75px; } div#mainlist ul li:nth-child(2) { list-style-type: "2:"; color: #B384FF; font-size: 50px; } div#mainlist ul li:nth-child(3) { list-style-type: "3:"; color: #EAD9FF; font-size: 25px; } .btn-border-bottom { margin-left: 750px; position: relative; display: inline-block; font-weight: bold; padding: 0.25em 0; text-decoration: none; color: #67c5ff; } .btn-border-bottom:before { position: absolute; content: ''; width: 100%; height: 4px; top: 100%; left: 0; border-radius: 3px; background: #67c5ff; transition: .2s; } .btn-border-bottom:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } </style> </head> <body> <div id="app"> <h1> <div class="backGround"> <div class="btn-border-bottom" v-on:click="shuffle">あなたにお勧めの犬種は??</div> <div id="mainlist"> <transition-group name="flip-list" tag="ul"> <li v-for="dog in dogs" :key="dog.name"> <p> {{dog.name}} </p> </li> </transition-group> </div> </ul> </div> </h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script> <script> var app = new Vue({ el: "#app", data: { error: "error", dogs: [ {name: 'チワワ'}, {name: 'トイプードル'}, {name: 'ポメラニアン'}, {name: '柴犬'}, {name: 'ダックスフンド'}, {name: 'パグ'}, {name: 'ブルドック'}, {name: 'コーギー'}, {name: 'パピヨン'}, {name: 'マルチーズ'}, ] }, methods: { shuffle: function (e) { this.dogs = _.shuffle(this.dogs); } } }); </script> </body> </html>以上です。気が向いたらLGTMぽちっとお願いします。
- 投稿日:2020-07-24T15:39:21+09:00
Jquery で複数ボタンを順次点滅させる方法
HTMLのアニメーションを組み込もうとしてJqueryでいくつか調べて実施した内容を紹介します。いくつか調べたのですが、うまい具合に見つからなかったので素人ながら自作しました。
https://techfromjapan.estacionsuzuki.com/
動作イメージは、このサイトヘッダーのボタンの動作になります。
タイマーを設置しているので一定間隔でボタンが点灯していきます。index.html(略) <script src="./jquery-3.5.1.js"></script> (略) <div class="category"> <div class="icon timer"> <p>A</p> </div> <div class="icon timer"> <p>B</p> </div> <div class="icon timer"> <p>C</p> </div> <div class="icon timer"> <p>D</p> </div> <div class="icon timer"> <p>E</p> </div> <div class="icon timer"> <p>F</p> </div> <div class="icon timer"> <p>G</p> </div> </div> (略) </footer> <script src="./script.js"></script> <!-- ※Jqueryのファイルです --> </body>stylesheet.css.category{ width: 100%; height:auto; margin-top: 5px; padding-left: 0%; padding-right: 3%; } .icon { display: inline-block; text-decoration: none; color: black; background-image: linear-gradient(#FAF0E6 0%, #FF8C00 100%); transition: .4s; text-align: center; margin: 0 1px; padding:auto; width:13%; height:50px; } .icon:hover { opacity: 0.5; }script.js// jQuery $(function(){ //カテゴリボタンを点滅させるアニメーション //(1)ページの概念・初期ページを設定 var page=0; //(2)イメージの数を最後のページ数として変数化 var lastPage =parseInt($(".timer").length-1); //(3)初期ページを表示 $(".timer").eq(page).css("opacity","0.5"); //(4)ページ切換用 function changePage(){ $(".timer").css("opacity","1"); $(".timer").eq(page).css("opacity","0.5"); }; //(5)~秒間隔でイメージ切換の発火設定 var Timer; function startTimer(){ Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },3000); } //(6)~秒間隔でイメージ切換の停止設定 function stopTimer(){ clearInterval(Timer); } //(7)タイマースタート startTimer(); // トップページカテゴリのclickイベント $('.icon').click(function(){ // 自動アニメーションの停止 $('.timer').css('opacity', ''); stopTimer(); }); });
- 投稿日:2020-07-24T13:33:05+09:00
【初心者でもわかる】ネガティブマージンの使い方
どうも、7noteです。ネガティブマージンを使って親要素からはみ出す方法。
HTMLやCSSの勉強をしていると、親要素からはみ出して表現されている要素を作ったりする場面がでてきます。
こんなとき、position: absolute;を使わなくてもネガティブマージンをとることで解決できる場面もあります。今回はネガティブマージンの書き方から、実際に使える場面などを紹介していきます。
ネガティブマージンの書き方
div { margin-top: -50px; }書き方としてはmarginの値にマイナス(-)の値を設定します。これによって、親要素からはみ出した位置に要素を配置されます。
書き方の例
index.html<div class="oya"> <div class="square"></div> </div>style.css.oya { width: 500px; /* 横幅を500pxに指定 */ height: 500px; /* 高さを500pxに指定 */ border: solid 1px #000; /* 見やすいように線を引く */ } .square { width: 200px; /* 横幅を200pxに指定 */ height: 200px; /* 高さを200pxに指定 */ background: #CCF; /* 背景色に青を指定 */ margin-left: -100px; /* ネガティブマージンを指定。左に100pxずらす。 */ }このようにネガティブマージンを指定すると、親要素からはみ出すように配置されます。
例では左にネガティブマージンをとっているので左方向に要素が配置されました。ネガティブマージンが使えそうな例
・twitterのアイコン
このように上のグレーの部分に被さるようにネガティブマージンがとられています。まとめ
ネガティブマージンは場面によっては便利で活用しやすいです。
ただ、仕様を理解していないと、見えない位置に飛び出してしまったり、画面外に要素が飛び出して切れてしまったりします。
右側にはみ出してしまうと横スクロールバーが出てしまったりします。
濫用には注意!!!おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)
- 投稿日:2020-07-24T11:30:26+09:00
css設計入門メモ
この記事の目的
css設計を考え始めた人が最初のとっかかりに読む記事。
- どういう設計があるのか?
- どう設計方針を選択していくべきなのか?
あたりをまとめる
cssを書く上での規則
- idをなるべく使わない
- importantも使わない
- html側にはstyleを書かず、styleはcssに寄せる
css設計方針
css設計方針においてのポイント
htmlとcssは疎結合に
htmlとcssを別にしておかないと例えばSEO要件でh2にしないといけないけどpとstyle合わせたいといった時に困る。そのためhtmlの要素をセレクターに指定するのは避けた方が良い。
予測しやすくするためにclass名を親と子をわかるものにする
class名は名前から影響範囲が想像できるのが望ましいため、親と子をわかるようにした方が良い。例えば
.header .btnとあってbtnがheader内のものだとした時には
.header .header_btnとbtnがheader内のものとわかるようにするのが望ましい。
シングルクラス設計とマルチクラス設計
シングルクラス設計は一つのクラスですむように個別個別にクラスを設定していくもの。対してマルチクラスは汎用的にクラスを設定し、複数組み合わせる形。シングルクラスの方がhtmlは読みやすくなり、影響範囲も狭いので予期せぬバグなどは出にくいが個別に指定しているので保守性は低い。
メジャーな設計手法
OOCSS
- 下記に分けて考える
- ストラクチャー
- スキン
- 特定の範囲内での指定ではなくグローバルに指定
OOCSSの考え方はオブジェクティブ思考をcssに持ち込んだもので再利用を前提に考えられている。その際利用するものをストラクチャー、形などを指定するものとスキン、色などの装飾を指定するものに分けている。
再利用を前提に考えているので例えばmainclass内のなどの特定範囲内での指定より全体で使いまわせる指定をこのむ。
BEM
BEMは下記をclass名に一つ一つつける手法で個別にstyleを書いていくので変更時に影響範囲が小さい。
- Block・・・枠組みとなる要素のこと。セクションやコンテナをBlockとして扱うケースが多いです。
- Element・・・Blockの中に存在する子要素のこと
- Modifier・・・BlockやElementを修飾するもの。activeやlargeのように状態を管理する場合もModifierで指定するようにします
.block__element--modifier{ }みたいに
- blockの後ろの_(アンダースコア)2個
- modifierをつける場合は-(ハイフン)2個をつける
SMACSS
下記に分けてモジュール的に設計するもの。
- ベース・・・bodyなど全体に関わるものの設定。リセットCSSも入る。
- レイアウト・・・レイアウトに関わるもので接頭辞にl-をつける
- モジュール・・・レイアウト内に入るもの
- 状態(ステート)
- テーマ・・・背景色など
- 投稿日:2020-07-24T01:28:21+09:00
【現役Vueエンジニア実装】他にはない完全オリジナルのCSSスライダーアニメーション40選(解説付き)
コピペだけで作れるCSSスライダーアニメーションを40個ご紹介します。
box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています
コードには説明もわかりやすく書いてあるのでかなり参考になります
完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています
Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています
CSSスライダーアニメーション40選
1. filterとtransformで超動くCSSスライダーアニメーション4選【Web制作者必見】
filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。
↓参考記事は下の記事です↓
2. コピペだけでCSSアニメーション!ECサイトでそのまま使えるスライダーマテリアルデザイン3選
そのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
3. コピペだけ!画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン3選
画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
4. 洗練されたマテリアルデザインをコピペで!CSSスライダーアニメーション3選(ナビゲーションボタン編)
Web制作やWebアプリケーションなどで利用できるデザインになっています
↓参考記事は下の記事です↓
5. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選(コントロールボタン編)
コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています
↓参考記事は下の記事です↓
6. 【解説付き】3Dマテリアルデザインをコピペで!CSSスライダーアニメーション3選(rotate編)
実務で使えるエフェクトがついています
↓参考記事は下の記事です↓
7. 【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
それぞれに違ったfilterアニメーションがついていて面白いです
↓参考記事は下の記事です↓
8. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選【transform編】
いろいろなtransformエフェクトがついていて使い勝手がいいです
カスタマイズもしやすいのでありがたいデザインです
↓参考記事は下の記事です↓
9. コピペだけでスライダーマテリアルデザイン!CSSアニメーション3選【transform:scale編】
コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します
↓参考記事は下の記事です↓
10. スライダーマテリアルデザインをコピペで!CSSアニメーション3選【コード解説付】
CSSだけで動きのあるスライダーマテリアルデザイン3選が紹介されています
かなりスタイリッシュなデザインだからこそ使える場所が多いと思います
↓参考記事は下の記事です↓
11. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
12. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装
そのまま使えるhoverアニメーションのマテリアルデザインとなっています
美しい画像アニメーションとなっています
↓参考記事は下の記事です↓
13. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法
そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
- 投稿日:2020-07-24T01:28:21+09:00
【現役Vueエンジニア実装】Web制作で使えるオリジナルCSSスライダーアニメーション35選(解説付き)
コピペだけで作れるCSSスライダーアニメーションを35個ご紹介します。
box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています
コードには説明もわかりやすく書いてあるのでかなり参考になります
完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています
Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています
CSSスライダーアニメーション35選
1. コピペだけでCSSアニメーション!ECサイトでそのまま使えるスライダーマテリアルデザイン3選
そのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
2. コピペだけ!画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン3選
画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
3. 洗練されたマテリアルデザインをコピペで!CSSスライダーアニメーション3選(ナビゲーションボタン編)
Web制作やWebアプリケーションなどで利用できるデザインになっています
↓参考記事は下の記事です↓
4. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選(コントロールボタン編)
コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています
↓参考記事は下の記事です↓
5. 【解説付き】3Dマテリアルデザインをコピペで!CSSスライダーアニメーション3選(rotate編)
実務で使えるエフェクトがついています
↓参考記事は下の記事です↓
6. 【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
それぞれに違ったfilterアニメーションがついていて面白いです
↓参考記事は下の記事です↓
7. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選【transform編】
いろいろなtransformエフェクトがついていて使い勝手がいいです
カスタマイズもしやすいのでありがたいデザインです
↓参考記事は下の記事です↓
8. コピペだけでスライダーマテリアルデザイン!CSSアニメーション3選【transform:scale編】
コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します
↓参考記事は下の記事です↓
9. スライダーマテリアルデザインをコピペで!CSSアニメーション3選【コード解説付】
CSSだけで動きのあるスライダーマテリアルデザイン3選が紹介されています
かなりスタイリッシュなデザインだからこそ使える場所が多いと思います
↓参考記事は下の記事です↓
10. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
11. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装
そのまま使えるhoverアニメーションのマテリアルデザインとなっています
美しい画像アニメーションとなっています
↓参考記事は下の記事です↓
12. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法
そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
- 投稿日:2020-07-24T01:28:21+09:00
【現役Vueエンジニア実装】他にはない完全オリジナルのCSSスライダーアニメーション35選(解説付き)
コピペだけで作れるCSSスライダーアニメーションを35個ご紹介します。
box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています
コードには説明もわかりやすく書いてあるのでかなり参考になります
完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています
Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています
CSSスライダーアニメーション35選
1. コピペだけでCSSアニメーション!ECサイトでそのまま使えるスライダーマテリアルデザイン3選
そのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
2. コピペだけ!画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン3選
画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
3. 洗練されたマテリアルデザインをコピペで!CSSスライダーアニメーション3選(ナビゲーションボタン編)
Web制作やWebアプリケーションなどで利用できるデザインになっています
↓参考記事は下の記事です↓
4. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選(コントロールボタン編)
コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています
↓参考記事は下の記事です↓
5. 【解説付き】3Dマテリアルデザインをコピペで!CSSスライダーアニメーション3選(rotate編)
実務で使えるエフェクトがついています
↓参考記事は下の記事です↓
6. 【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
それぞれに違ったfilterアニメーションがついていて面白いです
↓参考記事は下の記事です↓
7. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選【transform編】
いろいろなtransformエフェクトがついていて使い勝手がいいです
カスタマイズもしやすいのでありがたいデザインです
↓参考記事は下の記事です↓
8. コピペだけでスライダーマテリアルデザイン!CSSアニメーション3選【transform:scale編】
コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します
↓参考記事は下の記事です↓
9. スライダーマテリアルデザインをコピペで!CSSアニメーション3選【コード解説付】
CSSだけで動きのあるスライダーマテリアルデザイン3選が紹介されています
かなりスタイリッシュなデザインだからこそ使える場所が多いと思います
↓参考記事は下の記事です↓
10. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
11. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装
そのまま使えるhoverアニメーションのマテリアルデザインとなっています
美しい画像アニメーションとなっています
↓参考記事は下の記事です↓
12. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法
そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
- 投稿日:2020-07-24T01:28:21+09:00
【現役Vueエンジニア実装】他にはない完全オリジナルのCSSスライダーアニメーション45選(解説付き)
コピペだけで作れるCSSスライダーアニメーションを45個ご紹介します。
box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています
コードには説明もわかりやすく書いてあるのでかなり参考になります
完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています
Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています
CSSスライダーアニメーション45選
1. filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション3選
filterプロパティの応用、transform:scaleの伸縮エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。
↓参考記事は下の記事です↓
2. filterとtransformで超動くCSSスライダーアニメーション4選【Web制作者必見】
filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整しtransitionで滑らかにスライドするアニメーションになります。
↓参考記事は下の記事です↓
3. コピペだけでCSSアニメーション!ECサイトでそのまま使えるスライダーマテリアルデザイン3選
そのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
4. コピペだけ!画像ボタンをクリックするとスライダー画像が入れ替わるCSSマテリアルデザイン3選
画像ボタンをクリックするとスライダー画像が入れ替わるそのまま使えるスライダーアニメーションのマテリアルデザインとなっています
transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します
↓参考記事は下の記事です↓
5. 洗練されたマテリアルデザインをコピペで!CSSスライダーアニメーション3選(ナビゲーションボタン編)
Web制作やWebアプリケーションなどで利用できるデザインになっています
↓参考記事は下の記事です↓
6. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選(コントロールボタン編)
コントロールボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています
↓参考記事は下の記事です↓
7. 【解説付き】3Dマテリアルデザインをコピペで!CSSスライダーアニメーション3選(rotate編)
実務で使えるエフェクトがついています
↓参考記事は下の記事です↓
8. 【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
それぞれに違ったfilterアニメーションがついていて面白いです
↓参考記事は下の記事です↓
9. マテリアルデザインを1分で実装!CSSスライダーアニメーション3選【transform編】
いろいろなtransformエフェクトがついていて使い勝手がいいです
カスタマイズもしやすいのでありがたいデザインです
↓参考記事は下の記事です↓
10. コピペだけでスライダーマテリアルデザイン!CSSアニメーション3選【transform:scale編】
コピペで使えるそのまま使えるtransform:scaleを使用したマテリアルデザインなのでかなり重宝します
↓参考記事は下の記事です↓
11. スライダーマテリアルデザインをコピペで!CSSアニメーション3選【コード解説付】
CSSだけで動きのあるスライダーマテリアルデザイン3選が紹介されています
かなりスタイリッシュなデザインだからこそ使える場所が多いと思います
↓参考記事は下の記事です↓
12. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
filterエフェクトを使いそのまま使えるアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
13. 【Vue/BootstrapVue/コピペだけ】白黒画像スライダーにhoverすると色がつくCSSアニメーション実装
そのまま使えるhoverアニメーションのマテリアルデザインとなっています
美しい画像アニメーションとなっています
↓参考記事は下の記事です↓
14. 【Vue初心者必見】BootstrapVueでシンプルな文字付きスライダーをコピペのみで導入する方法
そのまま使えるシンプルな文字付きスライダーアニメーションのマテリアルデザインとなっています
↓参考記事は下の記事です↓
- 投稿日:2020-07-24T01:15:19+09:00
【現役Vueエンジニアおすすめ】知って得する画像アニメーション33選(解説あり)
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション3選
動きは下の画像のような感じになります
1. 【ぼやけるアニメーション】clip path : polygon+filter : blur
2. 【美しいアニメーション】clip path : polygon+filter : grayscale contrast saturate
3. 【オーロラアニメーション】clip path : polygon+filter : grayscale saturate hue-rotate
コードを確認する
【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
動きは下の画像のような感じになります
1. hoverで画像が半透明に?超便利なスライダーアニメーション
2. hoverで画像の色が暴れ出すスライダーアニメーション
3. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
コードを確認する
絶対失敗しないナビゲーションメニューサンプル3選
動きは下の画像のような感じになります
1. シンプルだけど洗練されたスライダーアニメーション
2. blurでぼやけながらスライドするスライダーアニメーション
3. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
コードを確認する
hoverで画像の色が暴れ出す!filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
1. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
2. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
3. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
コードを確認する
CSSだけ!hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
1. 階段のように背景が現れるhoverエフェクト
2. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
3. 斜め上からスクリーンのように背景が現れるhoverエフェクト
4. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
コードを確認する
hoverとtransitionでオシャレなCSS画像エフェクト4選!(背景がスっと表示される)
動きは下の画像のような感じになります
1. フワッと背景が現れるhoverアニメーション
2. 背景が徐々に画像全体へ広がるhoverアニメーション
3. 扉が閉まるように背景が現れるhoverアニメーション
4. 丸い背景が徐々に画像全体に広がるhoverアニメーション
コードを確認する
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション3選
動きは下の画像のような感じになります
1. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
2. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
3. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
コードを確認する
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション3選
動きは下の画像のような感じになります
1. flexで2つの画像が伸縮する画像アニメーション
2. flexでhoverした画像が100%拡大する画像アニメーション
3. filterでエフェクト+flexで3つの画像が伸縮する画像アニメーション
コードを確認する
【flexboxのjustify−content:center4選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
1. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
2. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
3. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
4. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
コードを確認する
- 投稿日:2020-07-24T01:15:19+09:00
【知って得する】Vueで使える画像アニメーション33選(解説あり)
こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション3選
動きは下の画像のような感じになります
1. 【ぼやけるアニメーション】clip path : polygon+filter : blur
2. 【美しいアニメーション】clip path : polygon+filter : grayscale contrast saturate
3. 【オーロラアニメーション】clip path : polygon+filter : grayscale saturate hue-rotate
コードを確認する
【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
動きは下の画像のような感じになります
1. hoverで画像が半透明に?超便利なスライダーアニメーション
2. hoverで画像の色が暴れ出すスライダーアニメーション
3. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
コードを確認する
絶対失敗しないナビゲーションメニューサンプル3選
動きは下の画像のような感じになります
1. シンプルだけど洗練されたスライダーアニメーション
2. blurでぼやけながらスライドするスライダーアニメーション
3. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
コードを確認する
hoverで画像の色が暴れ出す!filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
1. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
2. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
3. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
コードを確認する
CSSだけ!hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
1. 階段のように背景が現れるhoverエフェクト
2. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
3. 斜め上からスクリーンのように背景が現れるhoverエフェクト
4. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
コードを確認する
hoverとtransitionでオシャレなCSS画像エフェクト4選!(背景がスっと表示される)
動きは下の画像のような感じになります
1. フワッと背景が現れるhoverアニメーション
2. 背景が徐々に画像全体へ広がるhoverアニメーション
3. 扉が閉まるように背景が現れるhoverアニメーション
4. 丸い背景が徐々に画像全体に広がるhoverアニメーション
コードを確認する
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション3選
動きは下の画像のような感じになります
1. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
2. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
3. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
コードを確認する
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション3選
動きは下の画像のような感じになります
1. flexで2つの画像が伸縮する画像アニメーション
2. flexでhoverした画像が100%拡大する画像アニメーション
3. filterでエフェクト+flexで3つの画像が伸縮する画像アニメーション
コードを確認する
【flexboxのjustify−content:center4選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります
1. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
2. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
3. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
4. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置
コードを確認する
- 投稿日:2020-07-24T00:14:49+09:00
画像ポップアップ
画像ポップアップ実装
参考記事
index.html<body> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/light box.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascr ipt"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/light. box.min.js" type="text/javascript"></script> </body>body内に記述
index.html<a href="sakura.jpg" data-lightbox="abc" data-title="桜写真拡大"> <img src="sakura-thumbnail.jpg" alt="桜写真"> </a>data-title="○○○" は省略可能。拡大時に表示されるタイトル。
サムネイル画像 src="sakura-thumbnail.jpg"(img要素)
拡大時の画像 href="sakura.jpg"(a要素)data-lightbox="abc" は属性。abc(グループ名)は必須!!ないとうまく表示しなかった。
複数画像がある場合、全て同じ属性名にしておけば、グルーピングできる