この記事は CSS Advent Calendar 2021 1日目の記事です。 aspect-ratio を使って画像のトリミング表示をしてみました。 やりたいこと サイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。 レスポンシブで縦と横の比率も揃えたい。 画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。 できました See the Pen responsive trimming image by Beco (@becolomochi) on CodePen. ざっくり重要なところだけ HTML の構造 img 要素を div 要素で囲んでいます。 <div class="responsive-image"> <img src="image.png" alt="image"> </div> img 要素の親要素の CSS 親要素に overflow と aspect-ratio を指定します。 .responsive-image { overflow: hidden; aspect-ratio: 5 / 3; } img 要素の CSS img 要素自体には object-fit と縦と横それぞれ 100% を指定しました。 100%を指定する理由は、縦長の画像・横長の画像両方に対応するためです。 .responsive-image img { object-fit: cover; width: 100%; height: 100%; } まとめ padding して position 指定して…よりすっきりしてて良いですね。 最新の Safari で対応したのでどんどん使える状況が増えると良いなと感じました。

初めに 現在書けるプログラミング言語はHTML・CSSのみです。 そんな私が初めてBootstrapを使ってみた感想を書いていきたいと思います。 ○Bootstrapとは BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークで、HTMLおよびCSSベースのデザインテンプレートとして用意されています。 ○Bpptstrapを使うメリット・初心者にお勧めする理由  https://getbootstrap.jp/docs/5.0/layout/columns/を参照 写真のように他にも様々なフレームワークが用意されています。 また、初心者でもBootstrapにはサンプルコードがあるため、webデザインの知識がなくてもレイアウトを簡単に整えることができます。 ○実際使ってみて感じたメリット・デメリット メリット ・webデザインの知識がなくてもレイアウトを整えることができる ・作業時間の短縮 ・様々なデバイスに対応が可能 デメリット ・オリジナル性が低い ・カスタマイズできない まとめ Bootatrapは、デザインを組み込んでいるがために、まったく違うデザインに変更しようとした場合かなり手間がかかりますが、初学者でソースコードがわからなくても簡単に使う事ができるためお勧めです。

文章を三等分にする方法 HTMLファイル <div style="display: flex;"> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル1 </h1> <P> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </P> </div> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル2 </h1> <P> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </P> </div> <div style="width: calc(100% / 3); padding: 0 10px;"> <h1> タイトル3 </h1> <P> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </P> </div> </div>

2020年末頃から話題になっているグラスモーフィズムですが、グラスモーフィズムとは「透明度が高い背景とぼかしを組み合わせることで半透明のすりガラスを表現したような見栄え」のデザインをいい、以下のような特徴があります。 特徴 ①透明度: 背景のぼかしを使用したガラスのようなエフェクト ②空間に浮遊するオブジェクトを用いた、複数の階層、レイヤー状アプローチ ③ぼやけた透明感を際立たせる鮮やかな配色 ④半透明のオブジェクトの上にわずかな境界線ボーダー追加 PinterestやDribbleでもいろいろな例が公開されています。 このグラスモーフィズムのジェネレータがいくつかあるのですが、以下の3つの比較をしてみました。 （A）Glass Morphism （B）Glassmorphism CSS Generator （C）Toolbox - Glassmorphism Generator 書き出されるcss（設定を変更しないデフォルトの場合）は以下の通りです。 See the Pen Glass MorphismとGlassmorphism CSS Generatorの比較 by haruyosih (@lvn_HO) on CodePen. （A）Glass Morphismの場合     color: white;     display: flex;     justify-content: center;     align-items: center;     gap: 20px;     border-radius: 16px;     backdrop-filter: blur(5px);     background-color: rgba(0,191,255, 0.075);     box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;     border: 1px rgba(255,255,255,0.4) solid;     border-bottom: 2px rgba(40,40,40,0.35) solid;     border-right: 2px rgba(40,40,40,0.35) solid; 設定画面 ＜設定項目数：7＞ ①Opacity　②Blur（backdrop-filter）　③Border　④Backgroung Image　⑤Glass Color　⑥Image　⑦Text justify-content、align-items、gapとった要素の中身に関する設定もデフォルトで入っています。テキストを入れるといい感じで白い文字が表示されます。デフォルトでは、右辺と下辺に box-shadow：rgb(0 0 0 / 30%) 2px 8px 8px; が入っているので、他の2つに比べて若干厚みが感じられます。 （B）Glassmorphism CSS Generatorの場合     background: rgba( 255, 255, 255, 0.1 );     box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );     backdrop-filter: blur( 20px );     border-radius: 10px;     border: 1px solid rgba( 255, 255, 255, 0.18 );     width: 700px;     height: 400px;     margin: 0 auto; ＜設定項目：2項目＞ ①Blur value（backdrop-filter） ②Transparency（透過度） （C）Toolbox - Glassmorphism Generatorの場合     background-color: rgba(255, 255, 255, 0.25);     backdrop-filter: blur(6px);     border: 0.995575px solid rgba(255, 255, 255, 0.18);     box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;     border-radius: 12px;     color: rgba(255, 255, 255, 0.75); ＜設定項目：6項目＞ ①theme　②width　③Border Radius　④Background Blur　⑤Transparency　⑥Show Outline 他の2つにはない「テーマ」という設定項目がありLightとDarkの2種類から選択可能ですが、すべての値でスライダーでのみ数値を変更する仕組みであり、任意のpx単位ではできないようです。 【結果】 一番細かく設定できるのは（A）Glass Morphismですが、（デフォルトの設定では）右と下にあるドロップシャドウで若干野暮ったく感じるため、（B） Glassmorphism CSS Generator　が好みです。 今回はデフォルトの値のままでの見た目を比較したものであり、実装の際に自分の好みに変更すればいい話ですが、サクッと実装したい時にはジェネレーターは便利ですね。

