- 投稿日：2022-02-24T22:51:53+09:00
<body>要素と<html>要素に対するbackgroundの振る舞い
<body>要素に背景色を設定すると、<body>の高さがブラウザのウインドウより小さくても背景色は下図左側のようにウインドウ全体に拡がります。これ、実は<html>要素に背景色が設定されていないからだったんですね。 実際、<html>要素にもtransparent以外の色をbackground-colorに設定してやると、<body>の矩形の外側はその色で塗り潰され、<body>の背景色は矩形の中だけになります（図右）。 CSSでbackgroundの振る舞いは、<html>要素と<body>要素に対してはちょっと特殊で、CSS仕様書のこちらに説明があります。 CSS Backgrounds and Borders Module Level 3 2.11. Backgrounds of Special Elements 2.11.2. The Canvas Background and the HTML Element 仕様に書かれた動作を理解するため、サンプルを作りました。 サンプルのコード； https://codepen.io/kaz_hashimoto/pen/bGYrRBm 1. <body>要素にのみ背景画像が設定されている場合 まずは<body>要素にのみ背景画像を設定してみます。赤い枠の矩形が<html>要素、その内側の青い破線の矩形が<body>要素です。このサンプルでは、<html>要素自身とそのコンテンツが描画される平面 —キャンバスとを視覚的に区別するため、<html>と<body>のwidthとheightをブラウザのウインドウ内側の寸法より小さく設定してあります。真ん中に「body」と書かれた青いタイル１個が<body>要素に設定した背景画像１ピースです。 このケースでは背景画像が<body>の矩形を越えてキャンバスの縦横方向に繰り返し配置されて拡がり、ウインドウ全体に敷き詰められました。 ここで、background-positionは<html>の矩形に対する相対位置になります。つまり、グレーの円の位置が(0%, 0%)すなわち(left, top)です。ウインドウや<body>の左上からの相対ではありません。 2. <html>要素にのみ背景画像が設定されている場合 次に、<html>要素にのみ背景画像を設定してみます。真ん中に「html」と書かれたグレーのタイル１個が<html>要素に設定した背景画像１ピースです。 このケースも１と同様に、背景画像が<html>の矩形を越えてキャンバスに拡がり、ウインドウ全体に敷き詰められました。background-positionは１と同様、<html>の矩形に対する相対位置になります。 3. <html>要素と<body>要素の両方に背景画像が設定されている場合 では、<html>要素にも<body>要素にも背景画像を設定するとどうなるでしょうか？（下図） この場合は、<body>要素の背景画像は<body>の矩形に閉じて敷かれ、background-positionは<body>の矩形に対する相対位置になります。一方、<html>要素の背景画像はキャンバスの背景にも拡張されて、background-positionは<html>の矩形に対する相対位置です。 冒頭の図右側に示した状態は、上の説明で背景画像をbackground-colorに当てはめたものに相当することがわかります。
- 投稿日：2022-02-24T20:49:00+09:00
CSSの:has()のポリフィルがあったので試してみた
この記事の概要 CSS を書いていて「.childクラスを持っている要素だけスタイルを変えたいんだよなあ」なんてシーン、ありませんか？ 私はしょっちゅうあります！ Selectors Level 4 では:has()という疑似クラスが定義されていて上記の夢を叶えてくれるのですが、Can I use...を見るとほぼ全滅です。 2022年2月24日時点の結果は以下をご覧ください。 そんな:has()ですが、ポリフィルを見つけたので試しに使ってみた記事です。 使い方 といっても公式ドキュメントに書いてあることぐらいしかやっていません。 一応実験してみたリポジトリを公開しているので、以下を触っていただいてもOKです。 準備 以下のようなHTMLとCSSを用意しました。（話を簡単にするために一部を省略しています） トライしていることは以下の2点だけです。 h2の色を#55c500にする ただし、spanを持つh2は#4097dbにする index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css"> <title>:has() polyfill</title> </head> <body> <div class="container"> <h1>:has() polyfill test</h1> <div class="contents"> <h2> I have <span>span element</span>. </h2> <h2> I don't have span element. </h2> </div> </div> </body> </html> style.css h2 { color: #55c500; } h2:has(span) { color: #4097db; } なお、現段階ではどちらのh2も#55c500のままですが、これであっています。 実際に動かす ひとまずテストなのでnpxで実行します。 ターミナル npx css-has-pseudo style.css --output dist.css するとdist.cssが生成されます。 元のCSSから変更のあった箇所だけを抜粋すると、以下のようになります。 style.cssとdist.cssの差分 h2 { color: #55c500; } + h2[\:has\(span\)] { + color: #4097db; + } h2:has(span) { color: #4097db; } + /*# sourceMappingURL=data:application/json;base64,以下は省略 */ 次にHTMLを編集します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="dist.css"> + <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script> + <script>cssHasPseudo(document)</script> <title>:has() polyfill</title> </head> <body> <!-- 省略 --> </body> </html> そして何かしらサーバーを立ち上げてHTMLを確認してみます。 するとどうでしょう。見事spanを子要素に持つh2だけが#4097dbに変わりました。 起きていること サーバーを立ち上げた後のHTMLを見てみると、元のコードから変わっている箇所があります。 index.html <body> <div class="container"> <h1>:has() polyfill test</h1> <div class="contents"> - <h2> + <h2 :has(span)=""> I have <span>span element</span>. </h2> <h2> I don't have span element. </h2> </div> </div> </body> そして先ほどのCSSの差分をもう一度見てみましょう。 再掲、style.cssとdist.cssの差分 h2 { color: #55c500; } + h2[\:has\(span\)] { + color: #4097db; + } h2:has(span) { color: #4097db; } + /*# sourceMappingURL=data:application/json;base64,以下は省略 */ spanを持っているh2だけを探して:has(span)というattributeを付与し、それをセレクターとして活用しているようです。 Attribute selector自体はどのブラウザでも動きますから、安心して使えそうです。 余談ですが、titleとかhrefとか、ちゃんと存在するattributeでなくてもセレクターとして使えるのを初めて知りました。 実践投入できる？ 内容自体は良いかなと思ったのですが、コマンドに--watchのようなオプションが見当たりませんでした。 変更する度にコマンドを叩くのは流石に骨が折れますし、他との兼ね合い（Sassのコンパイルなど）もあってどうしようか悩み中。 今の私の力だけでは難しそうでしたが、上手いことやればできそうな気もする……という不完全燃焼な記載をここに残します。 なお、調べたついでに存在するオプションを一覧にしておきます。 -o, --output Output file -d, --dir Output directory -r, --replace Replace (overwrite) the input file -m, --map Create an external sourcemap --no-map Disable the default inline sourcemaps -p, --plugin-options Stringified JSON object with plugin options
- 投稿日：2022-02-24T19:25:16+09:00
森和恵とウェブ制作を学ぼう! でWebフォントサブセット化を学んだ。
もはや定番とかした動画で学ぼうシリーズ リファレンスサイト 森和恵さんです。 他にも、ワードプレスの環境構築とかで物凄い参考になる動画があります。 動画の内容 目的：フォントをサブセット化することで、フォントの読み込み速度を高速化することができる。 その手順を紹介してくれています。 大まかな動画のながれ 外部のwebfontをダウンロードする。 フォントをサブセット化してファイルを軽くする。 ファイルの拡張子をttfファイルをwoff2ファイルに圧縮する 作成したwoff2ファイルでfontを変更する。 最後にgoogleフォントを利用の仕方。 1.webfontをダウンロードする ダウンロードサイト トップページからダウンロードできる。 2.フォントをサブセット化する。 フォントのサブセット化とは、利用するフォントだけをピックアップしたファイルを作成することでファイルを軽くすることができます。 変換するツール 変換手順 作成元ファイルはダウンロードしたttfファイルのTanukiMagic.ttf 作成後のファイルは同じパスでファイル名ををTanukiMagic.mini.ttf 3.ttfからwoff2に変換する 変換することでファイルが圧縮され軽くなります。 変換ツール どれだけ圧縮されるのかを確認してみる。 ダウンロードしたttfファイルを変換前ファイルにセットしてwoff2にチェックをいれるだけ。 ttfファイルと同じ場所にwoffとwoff2ファイルを作成してくれる。 先ほど、サブセット化したttfファイルのTanukiMagic.mini.ttfをwoff2に変換する。 TanukiMagic.mini.woff2以外のファイルは不必要なので削除する。 4.作成したwoff2ファイルでfontを変更する。 @font-faceで外部フォントを有効化できる。 <!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> <!-- reset.css destyle --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> <style> /* 基本文法 */ /* @font-face { font-family: 利用する時の任意の名前; src: url("woffファイルの相対パス")format("woff2"); } */ /*+*/ @font-face { font-family: "TanukiM"; src: url("./css/TanukiMagic.mini.woff2")format("woff2"); } body { padding: 50px 20px; } h1 { font-size: 24px; } /*+*/ .tanuki-font { font-family: 'TanukiM'; } </style> </head> <body> <main> <h1 class="tanuki-font">あけましておめでとうございます</h1> <h1>あけましておめでとうございます</h1> </main> </body> </html> 5.googleフォントを利用する。 1.googleフォントのサイト 2.カテゴリー等でフォントを検索できる。 3.フォントがどの文字の大きさに対応しているかも確認できる。 font-weight:boldで文字の大きさを変更できるがfontによっては潰れることもあるとのこと。 リンク先で細かく確認できる。 前は一覧画面からリンクを取得できたが、今はリンク先画面からfontリンクを取得する。 目的の文字の大きさのを選択する 選択したらナビバーのリンクをクリック リンクとフォント名が取得できる。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- reset.css destyle --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> <style> /*importを使用した場合 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap'); @font-face { font-family: "TanukiM"; src: url("./css/TanukiMagic.mini.woff2")format("woff2"); } body { padding: 50px 20px; } h1 { font-size: 24px; } .tanuki-font { font-family: 'TanukiM'; } /*+ */ .google-fonts{ font-family: 'Noto Sans JP', sans-serif; } </style> </head> <body> <main> <h1 class="tanuki-font">あけましておめでとうございます</h1> <h1>あけましておめでとうございます</h1> <h1 class="google-fonts">あけましておめでとうございます</h1> </main> </body> </html> 一番下がgoogleフォント googleフォントをサブセット化する リファレンスサイト urlにtext=subset化したい文字を記述するだけ。 めだけはずしてみた。 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap&text=あけましておでとうございます。'); 上記サイトには使わない文字列だけ除外してサブセットファイルを作成する方法も記述してあります。 方法は全くおなじですが、頻出文字列のサンプルを載せてくれています。 Webフォントの表示を最適化するテクニック リファレンスサイトというか丸写ししています。 font-displayプロパティを使用する 動画でもあるように、重たいfontsファイルを指定するとダウンロードされるまで、 文字が描写されません。その問題を解決するプロパティです。 /* swap値は、Webフォントが読み込まれるまでの間、 フォールバックのフォントを使用してテキストを表示するようにブラウザに指示します（つまり、FOUTを優先）。 これに5秒かからろうか5分かかろうが、フォントが読み込まれるとすぐにスワップされます。 そのためWebサイトを訪問したユーザーがすぐにコンテンツを読み始めることができるため、優れた値です。 ただし、Webフォントに入れ替わった時にレイアウトが大きく変化しないように、 必ず同様のフォールバックを選択してください。 要するに明朝体なら明朝体とかだと思う。同じ太さとかをフォールバックにおいておけばよさそう。 */ @font-face { font-family: 'Typefesse'; src: url('typefesse.woff2') format('woff2'), url('typefesse.woff') format('woff'); font-display: swap; } フォールバックとは、カスタムフォントの後に指定しているシステムフォントのことです。 p { font-family: "Open Sans Regular", "Helvetica", "Arial", sans-serif; } Webフォントをプリロードする 注意点 preloadを使用すると、その動作が無効になり、フォントが使用されていなくてもブラウザにフォントをダウンロードさせることになります。そのため、プリロードするフォントのフォーマットは1つだけにしてください（woff2を推奨） <link rel="preload" href="/typefesse.woff2" as="font" type="font/woff2" crossorigin> hrefは相対パスでいいみたい。 これでプリロードができていました。 <link rel="preload" href="./css/TanukiMagic.mini.woff2" as="font" type="font/woff2" crossorigin> <style> @font-face { font-family: "TanukiM"; src: url("./css/TanukiMagic.mini.woff2")format("woff2"); } .tanuki-font { font-family: 'TanukiM'; } </style>
- 投稿日：2022-02-24T09:51:30+09:00
React + Styled-components(CSS )
簡単な動きのあるローディング作成 以前作成した下記記事の環境からスタートします。 リセットCSS import React from "react"; import { Reset } from "styled-reset"; const App = () => { return ( <> <Reset /> <h1>Hello World</h1> </> ); }; export default App; yarn add styled-reset 今回は、Reactで使えるリセットCSSを使用 ※デバイスやブラウザによってデフォルトのスタイリングがついてしまうので、忘れないためにも記載してます。 styled-components yarn add styled-components @types/styled-components app.tsx import React from "react"; import { Reset } from "styled-reset"; import styled from "styled-components"; const App = () => { return ( <> <Reset /> <StyledHello>Hello World</StyledHello> </> ); }; export default App; const StyledHello = styled.h1` font-size: 50px; text-align: center; `; yarn startを実行しHello Worldが真ん中に表示されていたらOK！ - <h1> → <StyledHello>(自分で命名可能) - styled.の後に要素を指定 - バッククウォートで囲った中にCSSを記入 ローディング import React from "react"; import { Reset } from "styled-reset"; import styled, { keyframes } from "styled-components"; const App = () => { return ( <> <Reset /> <StyledHello>Hello World</StyledHello> <Load>Loading</Load> </> ); }; export default App; const StyledHello = styled.h1` font-size: 50px; text-align: center; `; const opacityLoad = keyframes` 0% { left: 0; opacity: 0; } 10% { left: 10%; opacity: 0.5; } 30% { left: 30%; opacity: 1; } 50% { left: 50%; opacity: 1; } 70% { left: 70%; opacity: 0; } 100% { left: 100%; opacity: 0; } `; const Load = styled.p` animation: ${opacityLoad} 2.3s linear infinite; font-size: 50px; position: relative; width: 300px; `; yarn startを実行し、左から右に動くLoadingが出ていればOK！ - styled-componentsから{ keyframes }を追加(アニメーション) - 透明度をopacityLoadに記載して、LoadにopacityLoadを追加 最後に styled-componentsを導入することで、HTMLとCSSの要素を1つのファイルで見れるのは、非常に管理しやすいです。また、HTML,CSSよりもクラス名などで困ることが少ないのもメリットかなと思います。 参考文献