CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！
2023年はついに、CSSで三角関数が主要ブラウザのすべてで使用できるようになります！ CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされており、3月リリースのChrome 111でもサポートされる予定です。 CSSの三角関数を使用すると、複雑なアニメーションに使用するJavaScriptを減らしたり、要素を曲線に配置するレイアウトなどもCSSで実装できます。 Chrome Platform Status CSS Trigonometric functions（三角関数）はCSS Values and Units Module Level 4ですでに定義されています。 sin() 引数として与えた数のサイン ボックスのサイズ
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
████を退職します - uhyo/blog
この記事はuhy.oooでも読むことができます。 ████を退職します皆さんこんにちは。この度、████を退職することになりましたのでご報告します。 筆者は2019年に新卒で████に入社して、今年が4年目でした。今回が初めての転職となります。転職先は███という会社です。 ████はどうだったか一言で言えば、良いところでした。特に、チームメンバーと上司に恵まれ、快適かつとても自由な環境で働くことができました。 快適というのはいくつかの側面があります。自分としては、大きい会社ならではの整った社内制度・社内システムは魅力的でした。これにより、事務的な作業はなるべく事務的かつ簡潔に済ませられるようになっていて業務に集中できます。他には、プロジェクトメンバーとのコミュニケーションにおいてストレスを感じることもあまり無く（██████████████████████）、これだけ良い人ばかり集まって
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
「CSS完全に理解した」でCSS完全に理解する - Qiita
1：導入 例の「CSS完全に理解した」Tシャツ。 色々な方が話している通り、あれを意図的にやろうとすると実はなかなか難しい。 むしろ、「CSS完全に理解した」を再現するコードを書くたびに我々はCSSの完全理解に近づけるんじゃ無いだろうか？ CSS完全に理解したでCSS完全に理解すればもっとCSS完全に理解したできるんじゃ無いか とにかく何かよくわからない追求心にとらわれた我々（約1名）は「CSS完全に理解した」を理解するために色々な方法でこれを再現することにしました。 以下に「CSS完全に理解した」するための数々の方法について書いていこうと思います。 2：前提 前提条件が限定されていないと無限の「CSS完全に理解した」状態を作り出せることになってしまうので、 今回は以下の画像のように、まず、「CSS完全に理解したわけではない」状態を再現し、ここに手を加えることで「CSS完全に理解した」状態
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
バイキング - アンサイクロペディア
この項目では、アトラクションについて説明しています。ヴァイキングについては「海賊」を、定額で自由に好きなだけ食べられる食事については「食べ放題」を、お笑いコンビについては「バイきんぐ」をご覧ください。 概要 このアトラクションの仕組みは至ってシンプルで上がり下がりを繰り返すだけである。最近では加速が速かったり、一回転したりするものもあるが基本的に巨大なブランコであることに変わりはない。他の特徴はジェットコースターが土台から建設されているのに対して、バイキングは設置型のアトラクションなので持ち運びできる。つまり仮に閉園したとすると、遊園地と一心同体で錆びつき滅びを待つだけか解体されて鉄くずになるかどちらかの最後しか迎えられないジェットコースターと比べると、バイキングはどこかに置かれる可能性がある。 歴史 遊園地の花形と言われているジェットコースターと比較するとその歴史はものすごく浅いものでジ
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
Bootstrap 4
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! Words cannot begin to describe the elation the entire team and I have for this release, but I’ll do my best. Thank you to everyone, especially to the team, and to everyone who’s contributed co
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように
マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの「MDN web docs」にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN（Microsoft Develpers Network）、GoogleならChromeのWebサイト、MozillaならMDN（Mozilla Developer Network）のWe
テキストエディタでWebサイト構築をガンバル人へ（1/3） ― ＠IT
テキストエディタでWebサイト構築をガンバル人へ：どこまでできる？ 無料ツールでWebサイト作成（6）（1/3 ページ） 「あえて」テキストエディタでWebサイト構築 今回はテキストエディタと組み合わせることで、開発をより便利にできるツールについて考えてみよう。 現在「あえて」テキストエディタでの開発を行われている方には、現在使っているエディタを選択するまでの“経緯”や“こだわり”があると思う。筆者もこれまでにさまざまなテキストエディタを試し、「この程度のもので十分だ」と感じるテキストエディタを現在使っている。 テキストエディタ＋α そこで今回は、テキストエディタ自体とそのプラグイン／拡張機能に関する紹介は行わないこととし、「どのようなテキストエディタを使っている場合でも、組み合わせて使うことでより簡単にWebサイト構築ができるツール」という観点で紹介したいと思う。もちろん、Webオーサリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap3日本語リファレンス