？？？「margin: auto;だと上下にもautoされちゃうよ」 いいえ。一緒です。 上下のmarginもautoになりますが、結果的に0になります。 If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. W3C Visual formatting model details ？？？「じゃあmargin: auto;でよくね？」 確かにそうなんだけど。 今後の仕様変更でもしmarginの上下の初期値が変更になったらそのサイト修正が必要になる気がするので 僕はmargin: 0 auto;派で行きたいと思います。 ご意見ください。

やりたいこと Railsでガチでフランス語のアプリを個人開発しています。 タイトルや文章をブラウザで表示したいとき、PCブラウザは横に長いから改行は要らないが、スマホブラウザでは改行を入れないと見栄えが悪いってことあると思います。しかもお任せしちゃうと「いや、そこで改行しないで...、ダサい！」ってところで改行してくれてしまいます。 こんな感じで↓ これをPCブラウザの時は、 ようこそ「みんなでフランス語」へ みんなでフランス語、日本語の知識を共有しましょう スマホの時は、 ようこそ 「みんなでフランス語」へ みんなでフランス語、日本語の知識を 共有しましょう という具合で改行したいです。 HTMLで<br>タグを仕込んで、CSS側のdisplayとメディアクエリを活用して制御すれば良いかと思ったのですが、RailsのビューでI18nを使ってしまっている。。ゆくゆくは多言語対応したいから、I18nはそのまま使いたい。 あると思います。 例えばコードがこんな感じになっているとします。 posts/index.html.erb <h2 class="title"><%= t('.title') %></h2> posts/views.ja.yaml --- ja: posts: title: "ようこそ<br>「みんなでフランス語」へ" 実装！ ２ステップです。 1. keyをhoge_htmlにするとhtml_safeとして読んでくれる I18nはsuffixに_htmlとあるとhtml_safeと判断してくれるそうです。 なので、titleをtitle_htmlにします。 posts/index.html.erb <h2 class="title"><%= t('.title_html') %></h2> posts/views.ja.yaml --- ja: posts: title_html: "ようこそ<br>「みんなでフランス語」へ" これはRailsの公式ドキュメントに書いてあります↓ the translation will be marked as html_safe if the key has the suffix “_html” or the last element of the key is “html”. Calling translate("footer_html") or translate("footer.html") will return an HTML safe string that won't be escaped by other HTML helper methods. でも調子に乗ってclass属性を入れると... views.ja.yaml --- ja: posts: title_html: "ようこそ<br class="for-mobile">「みんなでフランス語」へ" I18n::InvalidLocaleData - can not load translations from /Users/USER_NAME/dev/APP_NAME/config/locales/views.ja.yml: #): did not find expected key while parsing a block mapping at line 128 column 7>: こんな感じで怒られました。 2. ならばCSS（SCSS）で工夫してあげる localeのyamlでは<br>と属性なしのままにしておいて、CSSのセレクタで工夫してあげよう！ということで<br>をCSSで親要素から指定してスタイルを設定すればやりたいことが実現できました。 .title { br { display: none; @media (max-width: 414px) { display: inline; } } } 最後に ご指摘などあればよろしくお願いします！ ちなみに、このアプリ、リリースしてガチで使いたいし、ガチで使ってもらいたいので、Instagramから始めました（リンク）。

