この記事はAizu Advent Calender 2021の１日目の記事です。 はじめに 最近、Webページを作成しています。レスポンシブなWebサイト作成にBootStrap使ってみました。皆さんにも紹介をしたいと思って今回の記事を書きました。 BootStraptって？ ナビゲーションバーや、入力フォームなどのクラスが用意されており、クラス名を組み込むだけで、簡単にサイトを作成できる。 また、レスポンシブなサイトを簡単に作れる。 導入方法 みんな大好きCDN(下に例があります!!) npm,yarnなどのパッケージ 他は公式ページ見てね BootStrapダウンロードはここから Gridシステムとは 12カラムのシステム 下図のように、ウィンドウは12個のカラムで、分割されています。 自分の好みに応じて、カラムの大きさを変えれます。(数字はカラムの数を表している) 6段階のレスポンシブ 6つのデフォルトのブレークポイントが用意されている。 ブレークポイントに応じて、グリッドのレイアウトを変更できる。 ブレークポイントをsm(576px)にした、コードはこのようになります See the Pen Untitled by suzu144 (@mattya144) on CodePen. ブレークポイント576px ブレークポイント768px 終わりに BootStrapのグリッドシステムについて、少しは理解できたでしょうか？？ 今回初めての記事なので、分かりづらい部分があると思いますが、ご了承ください?♀️?♀️ 参考資料 BootStrap公式ページ
アニメーションが他のタグと重なってしまう時の対処法。 position: fixed;しているheaderタグと重なっているので、ここにz-index: 1;を追記する。 重ならなくなりました。
言語 html css 用いたツール neumorphism.io 実装例 以下の実装で上記の様に実装できます。 sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="sample.css"> </head> <body> <div class = "contents"> <div class="button1"> <a class="icon" href="#"> <i class="fas fa-user-alt"></i> </a> </div> <div class="button2"> <a class="icon" href="#"> <i class="fas fa-search"></i> </a> </div> <div class="button3"> <a class="icon" href="#"> <i class="fas fa-heart" style="color: #902727;"></i> </a> </div> <div class="button4"> <a class="icon" href="#"> <i class="fas fa-home"></i> </a> </div> </div> </body> </html> sample.css body{ background: #ebebeb; } .icon{ display: block; font-size: 2em; margin-top: 25px; align-items: center; color: rgb(88, 88, 88); } .contents{ text-align: center; } .button1{ width: 100px; height: 100px; margin: 10px; display: inline-block; border-radius: 20px; background: #ebebeb; box-shadow: 24px 24px 20px #d1d1d1, -24px -24px 20px #ffffff; } .button2{ width: 100px; height: 100px; margin: 10px; display: inline-block; border-radius: 50px; background: linear-gradient(145deg, #d4d4d4, #fbfbfb); box-shadow: 24px 24px 20px #d1d1d1, -24px -24px 20px #ffffff; } .button3{ width: 100px; height: 100px; margin: 10px; display: inline-block; border-radius: 20px; background: linear-gradient(145deg, #fbfbfb, #d4d4d4); box-shadow: 24px 24px 20px #d1d1d1, -24px -24px 20px #ffffff; } .button4{ width: 100px; height: 100px; margin: 10px; display: inline-block; border-radius: 50px; background: #ebebeb; box-shadow: inset 24px 24px 20px #d1d1d1, inset -24px -24px 20px #ffffff; }
これはなに？ 表の読み込み中を示すアニメーションをCSS（とSVG）で作りました。 デモ 作ったもの HTMLとしてはこれだけです。背景をグラデーションにして、アニメさせています。 <div class="loading-placeholder"></div> CSSのclip-pathで、表のセルっぽく背景色が見えるようにしています。 clip-path: url(#loading-placeholder-mask); 作りたい表の分だけ、SVGが大きくなります。まあこれは仕方ない。 <svg width="0" height="0"> <defs> <clipPath id="loading-placeholder-mask"> (snip) </clipPath> </defs> </svg>
言語 html css 実装例 以下の実装で上記の様に実装できます。 sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sample.css"> <title>sample</title> </head> <body> <div class = "back-img"> <div class = "glassmorphism"> <p>Glassmorphism</p> </div> </div> </body> </html> sample.css .back-img{ background-image:url(img/beach.jpg); background-repeat: no-repeat; display:flex; align-items: center; width:1920px; height:1107px; } .glassmorphism{ width: 900px; height: 600px; margin: auto; text-align: center; border-radius: 2ch; background:linear-gradient( rgba(255,255,255,0), rgba(255,255,255,0.5)); border: 1px solid rgba(255,255,255,0.4); border-right-color:rgba(255,255,255,0.2); border-bottom-color:rgba(255,255,255,0.2); backdrop-filter: blur(7px); box-shadow: 0 5px 20px rgba(255,255,255,0.2); } p{ color: rgb(255, 255, 255); font-size: 60px; height: 450px; line-height: 450px; }
はじめに この記事はNTTテクノクロスアドベントカレンダー 2021 6日目の記事です。 こんにちは。NTTテクノクロスの鈴木雅貴です。当社製品やソリューション、受注案件を中心とした成果物をはじめとして、イベントやらコミュニケーションといった社内のあれこれを、デザインの力でよくしていくというチームのリーダをしています。個人としてはWeb標準技術まわりのスキルで生きており、HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版のいち著者だったりします。と見せかけてプロジェクト管理をテーマにしたボードゲーム『プロジェクト テーマパーク』を遊んでみた | NTTテクノクロスブログのように、隙あらば遊ぼうとしています。 今回は、OSのアニメーションに関する設定を使用して、CSSを制御する機能の紹介です。 きっかけ 私のチームでは年に一度、社員が作ってみたもの・やってみたことを募集して展示会を開催しています。昨年度からコロナ禍のためWeb上での記事掲載としていたのですが、記事を見て終わりではつまらないよねということで、今年度は「閲覧」「いいね」「コメント」「シェア」といった社員同士のつながり促進に結びつく行動を計測し、その数値が増えると木に花を咲かせることで可視化する仕組みを作りました。社員の行動で木に花を咲かせているイメージです。 日々育つ木の様子をGIFアニメーションにしてみました。 で、その木ですが、SVGで生成してまして、表示時にはCSSTransitionを使い花を拡大させつつクルンと回すアニメーションを入れています。シンプルながら結構かわいくて、完成時にはもしかして私天才？とか思ったものです。 が、環境によってそのアニメーションが再生されないことが判明。ただ、よくある特定ブラウザに依存する問題ではなさそう。もしかしてアニメーションが重くて変になってる？とか思いながら色々調べていたところ、SVGを配置したCMSのCSSに、以下の記述を発見しました。 @media (prefers-reduced-motion: reduce) * { animation-duration: 0s !important; transition-duration: 0s !important; } animationもtransitionもdurationが0に…つまり一瞬でアニメーションが終わる…ということは、お前かッ！ で、prefers-reduced-motionって何？ 前置きが長くなりましたが、本日はMedia Queriesのメディア特性の1つであるprefers-reduced-motionについて紹介します。 prefers-reduced-motion とは prefers-reduced-motionとは、CSSのMedia Queries Level 5(参考の日本語訳)で登場したメディア属性です。利用者が、画面で余計な動きをしてほしくない設定をしているかどうかを検出するために使います。 prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN 上記のMDNによると、内耳の一部である前庭に障害を持つ方が画面の動きにより気持ち悪くなる現象、いわゆるアニメーション酔いなどを想定しているようです。そういう方向けにパララックス等の本質的ではないエフェクトがなくせるのであればよいですね。 prefers-reduced-motionは以下のように使います。 @media (prefers-reduced-motion: reduce) * { animation-duration: 0s !important; } prefers-reduced-motionの取りうる値は2つありまして、 reduce: システム上でアニメーションを避けるような設定がされている no-preference: システム上でアニメーションを避けるような設定がされていない ここでいうシステムはOSと考えるとわかりやすいかと。前述のCSSは値がreduceなので、「OS上でアニメーションを避けるような設定がされている場合、全要素のanimation-durationを0sにする」、つまりアニメーション再生を0秒で終わらせるという指定となります。アニメーションしてないのとほぼ同等の見た目になりますね。 「アニメーションを避けるような設定」とは 具体的には、OSでの特定の設定を見ています。MDNの「ユーザー設定」に記述がありました。以下はそこより引用しています。 GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 他にも、 gtk-enable-animations = false を GTK 3 configuration file の [Settings] に追加する方法もあります。 Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合) macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制 iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除 Firefoxのものと記述がありますが、Google Chromeでも同様のようでした。 仕様策定状況と動作するWebブラウザ Media Queries Level 5は、最初のWorking Draftが2020.3.3発行、5回目のWorking Draftである2020.7.31のものが最新です。Editors Draftは2021.11.3の比較的新しいものがありますが、ISSUEも複数見られたので、仕様が安定するまではまだ時間がかかりそうです。 しかし、MDNのブラウザーの互換性を見る限り、IEを除く主要ブラウザ側の実装は完了していて、わりと安心して使える状態といえます。 注意点 prefers-reduced-motionは使うだけならとても簡単なのですが、使用する上で気をつけたいポイントがいくつかありました。 (1) 意図せずアニメーションが無効になってしまう アニメーションを避けるような設定が、Webブラウザ内のアニメーションに影響を及ぼすと知らない場合は、意図せずアニメーションをキャンセルされてしまうことが起こりえます。私の場合はもろにこれでした。 無くても困らないアニメーションが減るのであればよいですが、ローディングアイコンやインジケーターなどの有用なものまで無くなってしまっては、本末転倒です。 そのようなことを避けるため、前述のような*指定はなるべく避けたほうがよいでしょう。無くなっても困らないアニメーションをする要素に特定のクラスをつけてあげれば、そのクラスのみをキャンセル対象とすることができます。 (2) アニメーション終了イベントが発火しなくなる アニメーションをなくしてしまうだけなら、以下のような書き方ができます(避けたほうがいいと書いた*指定なのは気にしない方向で)。 @media (prefers-reduced-motion: reduce) * { transition: none !important; animation: none !important; } しかし、この書き方でアニメーションそのものを無くしてしまうと、アニメーション終了時に発火するはずのtransitionendイベントやanimationendイベントが発火しません。もしJavaScriptでこれらを使ってなにかやっていた場合は、めんどうですね。 それを避けたい場合は、以下のように書くとよいです。 @media (prefers-reduced-motion: reduce) * { transition-delay: 0s !important; transition-duration: 1ms !important; animation-delay: 0s !important; animation-duration: 1ms !important; } transition-durationとanimation-durationを1ミリ秒にすることで、アニ メーションを一瞬で終わらせます。 transition-delayとanimation-delayにマイナスの値を指定すると、アニメーションが即座に終了した扱いになるテクニックもあるのですが、ブラウザによってはアニメーション終了イベントが発火しなくなるので、0sを指定しています。 (3) セキュリティ・プライバシー面での課題が残っている Media Queries Level 5でもISSUEとしてあげられているのですが、このメディア特性は、利用者についての情報を取得し利用しているため、フィンガープリント的なものとしても使われるのではという議論がされています。今後の展開によっては、仕様変更・削除となるかもしれません。 そういったものであることを自覚した上で、この機能を使うかどうかを判断するのがよいでしょう。 おわりに 今回は、OSのアニメーション抑制設定を使ってCSSを制御できるメディア特性prefers-reduced-motionを紹介し、 あわせて気をつけたほうがよいポイントを書きました。私は知らずに設定されていたこいつのせいでハマったというあまり喜ばしくない出会い方だったのですが、きちんと考慮して使えばなかなかいいものではないかと思います。 7日目となる明日は @ttttfx702p さんです。お楽しみに！
