どうも7noteです。空中にふわふわ浮いてるような感じを出すCSS まるで浮いてるような風に見せるCSSです。 画面内にアニメーションを入れることで、視線を誘導しやすくなります。 ソース index.html <div class="floating"><img src="heart.png" alt=""></div> style.css .floating { display: inline-block; /* 影をつけるためにinline-block要素にする */ position: relative; /* 基準位置とする */ } .floating::before { content: ''; /* 疑似要素に必須 */ background: rgba(0, 0, 0, .3); /* 半透明の黒を指定 */ border-radius: 50%; /* 円形にする */ display: inline-block; /* インラインブロック要素にする */ position: absolute; /* 相対位置にする */ bottom: -35%; /* 下に35%の位置に設置 */ left: 50%; /* 左から50%の位置に設置 */ transform: translateX(-50%); /* 左右中央にするために要素の半分ぶんだけ左に戻す */ animation: move-y-shadow .5s infinite alternate ease-in-out; /* アニメーション「move-y-shadow」 */ } .floating img { animation: move-y .5s infinite alternate ease-in-out; /* アニメーション「move-y」 */ } /* 上下を繰り返すアニメーション */ @keyframes move-y { from { transform: translateY(0); } to { transform: translateY(10px); } } /* 影の大きさをかえるアニメーション */ @keyframes move-y-shadow { from { width: 57%; height: 25%; } to { width: 50%; height: 20%; } } 解説 まずはふわふわと上下に動かすためにアニメーションで上下移動を作ります。 その後、横長の円形の陰を作り、これも上下のアニメーションと動きを連動させて大きさを少し変えることで、実際に上下している感じを再現できます。 まとめ ボタンなど、クリックが必要な場所だと押しにくいので、動いていても問題ない要素を浮かせましょう！ WEBは2D（平面）で表現されるので、3D(立体)っぽく見せる表現は良い違和感が出せるのでポイントポイントで使えるといいかなと思います。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

環境情報 Nuxt: 2.15.6 sass: 1.32.13 経緯 nuxtでsassのバージョンアップしたらSCSSで警告が出るようになってしまった。 警告文 You probably don't mean to use the color value white in interpolation here. It may end up represented as white, which will likely produce invalid CSS. Always quote color names when using them as strings or map keys (for example, "white"). If you really want to use the color value here, use '"" + $name'. 修正前ソースコード よく見かける変数を用いたカラーごとのcssスタイルの定義だが、このソースコードの記述方法が良くないと警告が発生している模様。 $color-white: #ffffff; $color-grey: #f5f5f5; $colors: ( grey: ( background-color: #{$color-grey}, ), white: ( background-color: #{$color-white}, ), ); @each $name, $color in $colors { .button-#{$name} { background-color: map-get($color, background-color); } } 修正前ソースコード 修正点は1箇所で、変数で利用しているkeyをダブルクォーテーションで囲む必要がある。 $color-white: #ffffff; $color-grey: #f5f5f5; // keyのgrey, whiteに対してダブルクォーテーションで囲む必要がある！ $colors: ( "grey": ( background-color: #{$color-grey}, ), "white": ( background-color: #{$color-white}, ), ); // ここは修正なし @each $name, $color in $colors { .button-#{$name} { background-color: map-get($color, background-color); } } 参考 最後に 警告は無視せずに必ずチェックしましょう！

