セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。コピー2023.09.07こんにちは。Explorer(IE)の廃止をきっかけに、新しいCSSプロパティやAPIが各所で紹介されるようになりました。APIあたりが主要ブラウザで使えるようになったのは嬉しかったですね。紹介されるプロパティは本当にすぐに案件で使っていいのでしょうか?答えはNOです。新しいプロパティは、みなバズりたい欲で我こそ一番手だと記事やXの投稿をしますが多くの場合主要ブラウザの一部が対応していないタイミングで紹介されます。Safariが対応していないことが多く、これでは案件で使えませんよね。後で気づいたら修正になるのでかなり面倒です。Web制作やWeb開発をやっている方は必ず主要ブラウザで利用可能なのか確認しましょう。実際にブラウザで確認しても良いですが、バージョンやデバイス違いまで含めるとあまり現実的ではないです。Use」を紹介したいと思います。これを知っていれば技術を正しく使えるエンジニアに一歩近づきます。Useは、Webに関する技術のブラウザ対応状況を一覧で確認できるサービスです。各ブラウザ名が横に並んでいて、それぞれのバージョン情報が縦に並んでいます。緑が対応済、赤が未対応、黄緑で縞模様なのが一部対応(後述)となります。https://caniuse.com/css-cascade-scopeこの画像は最近話題の@scope記法ですが、ほぼ全て真っ赤ですね。案件で使えるようになるにはまだしばらくかかりそうです。@scopeについてはこちら。対応されていないブラウザがないかある程度前のバージョンでも対応しているかどうか最新バージョンは対応されていたとしてもユーザー全員が最新版にアップデートしているとは限らないからです。確認したいプロパティやAPI名で検索するcaniuse.comにアクセスして、ブラウザ対応状況を確認したいものを検索します。各ブラウザ、バージョンの対応状況を確認する検索して対象のものが見つかれば一覧表が表示されます。黄緑で縞模様:一部対応となります。object-position(MDN)はIE以外は全て対応していますね。background-attachment(MDN)はどうでしょう。画像中央、iOSのSafariが綺麗に真っ赤ですね。パララックスデザインを実装するのによく紹介されるプロパティですが、これでは案件には使えなさそうです。このように、比較的有名なプロパティでも実は主要ブラウザで対応されていないものがあります。確認するようにしましょう。fixed;がスマホ(iOSのSafari)で効かない問題を完全に解決する【CSSのみ】こんにちは。fixedがスマホ、特にiOSのSafariで動かない問題を回避するための方法を書いていきます。最初にコードを載せて...itokoba.com2022.02.23ブラウザのシェア、リリース日を確認するさて、「主要ブラウザの新しいものなら対応されている」場合があります。その場合案件で、「どのバージョンまで対応されていたら許容とするか」を決めるのにブラウザのシェア率やリリース日は重要な判断材料になります。Versionの欄を見るとリリース日、シェアが分かります。116は2023/08/15リリースで全体の5.72%のシェアを持っているようです(2023/09/07現在)。Global:全体に対するシェアが書かれています。これを参考に考えましょう。「未対応ブラウザのシェアが1%を切っていれば許容とする」だったり、「未対応ブラウザのリリース日が2020年以前なら許容とする」などです。「一部対応」が具体的にどう対応されているか確認する黄緑の縞模様ブロックは、一部対応されていることを表します。Info、もしくは下部の「Notes」に列挙されています。ブロックの番号とNotesの番号が対応しています。9.1ではobject-fitは対応していたもののobject-positionは未対応だったようです。このように、特定の使い方に限っては利用可能な場合があるのでこれも必ず確認しましょう。使う予定の方法が対応されていればもちろんプロダクトに実装してOKですからね。Web制作を学んでいる段階ではなかなかブラウザ対応に違いがあることを意識するのは難しいでしょう。案件という目線ではこういった細かい話や教材ではなかなか語られない内容が致命的なミスになりクライアントの利益を毀損する場合があります。逆に細かいところに気を配れると、クライアントにも信頼され継続的なお付き合いがしやすくなります。関連記事Web制作を学ぶ月5万円を目指すプログラミング・Web制作学習者に求められるスキル先日HTML/CSS/jQueryを学べば1ヶ月で月5万稼げるようになる!とかいうアホなツイートを見かけまして、つい僕も心の声が漏れてしまいました。いうわけで、今回は月5万円を「安定して」稼ぐ上で「本当に」必要な能力は何なのかを考えてみ...2022.10.08Web制作を学ぶWeb制作を学ぶWebサイトで実際に表示されているフォントが何か確認する方法みなさん、Webサイトを見ていて「このフォントなんて名前なんだろう?」と気になったことってありますよね。Web制作をしているコーダーやデザイナーの方であれば「ちゃんとCSSで指定した通りにフォントが表示されているかな?」と不安にな...2024.07.08Web制作を学ぶWeb制作を学ぶ【2024年版】おすすめVSCode拡張機能11選と、実はもう不要なもの4選【Webエンジニア必見!】Web制作やWeb開発をしている方の多くはコードエディタにVSCodeを採用していますよね。シェア率70%を超えているという調査もあるほどです。その一因は、拡張機能で自分好みにカスタマイズできるからでしょう。一方でデフォルトの機能も...2024.08.27Web制作を学ぶWeb制作を学ぶ単なるHTML/CSSだけのプロジェクトでもホットリロードする方法こんにちは。Web制作領域だと、LPのようにわざわざwebpackやviteなどのビルド/バンドルツールを使うほどでもないプロジェクトだけどホットリロードは欲しい!って時ありますよね。そんな時に簡単にホットリロードを行う方法です。...2022.12.12Web制作を学ぶWeb制作を学ぶ2022年、Web制作に役立つ記事まとめこんにちは。そこで僕が今年書いた記事の中で、特に多く読まれた記事をまとめたいと思います。今年の振り返りも兼ねて、ぜひ見ていってください。今年の初めに書いた記事ですね。いろんなスク...2022.12.29Web制作を学ぶWeb制作を学ぶプログラミングを学ぶのに本はいらないのか【おすすめの本も紹介】こんにちは。ここ数年、各種言語に関してはWebだけでも相当いろんな教材や記事が見られるようになりました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。秀樹フリーランス8年目|「世界一初心者に優しい」→セカヤサ。初心者が5年後も10年後も仕事を奪われない人になるための発信中。最新情報まとめWeb制作役立ちツールホーム検索トップサイドバータイトルとURLをコピーしました。