CSS GridやFlexboxに罫線を引く

-

GridやFlexboxのアイテム間に、CSSだけで罫線を引けるようになりました。

これまではアイテムごとにborderを指定したり、疑似要素を配置したり、背景色で線のように見せたりするなどの工夫が必要でした。CSS Gap Decorationsのcolumn-ruleやrow-ruleを使うことで、GridやFlexboxのgapに対して、わかりやすく簡単に罫線を引くことができるようになります。

column-ruleは列方向のgap、row-ruleは行方向のgapを装飾するプロパティです。Gridでは、各gapに対して線の太さやスタイルを順番に指定できます。Flexboxでも、折り返しなどによって生じたgapに合わせて罫線が描画されます。


.grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(4, 1fr);
 gap: 10px;

 column-rule-width: 1px, 3px, 5px;
 column-rule-style: solid, dashed, solid;
 column-rule-color: red;

 row-rule-width: 1px, 3px, 5px;
 row-rule-style: dashed, solid, dashed;
 row-rule-color: blue;

 rule-overlap: column-over-row;
}


この例では、4列・4行のグリッドに対して、列方向と行方向のgapに異なる罫線を指定しています。column-rule-widthやrow-rule-styleのように複数の値をカンマ区切りで指定すると、gapごとに異なるスタイルを適用できます。

また、rule-overlapを指定すると、行方向と列方向の罫線が交差する部分で、どちらの罫線を上に描画するかを制御できます。

2026年6月時点では、ChromeとEdgeの149以降で利用できます。非対応ブラウザーでは罫線の指定が無視され、通常のgapだけが表示されます。そのため、装飾目的であれば導入しやすい機能です。


Gap decorations: Now available in Chromium  |  Blog  |  Chrome for Developers


HM

インプラス株式会社

このブログの人気の投稿

googleドライブの同期は、フォルダ選択ができました。

-
あれ、PCアプリがインストールできない…。 と思ったら、久しぶりの「ドライブ容量不足」。懐かしい感じさえあります。 メインＰＣとして使っているノートＰＣは、ＳＳＤに換装してありますが、ネックはやはりドライブの容量です。超快適な高速レスポンスと引き替えに容量を捨てたのですが、アドビツール群などデカイやつもインストールして持ち歩いているので、どうしてもＳＳＤ容量が圧迫されます。 私のＰＣにはgoogleドライブアプリを入れて、「同期」機能を便利に使っています。 しかし丸ごと同期していると不要なファイルまで同期されて、なけなしのＳＳＤの容量を食ってしまいます。その中には、時々しか参照しないような、クラウドのストレージだけにあれば良いようなファイルも結構沢山あるのです。調べてみれば解りますが、だれでも実際の所、パソコンの中にあるデータの殆どは、たまにしか参照しないファイルばかりのはずです。 googleドライブのＰＣ用アプリでは、同期するフォルダを選択できるので、これを活用します。直下のフォルダのみ選択できるので、うまくフォルダを作って運用してみてください。 右下に鎮座している googleドライブのアイコンを右クリックして 表示されたメニューから「設定」をクリック 同期オプションの「このパソコンに一部のフォルダのみを同期」にチェックを入れ googleドライブ以下のサブフォルダが一覧されるので、同期したいフォルダにチェックを入れます 最後に「変更を摘要」ボタンをクリック これだけでＯｋです。 マイドキュメント内は殆どが MS Office ファイルで、オフラインで使っています。googleドライブアプリでの同期は自動バックアップとしての意味が強いので、これはそのままにします。 自動バックアップしたいフォルダ、社内やパートナーと共有しつつローカルで参照したいフォルダだけ残します。 google ドキュメントを使っているフォルダはリンクファイルしかコピーされないので共有不要だと思います（容量はたいしたことないので、ランチャー（開き用）として使っているならアリですね）。 写真類は結構ローカルドライブの「肥やし」になっているので、１年前以上古いモノは思い切って全てクラウドに預けちゃいましょう。思ったほど困りませんし、パソコ...
続きを読む

技術メモ「503 Service Unavailable」

-
イメージ
開発メンバーから「開発中のWEBページが開けなくなった」とヘルプ要請がありました！ 開発中のWEBページにアクセスすると「HTTP Error 503. The service is unavailable.」の画面が表示されて、どのページも開けません。 503エラーは、サーバーにアクセス集中したときのエラーなのですが... 今回は思いがけない問題が原因でした。 同現象が発生した人のため、再発したときの解決ために、原因究明までの手順を残しておきます。 ------ ① まずIISを再起動します。 　　－＞　復旧しませんでした。 ② IISの初期ページが開けるか？ 　　－＞　503エラー ③ IISを停止してみます。 　　－＞　「localhost で接続が拒否されました。」のエラーに変わりました。 　　－＞　503エラーが変化したことから、WEBサーバーまでの通信は問題ないようです。 ④ WEBサイトを作成し直して、IISの初期ページが開けるか？ 　　－＞　OK　（IISの問題？） ⑤ 仮想ディレクトリを作成し直して、開発中のWEBページが開けるか？ 　　－＞　503エラー！ ⑥ ④と⑤のアプリケーションプールが異なっていたことから、アプリケーションプールを変更 　　－＞　OK ------ DefaultAppPoolが破損して、停止していたことが原因だったようです。 破損していたDefaultAppPoolを使用しないようにして、ひとまず対処完了です！ インプラスホームページはこちら（ https://implus.co.jp/ ）
続きを読む

なかなか消えない亀アイコン

-
イメージ
さまざまなOSで開発やテストを行うため、仕事では仮想マシンを活用しています。 私のシステム開発環境では、Windows11をホストOSとして、Windows7やLinuxなどをゲストOSとしてVirtualBox上で動作させています。 仮想マシンの利点は、物理マシンを増やさずに複数の検証環境を構築できること、そして新しいPCへの移行も容易な点です。 通常であれば、新しいPCへ仮想化ソフトウェアをインストールし、仮想マシンのイメージファイルをコピーするだけで引っ越しできます。 ところが今回、PCの引っ越し後にVirtualBoxの仮想化支援機能（VT-x/AMD-V）が無効化されるという問題に遭遇しました。 同様の事例はネット上でも多く報告されているようなので、今回はその原因と解決方法をまとめました。 ■発生環境 ホストOS：Windows 11 24H2 仮想化ソフトウェア：Oracle VirtualBox ■問題の症状 仮想マシンを起動すると、仮想化支援（ネステッド VT-x/AMD-V）がグレーアウトして有効化できない状態になりました。 その結果、仮想マシンがCPUのソフトウェアエミュレーションで動作し、パフォーマンスが著しく低下していました。 ※ VirtualBoxでは、ステータスバーに「亀のアイコン（低速モード）」が表示されるのが特徴です。 ■ 一般的に紹介されている対処法（未解決だった手順） 同様の問題に対して、多くのWebサイトでは次の1～3の手順が紹介されています。 １．BIOS設定の確認 　仮想化機能（Intel VT-x / AMD-V）が有効になっていることを確認します。 ２．Windowsの仮想化関連機能を無効化 　VirtualBoxとWindowsの仮想化機能は競合するため、以下の機能を「Windows の機能の有効化または無効化」からオフにします。 　・Hyper-V 　・Linux 用 Windows サブシステム 　・Virtual Machine Platform 　・Windows ハイパーバイザープラットフォーム ３．Windowsセキュリティの設定変更 　[設定] → [プライバシーとセキュリティ] → [Windows セキュリティ] → [デバイス セキュリティ] → [コア分離の詳細] に進み、「メモリ整合性」をオフ...
続きを読む