そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024/04/02 127 users Sass Has カスケードレイヤー ワークフロー 変数

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む

2024年のCSSの書き方、ワークフローとツールについて

2024/01/18 207 users ワークフロー CSS Flexbox subgrid ブラウ

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

分岐を丁寧に扱わなければならない理由とその方法

2023/10/15 9 users 分岐 ソフトウェア設計 理由 コード 方法

はじめに この記事ではソフトウェア設計において 分岐を雑に扱うとどうなるのか 分岐を丁寧に扱うため方法とは 分岐を丁寧に扱うと何が得られるのか についてまとめました。 分岐を雑に扱うとどうなるか？？ まずはこちらのコードをご覧ください。 ❌分岐がネストになって読みづらいclass DeliveryUseCase { fun deliver... 続きを読む

【第5弾】少しのコードで実装可能な10のCSS小技集

2023/09/07 100 users 実装 CSS小技集 コード アスペクト比 目次

2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定... 続きを読む

これでよく分かる！ 2023年、CSSとUIの新しい機能のまとめ

2023/05/25 181 users CSS カスケードレイヤー コンテナクエリ 三角関数 広色域

2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラース... 続きを読む

CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説

2023/04/19 27 users CSS Sass CSSプリプロセッサ ネス ブラウザ

CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネス... 続きを読む

Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！

2023/04/12 11 users 変数 CSS Sass 演算子 数値

2023年4月12日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらい... 続きを読む

「Google Chrome 112」安定版リリース、CSSがネストに対応

2023/04/05 5 users CSS developer.chrome.com Blog

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン112.0.5615.49(Linux版・Mac版)・112.0.5615.49/50(Windows版)がリリースされました。この更新からCSSがルールのネスト(入れ子)に対応するようになりました。 New in Chrome 112 - Chrome Developers https://developer.chrome.com/blog/new-in-chrome-112/... 続きを読む

VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

2023/02/27 369 users CSS ボーダー PHP HTML カスタマイズ

HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズ... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users Sass CSSネスト CSSコーディング CSS ブラウザ

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。 続きを読む

JavaScriptの上限・限界値 - Qiita

2022/05/30 151 users 引数 配列 最長 関数 Qiita

JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です... 続きを読む

Unityタイトルにおけるシーン設計での技術的負債の返済例 | CyberAgent Developers Blog

2021/06/29 7 users 負債 爆増 経緯 リードエンジニア 負債化

GOODROIDでリードエンジニアをさせて頂いています及川です。 今回は技術的負債を設計で返済した経験をもとに、 負債化した原因から全シーン単一起動可能な設計によって解決に経った経緯を書きました。 負債の顕著化 技術的負債は、ネストの深いシーンのデバッグ工数が爆増という形で顕著化しました。 シーン起動に必要な... 続きを読む

【Excel】IF関数より手軽に条件分岐！ SWITCH関数で上手に時短 - おいしさ発見メディア「furi-kake（フリカケ）」

2019/12/24 14 users 関数 furi-kake データ集計 以下 処理

Microsoft Excel（以下、Excel）の関数の中でもよく使われるIF関数。指定した条件にしたがって処理を分岐させられますが、複数条件を指定すると関数の式が複雑になります。 IF関数を同時に複数用いることを「入れ子構造」「ネスト」などと呼びますが、今回はネストせずシンプルに複数条件を指定できて、データ集計の作業... 続きを読む

ラーメンで理解するasync/await - Qiita

2019/12/18 5 users await async Qiita Promise 手法

JavaScript 2 Advent Calendar 2019 の19日目の記事です。 対象 async/awaitがなんだかはある程度知ってる人 async/awaitをなんとなくで使ってる人 そもそもasync/awaitって？ async/awaitは、Promiseによる非同期処理をより簡潔に効率よく記述できる手法。 普通にPromiseを使うとネストが深くて辛くなるのを救ってくれ... 続きを読む

パナソニックにグーグル幹部　外部人材の登用相次ぐ　　:日本経済新聞

2019/10/16 177 users 登用 パナソニック グーグル幹部 外部人材 バイスプレジデント

パナソニックは17日付で米グーグルのバイスプレジデントの松岡陽子氏（48）を役員待遇で迎え入れる。松岡氏はロボット工学の専門家でグーグルでスマートホーム事業「ネスト」を率いた実績があり、その手腕を「つながる家電」などに生かす。同社はビジネスモデルの変革のため外資系企業などから人材を相次ぎ採用している... 続きを読む

[アップデート]Step Functions ステートマシンのネストが可能になりました！ ｜ DevelopersIO

2019/08/14 12 users ステートマシン Announcement ワークフロー 下位

Step Functionsにアップデートがあり、ステートマシンのネストが可能になりました！ Announcement: AWS Step Functions Adds Support for Nested Workflows これにより、上位／下位でワークフローを分離でき、モジュールのように再利用可能になります。また、複雑さの軽減も期待できると思います。 早速試してみたいと思... 続きを読む

KotlinでProGuardを使う時にapplyなどのスコープ関数内で無名関数のネストが深くなるとビルドに失敗するバグ - Qiita

2019/01/19 27 users apply Qiita Kotlin Proguard 地獄

なんか辛い現象を踏んでしまって地獄を見たので日本中のAndroidエンジニアに知ってほしいと思い筆を取りました。(誇張表現) タイトルどおりなのですが、Kotlinを使ったAndroidプロジェクトでProGuardを有効にしたところ、ビルドに失敗してしまうようになりました。 原因が全然掴めなくて頭を抱えたのですが、いろいろ検... 続きを読む

僕はドキュメントを読むのが苦手 - Mitsuyuki.Shiiba

2018/05/10 10 users スタック Mitsuyuki.Shiiba 雑記 箇所 複数

2018 - 05 - 11 僕はドキュメントを読むのが苦手 雑記 頭の中にスタックが3つしかないからネストは3つまでがいいし。リンクを辿って色んなところに飛ぶと戻ってこれないし。こういう意味にも取れるけどどっちだろう？とかなるし。似たようなことが複数の箇所に書いてあると目diffをしてしまうし。気が散りやすいし。 自分にとって読みやすいドキュメントを書く だから、書くときは「自分が頑張らなくても... 続きを読む

第35回　コンテナのネスト［1］：LXCで学ぶコンテナ入門 －軽量仮想化環境を実現する技術｜gihyo.jp … 技術評論社

2017/07/18 19 users Ubuntu LXC Linuxカーネル root権限 応用例

前回 は， 名前空間ごとに仮想化したcgroupツリーが見える， Linuxカーネルの cgroup名前空間 という機能を紹介しました。 今回はそのcgroup名前空間の応用例を紹介することを兼ねて， コンテナ内でコンテナを動作させてみます。つまりコンテナをネストさせて遊んでみようという企画です。 今回はroot権限で動作するコンテナを使ってネストを試してみます。試している環境はUbuntu 16... 続きを読む

Excelで「IF」関数の組み合わせを不要にする新関数「IFS」【2017年6月30日】 | できるネット

2017/06/29 12 users IFS 関数 Excel エクセル時短 ワザ

Excel 2016の新関数「IFS」 おすすめ 【エクセル時短】もう「IF」のネストは不要。新関数「IFS」で複数の条件指定を手早く済ます Excelで複数の条件を判定したいときに、「IF」関数を組み合わせるよりも簡単な「IFS」関数を紹介します。 「メモ帳」の作業記録に役立つワザ おすすめ 【Windows 10】「メモ帳」を超便利な作業記録ツールにする2つの裏ワザ Windowsの「メモ帳」... 続きを読む

【エクセル時短】もう「IF」のネストは不要。新関数「IFS」で複数の条件指定を手早く済ます | Excel | できるネット

2017/06/28 44 users IFS IFS関数 イブ 関数 Excel

セルの値によって異なる結果を求める。Excelでよく行う作業ですね。 従来、複数の条件を判定したい場合は「IF」（イフ）関数の組み合わせ、つまりネストすることで求めていました。これがExcel 2016では、 「IFS」（イフエス）関数 によって1つの関数で行えます。 【 エクセル時短 】第16回では、Excel 2016の新関数「IFS」を解説します。 ※IFS関数はExcel 2016に加えて... 続きを読む

箇条書きより見出しを好め - koicの日記

2017/03/12 11 users koic ESA 箇条書き 大見出し リファクタリング

2017 - 03 - 09 箇条書きより見出しを好め Wiki や esa なんかでひたすら箇条書きで記されているのを、最近たびたび見かけるようになった気がしたので話していた、文書構造の リファクタリング テクニックとなる。 基本は一番浅い箇条書きを大見出しにして、ネストを一段ずつ下げるといったものでざっくり以下のような図解で話していた。以下の例では大見出しになったものをタイトルとしており、中見... 続きを読む

HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説 | コリス

2016/12/13 112 users コリス section要素 HTML アウトライン 事例

2016年11月1日に、 HTML 5.1 が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したも... 続きを読む

現場で役立つ実践Sass（2）セレクタをもっと便利に書く | Adobe Creative Station

2016/01/27 54 users セレクタ Sass 実践Sass Tips CSS

Sassの便利な機能としてまず最初に挙げるとすれば、セレクタをネストして記述できることでしょう。 ネストできることにより、CSSでは繰り返し書く必要があった子孫セレクタをまとめて書くことができ、記述量が減って、コードの見通しも良くなります。ネストができないCSSにはもう戻れないという方も多い…はず。 第二回目の今回は、セレクタ周りのTipsを紹介します。 ※今記事はRuby Sass 3.4.21... 続きを読む

Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid | コリス

2015/03/05 116 users Flexbox コリス カラム グリッド 天地

企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉...記事の続きを読む 続きを読む