初めまして、NSSOLにてUXデザイナーをしている1年目の濱岡と申します。 今回縁あってQiita Advent Calendarに投稿させて頂くことになりました。 本記事の要件は以下になります。 目的 新卒配属からUXデザイナーとして、約4ヶ月で取り組んできたことと所感の共有 想定している読者 Qiita Advent Calendarの参加メンバー、Qiitaの閲覧者。あわよくばUXデザイナー/NSSOL/サービスデザイン部に興味がある就活生も。 読者の方々に伝えたいこと UXデザイナーがどんなことをしているのかを理解し、面白い！と思ってもらう。また、自分がこれまでの取り組みから得た学びを実践してもらう。 目次 1.自己紹介 2.11月までにやったこと 3.これまでに得た学び 4.おわりに それでは記事の内容に入ります。 1. 自己紹介 まずお主誰じゃ、というツッコミが入るかと思うのでサラッと自己紹介します。自分は現在NSSOLのDXIC（Digital Transformation & Innovation Center）という事業部の、サービスデザイン部に所属しています（新卒1年目）。趣味は旅行、食べログランキング上位のお店巡り、読書、サウナ、韓ドラの視聴です。大学では材料科学の分野を専攻していました。入社時のITスキルはというと、Progateを触ったり基本情報技術者試験の勉強をしたぐらい。デザインの事もノンデザイナーズ・デザインブックを、興味本位で読んだことがあるぐらいのまっさらな状態でした。 ではなぜUXデザイナーを志望したか、理由は2つあります。 1つ目は、好奇心が強く色々なことをしてみたいと思ったからです。かなりのミーハーなので、新しいもの・面白そうなものがあったら飛びついてしまうんですね。SI業界を選んだのも、同様の理由です。 2つ目は、人の体験に関わるような事をしてみたかったから。これまでの人生を振り返ると、自分の人生を豊かにしてきたのは「モノ」よりも「体験」だと感じていました。外車に乗るとか、良い時計を付けたいなどの野心的な物欲があまりなく、それよりも旅行やスポーツなどを通じ、自分の記憶に残るような体験を毎日したいと考えていました。それが転じて、自分のみならず人の体験を豊かにできるような仕事をしたいと思うようになったのだと思います。 2. 11月までにやったこと 次に自分が4月から現在（11月末）までにやってきたことをざっくり紹介します。 4~6月：全体研修（ビジネススキル、WF開発の進め方、Java・基盤系の基礎） 7月上旬〜7月中旬：デザイン＆アジャイル研修（デザイン思考とアジャイルのマインドを身につける） 7月下旬〜9月上旬：サービスデザイン部に本配属され、社内サービスをスクラムで開発していくPJに参加。UXデザインで具体的にやったことは以下になります。 ユーザインタビュー ペルソナの作成 OOUI（オブジェクト指向UI）の概念の学習 Material Designの読み込み スタイルガイドの作成 Adobe XDを使って画面をデザイン 9月中旬〜9月末：内定者向けの事業部紹介資料をリデザイン 資料の用途や目的、ターゲット及びターゲットに起こして欲しいアクションの整理 DXICの所長や、各部署の部長にインタビュー（緊張しました！） スタイルガイドの作成 インタビュー内容を元に、各スライドの中身をメッセージが強調されるよう修正 10月〜11月末（現在）：模擬PJに復帰 Reactを用いて実装（HTML/CSS/JavaScript） 開発しているサービスのブランディング 途中で色彩検定/基本情報技術者試験/応用情報技術者試験/認定スクラムマスター研修などの資格も取得したり、10月末にDesignshipというイベントに参加したりもしましたが、やってきたことは大体こんな感じです。 3. これまでに得た学び さて、ここからの内容は自分がこれまでに得た学びになります。 チームワークがめちゃ大事 これは自分がスクラムチームに参加してから強く感じ、かなり衝撃でした。なにせ自分の中ではデザイン/エンジニア/リモートワークという言葉からは、黙々と個人作業を進めていくイメージが想起されていたからです。ところが現在行っているスクラム開発では、スクラム/アジャイル的にこの考え方・振る舞いはどうか？チームとして問題解決に取り組めているか？と、チームやメンバーの動きに関する議論が非常に多く交わされています。 スクラムやアジャイルに関するドキュメントは下記を参照。 就活時に「チームで働くのが好きな人はSIerに向いている」と聞いていましたが、こういうことなのかなと実感しています。実案件でスクラムに取り組んでいる先輩方の話を聞いていても、技術的な問題よりもスクラムとして成立しているかどうかがPJの成否を分けると耳にするので、スクラムやアジャイルの価値観を大事にしてチームとして動いていこうと思います。 使いやすいものの裏にはデザインの営みがある Googleの公開している、「Material Design」をご存知でしょうか？これはGoogleが提唱しているデザインのガイドラインのことで、「見やすく、直感的に操作できるWebページ・サービス」を作ることを目的としています。ユーザビリティの高いアプリやサイトは、このMaterial Design、ないしはAppleの公開している「Human Interface Guidelines」に準拠して作られています。 世の中の使いやすいWebサイトはこれらのガイドラインに沿って作られているという事を知り、自分が画面のデザインをする際にはMaterial Designを辞書の如く参照するようになりました。使いやすさの裏にはこのような共通した法則というか、ガイドラインがあるのですね。 皆が惹かれるモノの裏にもデザインの営みがある これはDesignShipでマツダのデザイナー、前田 育男さんがお話されていた事になります。前田さんは車のデザインをアートに昇華すべく、美しいクルマづくりに挑戦されています。マツダの車といえば高いデザイン性が特徴として挙げられますが、その裏にはこんな取り組みがありました。 マツダでは車を、ヒトと心を通わせ一体となれるような生き物のようにしたいと考えていました。そこで、「クルマに命を吹き込む」ために野生動物の躍動感ある写真のスケッチを行い、それを抽象化した立体である「御神体」を1年がかりで作成。そしてそれを作成してからそれをクルマのフォルムに落とし込む段階では、全てをCADのようなデジタルツールで行うのではなく、必ずクレイ（粘土）モデルを作り、感触を確かめながら手で削って形を作っていくそう。こうした取り組みから生まれた車体には独特のフォルムに絶妙な陰影が付いており、その美しさは世界的に高い評価を受けるようになりました。 1台のクルマが生まれるまでにここまで徹底したデザインのプロセスがあることに感服し、世の中のモノを見る視点が変わりました。美しいと感じるもの、何故か心惹かれるものの裏にはデザインという仕掛けがある。自分もデザインというプロセスを通じて、そういうものを作っていきたいですね。 デザインと実装の二刀流がシナジーを生む えっ、デザイナーってプログラミングするの...？と思われた方もいらっしゃるかと思います（自分もそうでした）。スクラムチームでは、スクラムマスター/プロダクトオーナー/開発者という3つの役割があるのですが、「開発者」にはエンジニアもデザイナーも関係なくひとくくりにして含まれています。機能横断的なチームがあるべき姿なので、自分はデザインしかやらない！基盤しかやらない！なんてことはありません。なので自分も実装をするようになりました。 ちなみにスクラムに限らず、今後はデザイナーとエンジニアの境目がどんどん曖昧になると言われています（下記の記事を参照）。 とはいえ自分はデザインも初心者だったのでまずはデザインを学ぼう、ということで9月まではAdobe XDを用いて画面を描いていましたが、実装はほとんどしていませんでした。先輩から「実装をした方がUIも描けるようになる」と言われていましたが、その意味をこの時点では理解出来ず。しかし10、11月と実装をしてみて、デザインと実装の両方を経験する以下のメリットに気づきました。 挙動をイメージできるようになる 当たり前ですが、デザインツールを用いて画面を描く際は画面は動きません（画面遷移などをプレビューできるプロトタイプ機能ぐらいはありますが）。しかし実際に作るものは「動くソフトウェア」なので、画面の各要素の挙動を想定してデザインをする必要があります。実装を経験したことで、必須項目が入力されていない時のエラーメッセージはどのように表示されるか、画面幅を縮めた際にはレイアウトがどう変わるか、文章が長い場合は「...」で表示するか、などを想定してデザインするようになりました。 divが見える これは実装をしてみてのアハ体験でした。実装の際には各セクションをdiv（ないしは他のHTMLタグ）で区切って要素を配置しますが、それを一度経験すると画面上のdivの区切りが見えてくるようになります。例えば左下の図を見ただけでも、脳内には右下のようにdivがうっすらと浮かびます。 divを意識するようになったことで、デザインをする際に親要素のdiv幅内に子要素を配置するなど実装上無理のないUIをデザインできるようになりました。「実装をした方がUIも描けるようになる」とは、まさにこの事ですね！ ユーザ目線でのレビューができる 前述のMaterial Designを一読した上で自分で一度デザインをすると、要素同士の間隔は4or8の倍数になっているか、ユーザが入力する箇所のフォントサイズは16pxで指定されているか、などCSSの指定をかなり細かくチェックするようになりました。実装だけをしていると実際に書かれたコードを見て、コードの可読性や処理の書き方に注目するあまりユーザ目線が抜けがちですが、ユーザにとって価値があるのは「動くソフトウェア」なのでこの視点は忘れないようにしたいです。 複雑性を担う覚悟が生まれる UXデザインをする上で意識すべき1つの法則として、「テスラーの法則」というものがあります。これは、「どんなシステムであってもそれ以上シンプルにすることのできない固有の複雑さがあり、その複雑さはユーザか開発側のどちらかが担わなければならない」というものです。 例えばメールアプリでは、差出人と宛先の2つの情報が必要になり、これらはいずれも必要不可欠な複雑性になります。この複雑性をユーザに担わせないために、最近のメールアプリでは差出人（自分）を予め入力しておくこと、また過去のメールや連絡帳から宛先を予想し候補を表示してくれます。つまり、差出人と宛先の入力という複雑性を、ユーザに代わって引き受けるようなメールアプリをデザイン・実装することで、メールを書くことを楽にしてくれているのです。 このようなことを開発側として実際にやろうとなると、なかなか面倒に感じました。ユーザにとってあったら嬉しいけど必須じゃないし、の割に実装やデザインがややこしかったりするし...イチ開発者としては、できればやりたくない！と思うこともありました。デザイナーもエンジニアも、自分たちで複雑性を担うのってかなりの覚悟が必要なのだなと。 なのでGoogleやAppleの提供するようなシンプルでUI/UXの優れたサービスは、エンジニアとデザイナーがユーザの代わりに複雑性を担ってくれている賜物で、サービス提供側の本気度の表れなんだと尊敬の念を抱くようになりました。と同時に、デザイナーがエンジニアに対して何でこのデザインにするのか、そのこだわりについて語れなければUI/UXの優れたサービスは実現できない、と感じました。開発者に納得してもらえるよう、誰よりもユーザを中心に考えこだわっていきたいです。 予防線を張らない これはDesignshipで、HI(NY) design というデザイン会社の渡邊デルーカ 瞳さんがお話されていた内容になります。 渡邉さんは過去にNYのSVAという美大に留学した際に、アメリカの学生よりも日本の学生の方がアウトプットの質は高いが、ストーリーテリングが上手いのはアメリカの方だと感じたそうです。正直作品のクオリティは高くないのに、自信満々に自分の作品をプレゼンする。そんなアメリカの学生を見て、「予防線を張るような発言をしてしまうと作品の良さが半減する。批判されるのは当たり前と思って、その作品の良さを最大限伝えよう！」と考えるようになった、とお話されていました。 自分も「あんまり自信がないですが」「ちょっと初めてだったので」のように、成果物を見せる際に予防線を張ってしまう事は多々ありました。謙遜の意味合いの場合もありますが、自信があるからこそ批判されて傷つきたくないがために予防線を張ってしまう事がほとんどだったので、このお話を聞いてハッとしました。作品の価値を落とさないために、予防線は極力貼らないように気を付けています。 4. おわりに 4ヶ月で多くの学びを得ましたが、スキル的にはまだまだ見習いの域を出ません。本職のデザインの力を伸ばすにもまずは実装の基礎体力をつけるべく、年内はReactの勉強に注力します（今は下記の本で勉強中）。 モダンJavaScriptの基本から始める　React実践の教科書 そんなにロジカルな人間ではないので実装に向いてるとは思いませんが、新しい知識を習得したときや、あれこれ試行錯誤して動くソフトウェアができた時の喜びを大切にしていきたいです。年明けごろにはデザインの勉強にシフトして、Google UX Design Certificateの習得を始めたいですね。 最後になりますが、まさか自分がこんな分野の事を勉強しているとは学生の頃には想像がつきませんでした（DesignshipもReactも、名前すら聞いたことがありませんでした）。 自分の好きなUXデザイナーの安藤　剛さんが、以前Youtubeで「技術的なキャッチアップは組織に所属していなくても可能だが、文化的なキャッチアップは組織に所属していないと難しい」とお話されていましたが、まさしくそれを実感しています（動画は下記リンク）。 今の時代はネットや本から技術は学べるものの、アジャイルやデザインの文化・トレンドを学べるのは組織に所属している人の特権ですよね。自分は組織に所属しているメリットを最大限に活かし、技術と文化をこれからもアップデートしていきたいと思います！ ここまで読んで頂き、ありがとうございました。

