そろそろ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、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

【第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の新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラース... 続きを読む

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) です... 続きを読む

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

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

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

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を勉...記事の続きを読む 続きを読む

コードのネストを深くするな | anopara

2014/08/15 407 users result anopara else int a コード

昔の記事にも書いたのだが、ソースコードのネストは小さければ小さいほど読みやすい。 ではどうするか。一つは、returnできるところでさっさとreturnするというのが良いだろうと思う。 たとえば、 public int func1(int a, int b) { int result; if (a > 10) { if (a > 20) { if (a > 30) result = b; else... 続きを読む

とあるエンジニアの備忘log: LinuxカーネルのMakefileを解析する その2

2014/07/07 54 users Makefile Linuxカーネル Linux エンジニア

2012年2月12日日曜日 LinuxカーネルのMakefileを解析する その2 前回は、LinuxのトップのMakefile の一番外のネスト ifeq ($(skip-makefile),) について説明しました。 その内部にさらにわかりにくい部分があります。 トップのMakefile の400行目付近からは以下のようなコードになっています。 # To make sure we do not... 続きを読む

[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js | コリス

2013/03/13 124 users コリス jQuery スクリプト アニメーション 実装

複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組み... 続きを読む

ネストを覚えた人のためのSassの便利な使い方

2013/02/04 101 users Sass 使い方

10 Favorites keiko kudo, Designer at Bleunote Design,home 1 day ago Kumi Morita, Graphic & Web Designer at Coara 2 days ago Kei Sato 2 days ago kashima kiyoto, front-end-engineer 3 days ago Akira Ito,... 続きを読む

Deferred/Promisesと非同期処理 - 素人がプログラミングを勉強していたブログ

2012/12/30 170 users Promises Deferred プログラミング 概念 実装

2012-12-30 Deferred/Promisesと非同期処理 概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装... 続きを読む

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 ｜ クラスメソッド開発ブログ

2012/10/23 266 users Webデザイナ コーダー向け クラスメソッド開発ブログ 変数

はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回は... 続きを読む

[CSS]チャイルドセレクタを使った、グリッドを簡単に設計できるフレームワーク -Child Selector System | コリス

2011/03/09 86 users コリス カラム フレームワーク グリッド CSS

チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。Child Selector Systemの主な特徴超軽量サイズ（0.31KB）使い方はとても簡単余分なHTMLは最小限コンテナはパーソナライズ可能（%, px, em）カラムのネストをサポート条件付きコメントを使用すれば、IE5.5にも対応C... 続きを読む