2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック
記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。 記事の固定幅は自由自在、画像の幅いっぱいも最大値を制限するなども簡単にでき、いろいろな応用も効く実装テクニックです。 Full-Bleed Layout Using CSS Grid by Josh Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのレイアウトにおける問題 解決策 CSS Grid 子カラムの割り当て方 子をフルブリードにする まとめ はじめに 以前、誰もが実装しようと努力したゴールドスタンダードのレイアウトがありましたが、そのレイアウトを正しく実装するのは非常に困難でした。 そのレイアウトとは、聖杯レイア
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ
FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF
レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App
レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！ Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！ Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。 ユーザーインタラクションは、すべてのデバイス間でミ
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
スクロールしたらフェードインするエフェクトをファーストビュー内の要素にも対応する方法 | oku-log
スクロールしたら要素がフェードインするエフェクト。 例えばこういうのです。 See the Pen OwMEMX by OKD (@OKD) on CodePen. 簡単に解説をすると以下のコードで要素が可視範囲に入ったら「scrollin」というクラスを付与しています。 jQuery(function(){ jQuery(window).scroll(function (){ jQuery('.fadein').each(function(){ var elemPos = jQuery(this).offset().top; var scroll = jQuery(window).scrollTop(); var windowHeight = jQuery(window).height(); if (scroll > elemPos - windowHeight + 100){ jQue
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
ドロワーメニュー
ページの隅っこにある（にほんせん）や（さんぼんせん）のアイコンをタップするとメニューがスライドしてくるの、よく見かけますね。引き出しみたいに出し入れできるメニューだからドロワーメニューとかって言います。ここではそんなドロワーメニューをCSSで作ってみます。 開閉する仕組み メニューが開閉する仕組みは、これまでのサンプル同様<input>と<label>を使った方法で、今回はラジオボタンじゃなくて、チェックボックスを使います:)。 ページ全体のHTMLの構造は以下の通り。 <body> <input type="checkbox" id="drawer"> <label for="drawer" class="open"></label> <label for="drawer" class="close"></label> <nav class="menu"> ⋮ </nav> <div c
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
Safari animation keyframes transform translate アニメーションされないバグ
CSSのkeyframesの中に、 @keyframes name { 0% {transform: translateY(0); } 100% {transform: translateX(200%);} } みたいに translateに%で指定を入れると、iPhoneで見たときに動かない場合があるんですが、これって解決法ありますか？ ちなみに、 translate以外の指定を入れる→それは動いてる%じゃなくてpxで指定する→動く何度もリロードする→たまに動く動かない状態でSafariからホームに戻る、その後もう一度Safariに戻る→動いてる（！）Chromeで確認→動かないドルフィンで確認→動かないEvernoteのブラウザ表示で確認→動かないPuffinで確認→動く（！）Android機(ブラウザ)で確認→そもそもkeyframesがしんでいたタブレットは未確認お手上げですわ……
[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー - onocom.code
.bg-image-loop { width: 100%; height: 160px; /* 画像の高さを指定 */ position: relative; background: url("//onocom.net/code/wp-content/uploads/2018/01/loop_bg.png") repeat-x 0 0; background-size: auto 100%; animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */ margin: 80px 0; padding: 0; } @keyframes bg-slider { from { background-position: 0 0; } to { background-position: -1518px 0; } /* 1518
![[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー - onocom.code](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6f38bf569d776c2cd21c0ff5cff43b481185e1d/height=288;version=1;width=512/http%3A%2F%2Fonocom.net%2Fcode%2Fwp-content%2Fuploads%2F2018%2F01%2Floop_bg.png)
写真が画面の端から端へ流れる無限ループするアニメーション 4種 | TIPS
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
CSSだけでradio chackboxをカスタマイズする内容ってほとんどがHTML構造気持ち悪いよね。 - nanndemoiikara’s diary
マークアップエンジニアの です。 CSSだけでRadioボタンの作り方みたいな内容の記事をよくお見かけしますが殆どのマークアップが気持ち悪く感じるのは僕だけでしょうか？ 大体が <section> <input type="radio" name="hoge" value="テストRadio" id="radio_item" checked /> <label for="radio_item" class="radio">TestRadio</label> </section> 繰り返す様ですが コレって気持ち悪いし使いづらいと思うのは僕だけでしょうか？ 気持ち悪いと思う点 labelタグの使い方 チェックさせる為にid属性をわざわざ振っちゃう radioボタンに紐づくtextが存在しない場合にどうする気ですか？ Tab移動意識してますか？ で、気持ち悪い気持ち悪いと言っていても問題は解
Name that Color - Chirag Mehta : chir.ag
Outer box: Your selected color. Inner box: Actual color of closest match. About Name that Color Being a typical guy, I have no clue what the colors Lavender and Mauve look like. You can show me Indigo and I won't know if it's more like Violet or Purple. So I made this little app where you can create a color on the screen (or copy-paste CSS hex# color) and find out the name of the closest matching
LazyLine: Best VPN Services
VPN What is VPN and why do you need it?VPN, or Virtual Private Network, is a technology that allows you to create a secure and private connection to the internet. With VPN, you can protect your online activities from prying eyes and access the internet with greater freedom and privacy. Learn more about VPN and why it’s essential in today’s digital world. Get Secure Now: The Honest VPN Rating Site
画像を徐々に表示する CSS アニメーション - FirstLayout
左から・右から・真ん中から画像が際立つ CSS アニメーションの紹介です。アイキャッチ画像や本文中の画像、ランディングページの画像など、いろいろな画像に使えます。 サンプルは、便宜上アニメーションの再生回数を無限にしています（提示している CSS のアニメーション回数は 1 回です）。 共通の HTML 。 <div class="img-wrap"> <img /> </div> 左から徐々に表示するアニメーション。 CSS 。 .img-wrap { overflow: hidden; position: relative; } .img-wrap::before { animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
eky.hk
デフォルトCSS一覧（たまちゃんHTMLのおうち）