VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」
HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズできます。 Blockman -GitHub Blockmanの特徴 Blockmanのインストール Blockmanの使い方 Blockmanの特徴 Blockmanは、コードのネストされたブロックを強調表示するためのVS Code拡張機能です。 サポートしている言語は、JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift,
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
米Twitterが、“会話”（コメントのつながり、スレッド）をRedditのようなネスト化したツリー表示にするテストをしていると、ソーシャルサービスの新機能発見で定評のある個人開発者のジェーン・マンチュン・ウォン氏が11月27日、自身のツイートで紹介した。 リプライがネスト化されるので、各ツイートがどのツイートへのリプライかが分かりやすい。また、ツリー上の個々のツイートをクリックすると、そのツイートの会話が表示される。 米TechCrunchによると、この機能はTwitterの新機能をテストするアプリ「twttr」でテストしているものという。Twitterは同メディアに対し、この機能は2020年に正式にローリングアウトすると語った。 Twitterは2月、会話の表示方法改善のためのパブリックβプログラムを開始し、3月にtwttrを公開した。 11月に正式機能になったリプライ非表示は、このプ
（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 追記: 2023/8/29リリース予定のFirefox 117でもサポート予定。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネストの使い方を学べるデモページもあるので、勉強するのにぴったりです。 CSS Nesting by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSのネストとは CSSのネストの基礎知識 CSSのネストのパーサーについて CSSのネストを検出する方法 デベロッパーツールでCSSのネストをデバッグする方法 CS
2023年9月6日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ ↑私が10年以上利用している会計ソフト！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらいカラーコードに利用するといいでしょう。 Sassの場合の書き方 $ マークに続いて任意の変数名を書き、コロンで区切って変数の値を記述。この値が呼び出されるようになります。実際に使いたい箇所では $ マークと変数名を書けば、変数を呼び出せます。 $main-gutter: 30px; .box { width: 300px; height: 100px; margin: $main-gutter; } CSSの場合の書き方 公式
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
Twitter、“会話”のネスト化ツリー表示を来年ローリングアウト
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説
Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！