VLANlab
カタログ
概要
VLANlab
Frontend
11 tools
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
VLANlab

計算 • 検索 • 検証

What Is My IP?IPv6 TestSpeed Test
DNS LookupDNS PropagationDNS Health CheckerSPF AnalyzerPTR LookupCAA RecordSRV RecordDNS TraceDNS PrivacyDANE / TLSADNSSEC CheckerSPF BuilderDKIM GeneratorZone DiffPTR Zone Generator
Subnet CalculatorCIDR Range ViewerVLSM CalculatorVLAN PlannerBandwidth CalcIPv6 Subnet CalcIP ↔ BinarySupernet CalcCIDR MergeCIDR to IP RangeCIDR SplitIPv4 → IPv6CIDR OverlapFree IP Space FinderDHCP CalculatorMTU Calculator
WHOIS LookupDomain Age CheckerSubdomain FinderIP GeolocationASN / BGP LookupIP Blacklist CheckReverse IP LookupMAC Address LookupBGP Prefix LookupRPKI / ROA CheckDomain Availability
Email InspectorDKIM CheckerEmail HeadersSMTP TestSMTP TLS CheckMX Health CheckEmail SecurityDMARC Generator
Temp Mailもうすぐ
Is It Down?SSL/TLS CheckerOpen Port CheckerOG Tag CheckerOCSP CheckerPing / LatencyHTTP InspectorRedirect ChainCSP AnalyzerTech Stack Checkerベータ版Tracerouteベータ版HTTP/2 + HTTP/3robots.txt ViewerSSL Cert DecoderBanner GrabberWebSocket TesterCORS TesterDomain MonitoringHTTP TimingStructured DataPWA ManifestSEO Auditor
One-Time SecretHash GeneratorPassword StrengthSecurity.txtCT Log SearchAXFR Zone Test
HTTP Sec Scoreもうすぐ
WebRTC Leak TestIP Reputation
JSON FormatterYAML FormatterBase64 / URL EncodeJWT DecoderRegex TesterUnix TimestampCron BuilderUUID / ULIDPunycode / IDNBase ConverterACL Generator
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
Text CompareCase ConverterText CleanerText AnalyzerText TransformerList ToolsLorem GeneratorSlug Generator
Cloud VPC PlannerCloud IP RangeSecurity GroupsIAM AnalyzerK8s CIDR PlannerFirewall BuilderHCL FormatterEgress Cost CalcCloud DNS Zone
VM Cost Estimatorもうすぐ
Proxmox Net ConfigVMware Port GroupHyper-V vSwitchVXLAN VNI PlannerKVM Net ConfigXCP-ng NetworkNSX-T Segment
Disposable Email DetectorPhone InspectorTor Exit NodeVPN/Proxy DetectDomain ReputationTyposquat DetectUsername SearchFavicon Hash
GitHub ActionsDockerfile Gendocker-composeArgoCD AppK8s Manifests
概要

© 2026 VLANlab

ログイン不要・広告なし・トラッキングなし

2.43.3680bb3

CSS Flexbox および Grid ビジュアライザー

ライブプレビュー機能を使って、CSSのフレックスボックスやグリッドレイアウトを視覚的に作成できます。コンテナやアイテムのプロパティを調整し、すぐに使えるCSSをコピーしましょう。

Container
Item 1
1
2
3
4
5
Container CSS
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
Item CSS
/* all items use defaults */

関連ツール

Box Shadow Generator

ライブプレビュー機能を使って、CSSのボックスシャドウを視覚的に作成できます。オフセット、ぼかし、広がり、色、および複数のレイヤーを調整できます。すぐに使えるCSSコードを即座にコピーできます。

CSS Unit Converter

14種類のCSS単位をすべて瞬時に変換できます。px、rem、em、vw、vh、pt、cm、in、その他の単位を入力するだけで、文脈に応じた相対単位のサポートにより、すべての変換結果を一目で確認できます。

Gradient Generator

CSSのグラデーションを視覚的に作成できます。線形、放射状、円錐状のグラデーションについて、カラーストップ、不透明度、位置を設定し、すぐに使えるCSSコードをコピーできます。

このツールについて

CSS Flexbox および Grid ビジュアライザーについて

CSSのFlexboxとGridは、現代のCSSにおける2つの主要なレイアウトシステムです。Flexboxは1次元レイアウト（行または列）を扱い、ナビゲーションバー、ツールバー、コンポーネントの配置に最適です。 CSSグリッドは、行と列を同時に扱う2次元レイアウトに対応しており、ページレイアウト、カードグリッド、複雑なUI構造に適しています。どちらのシステムもコンテナ／アイテムモデルを採用しています。コンテナのプロパティで全体的なレイアウトを定義し、個々のアイテムのプロパティでコンテナ内での配置を制御します。

使用方法

上部のタブを使用して、FlexboxモードとGridモードを切り替えます。コンテナのプロパティを調整して、全体的なレイアウトの方向、改行、配置、および余白を設定します。番号付きのチップをクリックするか、プレビュー内を直接クリックしてアイテムを選択し、そのアイテムの個別のプロパティを設定します。値を変更すると、プレビューがリアルタイムで更新されます。 「コンテナ CSS」および「アイテム CSS」のブロックをコピーし、スタイルシートに貼り付けてください。

アイテムの CSS 出力グループは、アイテムクラス（.item-1、.item-2 など）ごとに上書きされます。コンテナのデフォルト設定のみを使用しているアイテムは出力されず、上書きされたアイテムのみが一覧表示されます。 グリッドモードでは、列および行のスパン値には「span N」という省略形を使用します。幅が均一なトラックの場合、repeat() テンプレートは repeat(N, Xunit) の形式で記述されます。レイアウトの要件に合わせて、単位セレクタを fr、px、% のいずれかに調整してください。