IEやEdge(Legacy)などの古いブラウザの対応は考慮していません。 IEやEdge(Legacy)などの古いブラウザの対応を考慮せず、 縦横のスクロールバーが表示されると隠れてしまうなど、 細かな事を気にせずであればシンプルに記述できますね。 追記 こちらの投稿によると、 YouTube埋め込みプレーヤーの前に視覚的要素を配置できないようです。つまり、 YouTube埋め込みプレーヤーを背景に使用することはできないようで、 YouTube埋め込みプレーヤーを背景に使用することはガイドライン違反になりそうです。。。 demo（ガイドライン違反の可能性があるのでリンクは解除） code <video class="video-background-fixed-contain" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" playsinline autoplay loop muted></video> <video class="video-background-fixed-cover" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" playsinline autoplay loop muted></video> <video class="video-background-contain" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" playsinline autoplay loop muted></video> <video class="video-background-cover" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" playsinline autoplay loop muted></video> <iframe class="youtube-background-fixed-contain" src="https://www.youtube.com/embed/ZhJe6-XCjdI?playlist=ZhJe6-XCjdI&playsinline=1&autoplay=1&controls=0&disablekb=1&iv_load_policy=3&modestbranding=1&fs=0&loop=1&mute=1"></iframe> <iframe class="youtube-background-fixed-cover" src="https://www.youtube.com/embed/ZhJe6-XCjdI?playlist=ZhJe6-XCjdI&playsinline=1&autoplay=1&controls=0&disablekb=1&iv_load_policy=3&modestbranding=1&fs=0&loop=1&mute=1"></iframe> <iframe class="youtube-background-contain" src="https://www.youtube.com/embed/ZhJe6-XCjdI?playlist=ZhJe6-XCjdI&playsinline=1&autoplay=1&controls=0&disablekb=1&iv_load_policy=3&modestbranding=1&fs=0&loop=1&mute=1"></iframe> <div class="youtube-background-cover-container"> <iframe class="youtube-background-cover" src="https://www.youtube.com/embed/ZhJe6-XCjdI?playlist=ZhJe6-XCjdI&playsinline=1&autoplay=1&controls=0&disablekb=1&iv_load_policy=3&modestbranding=1&fs=0&loop=1&mute=1"></iframe> </div> .video-background-fixed-contain { object-fit: contain; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .video-background-fixed-cover { object-fit: cover; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .video-background-contain { object-fit: contain; object-position: center top; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .video-background-cover { object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .youtube-background-fixed-contain { position: fixed; top: 50%; left: 50%; width: min(100vw, calc(100vh / (9 / 16))); height: min(100vh, calc(100vw * (9 / 16))); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } .youtube-background-fixed-cover { position: fixed; top: 50%; left: 50%; width: max(100vw, calc(100vh / (9 / 16))); height: max(100vh, calc(100vw * (9 / 16))); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } .youtube-background-contain { position: absolute; top: 0%; left: 50%; width: min(100vw, calc(100vh / (9 / 16))); height: min(100vh, calc(100vw * (9 / 16))); transform: translate(-50%, 0%); pointer-events: none; z-index: -1; } .youtube-background-cover-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none; } .youtube-background-cover { position: absolute; top: 50%; left: 50%; width: max(100vw, calc(100vh / (9 / 16))); height: max(100vh, calc(100vw * (9 / 16))); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } or :root { --youtube-aspect-ratio: (9 / 16); } .youtube-background-fixed-contain { position: fixed; top: 50%; left: 50%; width: min(100vw, calc(100vh / var(--youtube-aspect-ratio))); height: min(100vh, calc(100vw * var(--youtube-aspect-ratio))); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } .youtube-background-fixed-cover { position: fixed; top: 50%; left: 50%; width: max(100vw, calc(100vh / var(--youtube-aspect-ratio))); height: max(100vh, calc(100vw * var(--youtube-aspect-ratio))); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } .youtube-background-contain { position: absolute; top: 0%; left: 50%; width: min(100vw, calc(100vh / var(--youtube-aspect-ratio))); height: min(100vh, calc(100vw * var(--youtube-aspect-ratio))); transform: translate(-50%, 0%); pointer-events: none; z-index: -1; } .youtube-background-cover-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none; } .youtube-background-cover { position: absolute; top: 50%; left: 50%; width: max(100vw, calc(100vh / var(--youtube-aspect-ratio))); height: max(100vh, calc(100vw * var(--youtube-aspect-ratio))); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }

demo demo code ::-ms-clear ::-ms-reveal -ms-high-contrast-adjust Edge(Chromium)でも動作するかの確認です。 Windows10のEdge(Chromium),Chrome,Firefox,IE11にて、 inputの入力の欄をクリックしてフォーカスをあてたり、 inputの入力の欄にhogehogeと何かの文字を入力したり、 Windowsのハイコントラストのモードを切り替えすれば、 各ブラウザの実装状況の違いや動作の違いの確認ができます。 ※ Windowsのハイコントラストのモードを切り替えると、 Windowsのライトモードダークモードも切り替わる場合があるようです。 Windowsのハイコントラストのモードの切り替え方、および、 Windowsのライトモードダークモードの切り替え方は下部の外部リンク参照。 ::-ms-clear ::-ms-clearはEdge(Chromium)では動作しないようです。 ::-ms-vendor-prefixなのでMS社以外のブラウザでも動作しません。 ::-ms-clearは、 <input type="text">の類で文字入力をした際、 <input type="text">の類の右端に表示される、 バツマークをスタイル付けできるようにするためのセレクタのようです。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear 備考 ::-webkit-search-cancel-buttonは、 <input type="search">で文字入力をした際、 <input type="search">の右端に表示される、 バツマークをスタイル付けできるようにするためのセレクタのようです。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button ::-ms-reveal ::-ms-revealはEdge(Chromium)でも動作するようです。 ::-ms-vendor-prefixなのでMS社以外のブラウザでは動作しません。 ::-ms-revealは、 <input type="password">で文字入力をした際、 <input type="password">の右端に表示される、 目玉マークをスタイル付けできるようにするためのセレクタのようです。 https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-reveal 備考 -webkit-text-securityは、 <input type="text">の類で文字入力をした際、 <input type="text">の類の文字のマスクの設定に関するプロパティのようです。 https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security input-securityは、 <input type="password">で文字入力をした際、 <input type="password">の文字のマスクの設定に関するプロパティのようです。 CSS Basic User Interface Module Level 4 Editor’s Draft に記載があります。 https://drafts.csswg.org/css-ui/#input-security -ms-high-contrast-adjust -ms-high-contrast-adjustもEdge(Chromium)で動作するようです。 -ms-vendor-prefixなのでMS社以外のブラウザでは動作しません。 -ms-high-contrast-adjustは、 Windowsのハイコントラストモードで設定されたCSSで、 上書きするかどうかを設定するプロパティのようです。 auto：adjustする（上書きする） none：adjustせず（上書きせず） https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/ceff5f67-9c37-4c7b-b39c-93514df582a0 備考 forced-color-adjustは、 -ms-high-contrast-adjustと同様の効果のあるプロパティのようです。 CSS Color Adjustment Module Level 1 Editor’s Draft に記載があります。 https://drafts.csswg.org/css-color-adjust/#forced-color-adjust-prop Reference ::-ms-clearと::-ms-revealが何のセレクタか以下が画像付きで分かりやすいです。 https://qiita.com/hiron712/items/118819a08de42c1ff592 Windowsのハイコントラストモードに関しては以下が画像付きで分かりやすいです。 https://outcloud.blogspot.com/2019/01/howto-high-contrast-mode-support.html Change color contrast in Windows10 https://support.microsoft.com/en-us/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_10 https://support.microsoft.com/ja-jp/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_10 Change color contrast in Windows11 https://support.microsoft.com/en-us/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_11 https://support.microsoft.com/ja-jp/windows/fedc744c-90ac-69df-aed5-c8a90125e696#WindowsVersion=Windows_11 Change colors in Windows10 https://support.microsoft.com/en-us/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_10 https://support.microsoft.com/ja-jp/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_10 Change colors in Windows11 https://support.microsoft.com/en-us/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_11 https://support.microsoft.com/ja-jp/windows/d26ef4d6-819a-581c-1581-493cfcc005fe#WindowsVersion=Windows_11

CSS Working Group Editor Drafts CSS Working Group Editor Drafts を眺めていて、 気になったものを Pickup してみました。 一言コメントを記載しておりますが、 詳細は Reference を参照ください。 CSS Working Group Editor Drafts は、 草案や議論促進のためのものなので、 廃案になるかもしれないし、 導入されるかもしれないし、 というものです。 当方IT業界外の人間です。 琴線がズレているかもしれません。 ご了承ください。 CSS Cascading and Inheritance Level 5 @​layer 詳細度を変更せずに明示的に再配置できるようにするためのアットルール。 Chrome,Firefox,Safariの(開発版の)実験的機能として試せるもよう。 CSS Cascading and Inheritance Level 6 @​scope 一部の冗長な記法をより簡潔に記述できるようにするためのアットルールのもよう。 CSS Conditional Rules Module Level 4 @​when @​whenは@​mediaや@​supportsなどを一緒くたに判定できるようにするためのアットルール。 @​else @​elseは@​whenに対してelse文を提供するためのアットルール。 @​elseは@​when以外のアットルールに使用できるのでしょうか...? CSS Containment Module Level 3 @​container コンテナの使用可能な幅に応じて条件分けするためのアットルール。 Chromeの(開発版の)実験的機能として試せるもよう。 container query length units ( cqw, cqh, cqi, cqb, cqmin, cqmax ) コンテナクエリの寸法を100とした長さの単位。 CSS Grid Layout Module Level 3 CSS Grid で Masonry Layout をできるようにするための仕様。 Firefoxの(開発版の)実験的機能として試せるもよう。 CSS Nesting Module ネストによる記述をできるようにするための仕様。 Scroll-linked Animations スクロール量にリンクしてアニメーションをできるようにするための仕様。 Chromeの(開発版の)実験的機能として試せるもよう。 CSS Animations Level 2 animation-composition アニメーションが複数同時に、 同じプロパティに影響を与える場合に、 どのように作用するかを設定するためのプロパティ。 animation-timeline Scroll-linked Animations の @​scroll-timeline 用...? CSS Backgrounds and Borders Module Level 4 border-limit ( or border-parts ? ) borderの描画を一部のみにするプロパティ。 border-clip borderの描画を一部のみにするプロパティ。 CSS Box Model Module Level 4 margin-trim コンテナの最初と最後のmarginを制御するためのプロパティ。 CSS Fragmentation Module Level 4 margin-break フラグメンテーションブレークの箇所で、 ボックスの上端と下端のmarginを制御するためのプロパティ。 CSS Shapes Module Level 2 shape-inside shape-outsideのinside版 shape-padding shape-marginのpadding版 CSS Values and Units Module Level 4 large viewport-percentage units (lvh, lvw, lvi, lvb, lvmin, and lvmax) 大きいviewportを100とする長さの単位。 UI要素(アドレスバーなど?)が表示されたりとか大きくなったりすると、 コンテンツを覆い隠すみたいです...(T-T) Safariの(開発版の)実験的機能として試せるもよう。 small viewport-percentage units (svh, svw, svi, svb, svmin, and svmax) 小さいviewportを100とする長さの単位。 UI要素(アドレスバーなど?)が非表示になるとか小さくなったりすると、 余分な隙間が発生するみたいです...(T-T) Safariの(開発版の)実験的機能として試せるもよう。 dynamic viewport-percentage units (dvh, dvw, dvi, dvb, dvmin, and dvmax) 動的なviewportを100とする長さの単位。 全ての場合において、 スクロールバーは存在しない想定とのことみたいです...(T-T) Safariの(開発版の)実験的機能として試せるもよう。 Reference https://drafts.csswg.org/ https://drafts.csswg.org/css-animations-2/ https://drafts.csswg.org/css-animations-2/#animation-composition https://drafts.csswg.org/css-animations-2/#animation-timeline https://drafts.csswg.org/css-backgrounds-4/ https://drafts.csswg.org/css-backgrounds-4/#border-limit https://drafts.csswg.org/css-backgrounds-4/#border-clip https://drafts.csswg.org/css-box-4/ https://drafts.csswg.org/css-box-4/#margin-trim https://drafts.csswg.org/css-break-4/ https://drafts.csswg.org/css-break-4/#break-margins https://drafts.csswg.org/css-cascade-5/ https://drafts.csswg.org/css-cascade-5/#layering https://drafts.csswg.org/css-cascade-6/ https://drafts.csswg.org/css-cascade-6/#scoped-styles https://drafts.csswg.org/css-conditional-4/ https://drafts.csswg.org/css-conditional-4/#when-rule https://drafts.csswg.org/css-conditional-4/#else-rule https://drafts.csswg.org/css-contain-3/ https://drafts.csswg.org/css-contain-3/#container-queries https://drafts.csswg.org/css-contain-3/#container-lengths https://drafts.csswg.org/css-grid-3/ https://drafts.csswg.org/css-nesting-1/ https://drafts.csswg.org/css-shapes-2/ https://drafts.csswg.org/css-shapes-2/#shape-inside-property https://drafts.csswg.org/css-shapes-2/#shape-padding-property https://drafts.csswg.org/scroll-animations-1/ https://drafts.csswg.org/css-values-4/ https://drafts.csswg.org/css-values-4/#large-viewport-percentage-units https://drafts.csswg.org/css-values-4/#small-viewport-percentage-units https://drafts.csswg.org/css-values-4/#dynamic-viewport-percentage-units https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout https://caniuse.com/?search=css.layer https://caniuse.com/?search=css.container.queries https://caniuse.com/?search=css.masonry https://caniuse.com/?search=css.nesting https://caniuse.com/?search=css.scroll-timeline https://caniuse.com/?search=large.small.dynamic.viewport.units https://css-tricks.com/tag/layer/ https://css-tricks.com/tag/scoping/ https://css-tricks.com/tag/container-queries/ https://css-tricks.com/?s=grid-masonry-layout https://css-tricks.com/tag/scroll-linked-animation/