想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
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
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
CSSのz-index: 10000;はいらなくなる、要素を最上位に表示する「最上位レイヤー（top layer）」の基礎知識と使い方
ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際のデモをご覧ください。 See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen. 1つ目の「DOM構造」と2つ目の「サイトマップ」の実装は、基本的には同じです。順番に見てましょう。 DOM構造のツリービュー HTML 1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は「DOM構造」では<code>、「サイトマップ」で
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート
ページ上の要素、例えばメニューの中身などの表示・非表示を切り替える必要がある時があります。実装方法はいろいろありますが、要素を非表示にする一番簡単な方法はHTMLのhidden属性です。 HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシートを紹介します。 The 'hidden' Attribute is Visibly Weak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTMLのhidden属性の使い方と弱点 要素の表示・非表示を切り替える便利なスタイルシート HTMLのhidden属性の使い方と弱点 HTMLには、hidden属性というあなたが期待する通りの機能があります。
いよいよ？まだまだ？IE11のサポート終了までのカウントダウンが始まる
Web制作において悩みの種の一つが、IE11のサポートです。 main要素に垂直方向のmargin, paddingが効かない、CSS Grid、変数、@supportsなど、IE11が足かせになって使用に躊躇している人も少なくないと思います。 IE11のサポート終了までのカウントダウンが始まりました。 IE11のサポート終了までのカウントダウン IE11は、Windows10にインストールされて出荷されていたため、サポート期間もWindows10のライフサイクルと同じです。 IE11がサポートしていない機能でも、対応策はあります。IE11をサポートするから使用しない、というのはあまり理由にはならないですね。 main要素に垂直方向のmargin, paddingが効かない main要素がinline要素として扱われているため、display: block;を定義する。 CSS Gridの
ショッピングサイトで見かけるダークパターンのまとめ | コリス
たくさんのショッピングサイト、オンラインショップがあります。良心的なサイトもたくさんありますが、意図しない購入や申込に誘導・欺くサイトもあります。利用者として、そして制作者として、気をつけたいダークパターンを紹介します。 料金に手数料が加えられていたり、メール配信が知らない間に申し込まれていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックできないみたいに表示されてたり、さまざまなダークパターンが存在します。 Dark Patterns at Scale by プリンストン大学とシカゴ大学の研究者によるレポート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Sneaking -スニーキング Urgency -アージェンシー Misdirection -ミスディレクション Social proof -ソーシ
2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
知ってると便利！HTML, CSS, JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ
フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。 Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。 Text editing techniques every Front-End developer should know 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 2つのコードを入れ替える 2. エディタでコミット 3. タスクランナーの実行 4. サイドバーを開閉 5. コードを移動 6. 行単位の選択 7. ぎざぎざに選択 8. 選択したワード
[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。 こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。 まずはおさらい、CSSのボックス モデル 「display: contents;」を使用すると、どうなるか 「display: contents;」について詳しく解説 「display:
![[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/377c5eeb9c23ceb8880cd655b04f3d4733502acc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018040106.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