法人であれ個人事業主であれ、他社との取引においては帳票生成が欠かせません。その度にわざわざExcelを開いて方眼紙を作って、、、なんてことはエンジニアたるものやりたくないですよね。そこで、単一のjsonファイルから見積書・納品書・請求書を一括生成できるツールを作ってみることにしました。 デモサイト https://studio-mizutama.github.io/Quotation/ リポジトリ https://github.com/studio-mizutama/Quotation 心掛けたこと ビルド不要で動く サクッと作ってサクッと動かすことを目標にしたため、フレームワークやAltJSは使わずに素のJavaScriptだけで開発しました。 再利用可能 自社の情報をconfig/config.jsにまとめることで、他の人も再利用しやすいアプリになるように作りました。 config/config.js const company = { "name": "<Your company name>", "zipCode": "", "address": "", "tel": "", "logoPath": "./images/logo.svg", "sealPath": "./images/seal.svg", "bank": "＊＊銀行", "branch": "＊＊支店", "typeOfAccount": "普通", "accountNumber": "111-1111111", "accountHolder": "" }; export default company; テキストベースでデータを管理 テキストベース（今回はjsonファイル）でデータを管理することで、git等を使ってバージョン管理がしやすくなります。脱Excelの一番大きなメリットです。 jsonファイルフォーマット { "details": [ { "description": "項目1", "quantity": 1, "unit": "式", "price": 30000 }, { "description": "項目2", "quantity": 5, "unit": "式", "price": 10000 } ], "client": { "name": "株式会社クライアント", "title": "Webサイト構築" }, "dateAndNumbers": { "no": "2021-05-30-01", "quotationDate": "2021-05-30", "validUntil": "2021-06-10", "deliveryDue": "2021-06-30", "paymentMethod": "月末締め翌月末払い", "deliveryDate": "2021-06-30", "invoiceDate": "2021-06-30", "paymentDue": "2021-07-31" } } 技術的知見 ドラッグ＆ドロップでファイル読み込み ダイアログから選択だけでなく、ドラッグ＆ドロップでもファイルを読み込めるように実装しました。 index.html <h1 id="h1">jsonファイルを選択してください。</h1> <input type="file" id="input-file" accept="application/json"> main.js /** * @param {number} 1: 見積書 2:納品書 3:請求書 */ let type = 1; /** * @param {boolean} */ let display = false; const input = document.getElementById("input-file"); input.addEventListener("change", function() { result = input.files; main(result,type); }); document.addEventListener("DOMContentLoaded",() => { const dropArea = document.getElementById("drop-area"); dropArea.addEventListener("dragover",(e) => { e.preventDefault(); dropArea.classList.add("drag"); }); dropArea.addEventListener("dragleave",() => { dropArea.classList.remove("drag"); }); dropArea.addEventListener("drop",(e) => { e.preventDefault(); dropArea.classList.remove("drag"); result = e.dataTransfer.files; main(result,type); }); }); /** * メイン処理を実行する関数 * @param {FileList} result * @param {number} type */ const main = function(result,type){ display = true; const reader = new FileReader(); reader.readAsText(result[0]); reader.addEventListener("load", function() { const json = JSON.parse(reader.result); //略 input.style.display = "none"; }); } 印刷と同じ表示でプレビュー 印刷プレビューとほぼ同じ見た目で画面表示できるようにCSSを書きました。 index.html <div class="sheet" id="drop-area"> <div class="margin-container"></div> </div> style.css @page { size: A4; margin: 0; } @media print { body { width: 210mm; } html, body { height: 100vh; margin: 0 !important; padding: 0 !important; overflow: hidden; } } .sheet { width: 210mm; height: 296mm; page-break-after: auto; position: relative; } .margin-container { margin: 5mm; width: 200mm; position: absolute; top: 0; left: 0; } @media screen { body { background: #eee; } .sheet { background: white; box-shadow: 0 .5mm 2mm rgba(0,0,0,.3); margin: auto; } }

