{"provider_url":"https://hatena.blog","blog_title":"NRI\u30cd\u30c3\u30c8\u30b3\u30e0Blog","provider_name":"Hatena Blog","blog_url":"https://tech.nri-net.com/","image_url":"https://cdn-ak.f.st-hatena.com/images/fotolife/k/k2-okazaki/20260106/20260106161201.png","published":"2026-03-31 12:13:37","title":"\u3010CSS\u3011\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u3068\u304d\u4f7f\u3046\u306e\u306fFlexbox\uff1fCSS Grid\uff1f","author_url":"https://blog.hatena.ne.jp/k2-okazaki/","url":"https://tech.nri-net.com/entry/which_do_you_use_when_creating_layout","height":"190","author_name":"k2-okazaki","categories":["\u8aad\u307f\u7269","UI\u30c7\u30b6\u30a4\u30f3","\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9","\u521d\u5fc3\u8005"],"html":"<iframe src=\"https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.nri-net.com%2Fentry%2Fwhich_do_you_use_when_creating_layout\" title=\"\u3010CSS\u3011\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u3068\u304d\u4f7f\u3046\u306e\u306fFlexbox\uff1fCSS Grid\uff1f - NRI\u30cd\u30c3\u30c8\u30b3\u30e0Blog\" class=\"embed-card embed-blogcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"></iframe>","width":"100%","description":"\u306f\u3058\u3081\u306b \u521d\u3081\u307e\u3057\u3066\u30012025\u5e74\u5ea6\u65b0\u5165\u793e\u54e1\u306e\u5ca1\u5d5c\u5065\u592a\u3067\u3059\u3002 \u73fe\u5728\u79c1\u306f\u3001HTML\u3084CSS\u3001\uff08\u6975\u307e\u308c\u306bJS\uff09\u3092\u7528\u3044\u3066flexbox\u306e\u4fbf\u5229\u3055\u306b\u611f\u52d5\u3057\u306a\u304c\u3089\u30e2\u30c3\u30af\u4f5c\u6210\u3084\u30a8\u30f3\u30cf\u30f3\u30b9\u696d\u52d9\u306a\u3069\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002 \u3055\u3066\u3001\u65e9\u901f\u3067\u3059\u304c\u7686\u3055\u3093\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u3068\u304d\u306f\u3069\u306e\u3088\u3046\u306b\u5b9f\u88c5\u3057\u307e\u3059\u304b\uff1f Flexbox\uff1fCSS Grid\uff1fMargin\u3067\u8abf\u6574\uff1f \u79c1\u306fFlexbox\u5927\u597d\u304d\u4eba\u9593\u3067\u3057\u305f\u306e\u3067\u306a\u3093\u3068\u306a\u304fFlexbox\u3092\u4f7f\u3044\u304c\u3061\u3067\u3057\u305f\u3002\u2190\u3088\u304f\u306a\u3044 \u305d\u3093\u306a\u79c1\u304c\u3001\u696d\u52d9\u3067\uff11\u304b\u3089CSS Grid\u3092\u5b66\u3073\u3001Flexbox\u30fbCSS Grid\u5927\u597d\u304d\u4eba\u9593\u306b\u306a\u3063\u305f\u306e\u3067\u3001\u4eca\u56de\u306fFlexbox\u3068CSS Grid\u3092\u4e0a\u624b\u306b\u4f7f\u3044\u3053\u306a\u3059\u305f\u3081\u306b\u305d\u308c\u305e\u2026","version":"1.0","type":"rich"}