has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
これが未来だ！Apple Vision Proを購入したら最高すぎてもう手放せない - すまほん!!
今回はついに日本で発売されたApple Vision Proを購入して使ってみた感想をお伝えしたいと思います。もはや最高すぎて記事はこれで書くことが多いです。 まず、MR性能の高さは特筆すべきです。パススルーは言うまでもなくカラーで良好です。周囲はモノクロなHMDの時代がもはや懐かしいですね、Quest 2とか。そしてVision Proの前面に搭載された多数のセンサーが空間を認識し、圧倒的な解像度（片目あたり3800×3000ピクセル）で「ウィンドウがぴったり本当にそこにあるかのように」表示する様子は圧巻です。パススルーは低照度で少しブラーがかかるのがやや気になりますが、それぐらいでしょうか。この画質と空間に張り付く感じは他のHMDよりも優れています。 細かい部分が本当によく作り込まれていると感じます。たとえばチュートリアルからその片鱗を味わうことが出来ます。おしゃれな円型を、視線誘導で
CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。 CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。 CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説 HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。
Visual Studio Code の Emmet機能を使ってコードを楽に書こう - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約1分程度で読めるので最後まで読んでもらえると幸いです。 はじめに コードを書くのに慣れてくると、いちいちコードを書くのが煩わしくなりませんか？ そんな時 Visual Studio Code（以下、VSCode） の Emmet機能 を使えば、HTML等、特にWEB関連のコードを書くときに補完をしてくれるため、作業効率が格段にUPします。 騙されたと思ってぜひ一度お試しくださいませ！ 設定方法 1. VSCodeを開き、画面左下の「⚙️」 > 「設定」をクリック 2. 「emmet」と検索し、画面中段にある「Emmet: Trigger Expansion On Tab」にチェック 以上になります。 どんな事をしてくれるのか？ あるコマンドを入力後、「Tab」を押す事で良しなに補完をし
蓮舫氏、まさかの3位に涙も…選対幹部「何が原因かよくわからない」：朝日新聞デジタル
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
Vite ってよく聞くけど何なんですか？ あれは
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
フルリモートで相手に気持ちよく仕事をしてもらうためのコツあれこれ
社内のプチ発表に使った資料です。 文章のコツ 前置き フルリモートでは、文章でのやり取りがメインになる。 なので、文章がヒドいと「この人と仕事するのキツイ」と思われちゃう😢 そう思われないための色々思ったことを自戒メモ。 なるべく箇条書きにする
これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
iPhone、iPad、MacにApple Intelligenceが登場
iPhone、iPad、Macの中心にパワフルな生成モデルを据えるパーソナルインテリジェンスシステム、Apple Intelligenceが登場 AIにおけるプライバシーの新しい基準を打ち立てるApple Intelligenceは、個人的な背景を理解し、各ユーザーに有用で関連性のあるインテリジェンスを提供します iPhone、iPad、MacのためのパーソナルインテリジェンスシステムであるApple Intelligenceは、生成モデルのパワーと個人的な背景を組み合わせて、有用で関連性のあるインテリジェンスをユーザーに提供します。 カリフォルニア州クパティーノ Appleは本日、生成モデルのパワーと個人的な背景を組み合わせて驚くほど有用で関連性のあるインテリジェンスを提供する、iPhone、iPad、MacのためのパーソナルインテリジェンスシステムであるApple Intelligen
CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
Chrome DevToolsにもGeminiを搭載へ。エラーの解決策などAIが支援
Googleは、日本時間5月15日から開催中のイベント「Google I/O 2024」で、デスクトップ版のChromeが備える開発ツール「Chrome DevTools」に、同社の最新版の生成AIであるGeminiを組み込むと発表しました。 これによりDevToolsのコンソールで表示されるエラーメッセージなどをGeminiが解説し、エラーの解決などを支援してくれるようになります。 DevToolsのエラーをGeminiが解決 下記がGoogle I/Oのデベロッパー向け基調講演で行われたデモ画面の一部です。DevToolsに表示されたエラーに関して、右上の「Understand this error」ボタンをクリックすると、このエラーがGeminiに送られます。
岸田総理の演説、アメリカ人に良い意味でぶっ刺さり大激論を引き起こす「西洋の友人としてこれほどの人物はいない」「こういう言い方なら一緒に働こうと思えるよ」
リンク 首相官邸ホームページ 令和6年4月11日 米国連邦議会上下両院合同会議における岸田内閣総理大臣演説 | 総理の演説・記者会見など | 首相官邸ホームページ 総理の演説や記者会見などを、ノーカットの動画やテキストでご覧になれます。 5 users 25 剣kenn @hskenncutter 東京都町田市民/酔いどれ防災士/第一種衛生管理者/好色/大食漢/毒舌/怠惰/人格者にあらず/梶原一騎主義者/タイガー・ジェット・シンになりたい/FC町田ゼルビアゆるサポ/クジラ食&イナゴの佃煮愛好家/梅干しと味噌汁/かき揚げそば中毒/超常現象肯定派/ユリ・ゲラー支持/実話系週刊誌支持派/無職の生態に強い興味を持つ
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
Open RSS
Feeds served 281,378 We offer feeds for thousands of popular websites across the internet, and we won't stop until every corner of the internet has one. The more feeds we have, the closer we all get to ditching the intrusive, ad-invested algorithmic feeds that harm and manipulate us. So we can follow internet content on our own terms, in feeds that only we control.
新築住宅に1年住んでわかった後悔ポイントとおすすめ設備 - 若くない何かの悩み
新築住宅に住み始めてから1年経過しました。この1年を振り返ってよかったポイントや後悔ポイント、おすすめ設備を紹介します。 よかったポイント 後悔ポイント トイレの照明スイッチの位置がドアに向かって左右逆だった 問題 有効そうな予防策 対応策 トイレの照明を人感センサーにし忘れた 問題 有効そうな予防策 次善の対応策 追記（2024/01/09） トイレのタンクを断水時用に貯水タンク付きにしたつもりが付いてないかもしれない 問題 有効そうな予防策 次善の対応策 予定外に常設のテレビを設置することになり準備ができていなかった 問題 有効そうな予防策 次善の対応策 リビング階段にカーテンレールつける準備ができていなかった 問題 有効そうな予防策 次善の対応策 蓄電池の容量が少なかった 問題 有効そうな予防策 次善の対応策 エコキュートが昼間に沸き上げしてくれない 問題 有効そうな予防策 次善の対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LINE Payサービス終了に関するお知らせ
漫画が爆速で完成する…韓国発「ウェブトゥーン」 生成AIで作画アシスト 目指すは「漫画界のネトフリ」：東京新聞 TOKYO Web
JR東が「Suica」をスーパーアプリ化へ、28年度にリリース