現在RubyとJavaScriptを用いて記事投稿サイトを作成しています。 今回はお気に入り登録/解除の際、flashメッセージを表示できるようにしていきたいと思います。 お気に入り機能の実装はこちら ■仕様等 ・お気に入りアイコンをクリックするとページ上部にメッセージが表示される ・画面スクロールに追従する ・連続でアイコンを押下した際は最新のメッセージが割り込む ・jQueryを使用しない ■完成後の動作とコード create.js.erb //①お気に入り登録が行われた場合に処理を実行する if(document.getElementById('article_<%= @article.id %>').innerHTML = '<%= escape_javascript( render 'shared/articles', article: @article ) %>'){ //②flashメッセージが既に存在する場合は、それを削除する if(document.getElementById('flash-message')){ document.getElementById('flash-message').remove(); } //③flashメッセージ(div要素)を生成する const flashMessage = document.createElement('div'); flashMessage.setAttribute('class', 'flash-message') flashMessage.setAttribute('id', 'flash-message') flashMessage.setAttribute("style", `top: ${window.scrollY}px; animation-name: flash-message-fade;` ); flashMessage.innerHTML = "お気に入りに登録しました" //④flashメッセージの挿入先を取得(body) const body = document.querySelector("body"); body.prepend(flashMessage) //⑤flashメッセージの表示位置をページスクロールに合わせる document.addEventListener('scroll', function(){ flashMessage.style.top = `${window.scrollY}px` }) //⑥flashメッセージを４秒後に消去する window.setTimeout(function(){ flashMessage.remove(); }, 4000); } ■お気に入り機能の実装 以前こちらで実装したものをそのまま使用しています。 ■flashメッセージの実装 ①お気に入り登録が行われた場合に処理を実行する create.js.erb if(document.getElementById('article_<%= @article.id %>').innerHTML = '<%= escape_javascript( render 'shared/articles', article: @article ) %>'){ if分の条件として、お気に入り登録の処理を記述しています。 ②flashメッセージが既に存在する場合は、それを消去する create.js.erb if(document.getElementById('flash-message')){ document.getElementById('flash-message').remove(); } flashメッセージ表示中に続けてお気に入りアイコン押下した際、 表示中のメッセージを消去して最新のメッセージを表示します。↓ ③flashメッセージ(div要素)を生成する create.js.erb const flashMessage = document.createElement('div'); flashMessage.setAttribute('class', 'flash-message') flashMessage.setAttribute('id', 'flash-message') flashMessage.setAttribute("style", `top: ${window.scrollY}px; animation-name: flash-message-fade;` ); flashMessage.innerHTML = "お気に入りに登録しました" style属性の値に指定している${window.scrollY}px;は、現在のスクロール位置を返します。 この要素とanimation-nameで指定しているアニメーションのCSSは以下の通りです。↓ index.css @keyframes flash-message-fade { 0% { display: inline; opacity: 0; transform: scaleY(-1); background-color: rgb(235, 247, 129); } 10% { opacity: 0.5; } 20% { opacity: 1; transform: scaleY(1) } 90% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); display: none; background-color: white; } } .flash-message { animation-duration: 3s; animation-fill-mode: forwards; opacity: 0; display: none; position: absolute; z-index: 2; width: 100%; display: flex; justify-content: center; align-items: center; height: 70px; padding-top: 1%; } ④flashメッセージの挿入先を取得(body) create.js.erb const body = document.querySelector("body"); body.prepend(flashMessage) bodyを取得し、生成したflashメッセージのdiv要素を挿入します。 ⑤flashメッセージの表示位置をページスクロールに合わせる create.js.erb document.addEventListener('scroll', function(){ flashMessage.style.top = `${window.scrollY}px` }) イベントにscrollを指定する事で、画面がスクロールされた際にイベント発火します。 flashメッセージのstyle属性のtopに、先程のwindow.scrollYを代入します。 これによりメッセージがページスクロールに追従する様になります。↓ ⑥flashメッセージを４秒後に消去する create.js.erb window.setTimeout(function(){ flashMessage.remove(); }, 4000); } window.setTimeout内に記述した処理は、指定した時間後に実行されます。 flashメッセージは表示から４秒後に消去されます。 create.js.erbの記述は以上です。 あとはdestroy.js.erb（お気に入り解除）にも①の条件と③のメッセージ内容を変更したものを記述します。 以上で完成です。 ■参考文献 https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY