{"id":985,"date":"2021-06-11T21:49:44","date_gmt":"2021-06-11T12:49:44","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=985"},"modified":"2023-01-02T16:17:29","modified_gmt":"2023-01-02T07:17:29","slug":"tailwindcss%e3%83%81%e3%83%bc%e3%83%88%e3%82%b7%e3%83%bc%e3%83%88layout","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=985","title":{"rendered":"Tailwindcss\u30c1\u30fc\u30c8\u30b7\u30fc\u30c8(Layout)"},"content":{"rendered":"\n

Container<\/h2>\n\n\n\n

Usage<\/strong><\/h3>\n\n\n\n

\u30b3\u30f3\u30c6\u30ca\u3092\u4e2d\u592e\u306b\u914d\u7f6e\u3057\u3001\u6c34\u5e73\u65b9\u5411\u306bpadding\u3092\u8a2d\u5b9a\u3002container\u3092\u3064\u3051\u308b\u3053\u3068\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u6a2a\u5e45\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u308b\u3002container\u304c\u306a\u3044\u3068\u753b\u9762\u306e\u5de6\u7aef\u304b\u3089\u53f3\u7aef\u307e\u3067\u753b\u50cf\u3084\u6587\u5b57\u306a\u3069\u304c\u5bc4\u3063\u3066\u3057\u307e\u3046\u3002<\/p>\n\n\n\n

<div class="container mx-auto px-4">\n  <!-- ... -->\n<\/div><\/code><\/pre><\/div>\n\n\n\n
class<\/th>Breakpoint<\/th>Properties<\/th><\/tr><\/thead>
container<\/td>None<\/em><\/td>width: 100%;<\/td><\/tr>
<\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Box Decoration Break<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Box Sizing<\/h2>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/06\/27\/box-sizing\/\n\n\n\n
Include borders and padding<\/h3>\n\n\n\n
\u5883\u754c\u7dda\u3068padding\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3042\u308b\u8981\u7d20\u306b\u5bfe\u3057\u3066\u67a0\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\u5e4532\u306e\u4e2d\u306bpadding4\u3001border4\u3092\u542b\u3093\u3067\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Exclude borders and padding<\/strong><\/h3>\n\n\n\n
\u5e4532\u306b\u52a0\u3048\u3066padding4\u3001border4\u304c\u5e45\u306e\u9577\u3055\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Display<\/h2>\n\n\n\n
display\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u3088\u308a\u8981\u7d20\u306e\u8868\u793a\u306e\u3055\u308c\u65b9\u304c\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
display: block<\/h3>\n\n\n\n
\u8981\u7d20\u304c\u7e26\u306b\u4e26\u3076<\/p>\n\n\n\n
display: inline<\/h3>\n\n\n\n
\u8981\u7d20\u304c\u6a2a\u306b\u4e26\u3076
display: block\u306e\u4e2d\u3067\u7528\u3044\u3089\u308c\u308b<\/p>\n\n\n\n
display: inline-block<\/h3>\n\n\n\n
\u8981\u7d20\u304c\u6a2a\u306b\u4e26\u3076<\/p>\n\n\n\n
display: none<\/h3>\n\n\n\n
\u975e\u8868\u793a\u306b\u306a\u308b<\/p>\n\n\n\n
table<\/h3>\n\n\n\n
<\/div>\n
table-row\u304ctr
table-cell\u304cth,td\u3092\u8868\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<\/div>\n\n\n\n
<div class="table w-full ...">\n  <div class="table-row-group">\n    <div class="table-row">\n      <div class="table-cell ...">A cell with more content<\/div>\n      <div class="table-cell ...">Cell 2<\/div>\n      <div class="table-cell ...">Cell 3<\/div>\n    <\/div>\n    <div class="table-row">\n      <div class="table-cell ...">Cell 4<\/div>\n      <div class="table-cell ...">A cell with more content<\/div>\n      <div class="table-cell ...">Cell 6<\/div>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/06\/27\/table\/\n\n\n\n
inline-table<\/h3>\n\n\n\n
table-caption<\/h3>\n\n\n\n
table-caption<\/h3>\n\n\n\n
table-cell<\/h3>\n\n\n\n
class<\/th>Properties<\/th><\/tr><\/thead>
block<\/td>display: block;<\/td><\/tr>
inline-block<\/td>isplay: inline-block;<\/td><\/tr>
inline<\/td>display: inline;<\/td><\/tr>
flex<\/td>display: flex;<\/td><\/tr>
inline-flex<\/td>display: inline-flex;<\/td><\/tr>
<\/td><\/td><\/tr>
hidden<\/td>display: none;<\/td><\/tr>
table<\/td><\/td><\/tr>
inline-table<\/td><\/td><\/tr>
table-caption<\/td><\/td><\/tr>
table-cell<\/td><\/td><\/tr>
table-column<\/td><\/td><\/tr>
table-column-group<\/td><\/td><\/tr>
table-footer-group<\/td><\/td><\/tr>
table-header-group<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Floats<\/h2>\n\n\n\n
Float\u3000right<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Float left<\/strong><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Don’t float<\/h3>\n\n\n\n
\u30d5\u30ed\u30fc\u30c8\u3055\u305b\u306a\u3044<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Clear<\/h2>\n\n\n\n
Clear left<\/h3>\n\n\n\n
\u5de6\u306e\u753b\u50cf\u306e\u4e0b\u306b\u6587\u7ae0\u3092\u914d\u7f6e<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Clear right<\/h3>\n\n\n\n
\u53f3\u306e\u753b\u50cf\u306e\u4e0b\u306b\u6587\u7ae0\u3092\u914d\u7f6e<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Clear both<\/h3>\n\n\n\n
\u6700\u3082\u57fa\u6e96\u3068\u306a\u308b\u753b\u50cf\u306e\u4e0b\u306b\u6587\u7ae0\u3092\u914d\u7f6e<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Don’t clear<\/h3>\n\n\n\n
\u753b\u50cf\u3068\u306e\u9593\u306b\u3082\u6587\u7ae0\u3092\u914d\u7f6e<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Isolation<\/h2>\n\n\n\n
Object Fit<\/h2>\n\n\n\n
Contain<\/h3>\n\n\n\n
Cover<\/h3>\n\n\n\n
\u753b\u50cf\u306f\u305d\u306e\u307e\u307e\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5408\u308f\u305b\u3066\u62e1\u5927<\/p>\n\n\n\n
Fill<\/h3>\n\n\n\n
\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u3046\u3088\u3046\u306b\u4f38\u9577<\/p>\n\n\n\n
None<\/h3>\n\n\n\n

Scale Down<\/h3>\n\n\n\n
\u30b3\u30f3\u30c6\u30ca\u306b\u5408\u308f\u305b\u3066\u7e2e\u5c0f<\/p>\n\n\n\n
Object Position<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Overflow<\/h2>\n\n\n\n
\u8981\u7d20\u306e\u30dc\u30c3\u30af\u30b9\u304b\u3089\u306f\u307f\u51fa\u305f\u90e8\u5206\u3092\u3069\u3046\u6271\u3046\u304b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\nhttp:\/\/www.agile-software.site\/2021\/06\/27\/overflow\/\n\n\n\n
class<\/th>properties<\/th><\/tr><\/thead>
overflow-auto<\/td>overflow: auto;<\/td><\/tr>
overflow-hidden<\/td>overflow: hidden;<\/td><\/tr>
overflow-visible<\/td>overflow: visible;<\/td><\/tr>
overflow-scroll<\/td>overflow: scroll;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Visible<\/h3>\n\n\n\n
\u306f\u307f\u51fa\u305f\u90e8\u5206\u304c\u305d\u306e\u307e\u307e\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
Auto<\/h3>\n\n\n\n
Hidden<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Scroll horizontally if needed<\/h3>\n\n\n\n
\u8981\u7d20\u304c\u30b3\u30f3\u30c6\u30ca\u4ee5\u4e0a\u3060\u3063\u305f\u5834\u5408\u6c34\u5e73\u65b9\u5411\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u8a31\u53ef\u3059\u308b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
class<\/th>properties<\/th><\/tr><\/thead>
overflow-auto<\/td>overflow: auto;<\/td><\/tr>
overflow-hidden<\/td>overflow: hidden;<\/td><\/tr>
overflow-visible<\/td>overflow: visible;<\/td><\/tr>
overflow-scroll<\/td>overflow: scroll;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Overscroll Behavior<\/h2>\n\n\n\n
Position<\/h2>\n\n\n\n
Static<\/strong><\/h3>\n\n\n\n
Relative<\/strong><\/strong><\/h3>\n\n\n\n
Absolute<\/strong><\/strong><\/strong><\/h3>\n\n\n\n

Fixed<\/strong><\/strong><\/strong><\/h3>\n\n\n\n
class<\/th>Properties<\/th><\/tr><\/thead>
.static<\/td>position: static;<\/td><\/tr>
.fixed<\/td>position: fixed;<\/td><\/tr>
.absolute<\/td>position: absolute;<\/td><\/tr>
.relative<\/td>position: relative;<\/td><\/tr>
.sticky<\/td>position: sticky;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Top \/ Right \/ Bottom \/ Left<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<!-- Span top edge -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute inset-x-0 top-0 h-16 ...">1<\/div>\n<\/div>\n\n<!-- Span right edge -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute inset-y-0 right-0 w-16 ...">2<\/div>\n<\/div>\n\n<!-- Span bottom edge -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute inset-x-0 bottom-0 h-16 ...">3<\/div>\n<\/div>\n\n<!-- Span left edge -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute inset-y-0 left-0 w-16 ...">4<\/div>\n<\/div>\n\n<!-- Fill entire parent -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute inset-0 ...">5<\/div>\n<\/div>\n\n<!-- Pin to top left corner -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute left-0 top-0 h-16 w-16 ...">6<\/div>\n<\/div>\n\n<!-- Pin to top right corner -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute top-0 right-0 h-16 w-16 ...">7<\/div>\n<\/div>\n\n<!-- Pin to bottom right corner -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute bottom-0 right-0 h-16 w-16 ...">8<\/div>\n<\/div>\n\n<!-- Pin to bottom left corner -->\n<div class="relative h-32 w-32 ...">\n  <div class="absolute bottom-0 left-0 h-16 w-16 ...">9<\/div>\n<\/div><\/code><\/pre><\/div>\n\n\n\n
inset\u30d7\u30ed\u30d1\u30c6\u30a3\u306ftop\u3001right\u3001bottom\u3001left\u306b\u5bfe\u3057\u3066\u4e00\u62ec\u6307\u5b9a\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002<\/p>\n\n\n\n
class<\/th>Properties<\/th><\/tr><\/thead>
inset-0<\/td>top: 0px; right: 0px; bottom: 0px; left: 0px;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Visibility<\/h2>\n\n\n\n
Visible<\/h3>\n\n\n\n
\u8981\u7d20\u3092\u8868\u793a\u3059\u308b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Invisible<\/h3>\n\n\n\n
\u8981\u7d20\u3092\u975e\u8868\u793a\u306b\u3067\u304d\u308b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Z-Index<\/h2>\n\n\n\n
\u8981\u7d20\u306e\u91cd\u306a\u308a\u65b9\u3092\u8a2d\u5b9a<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
class<\/th>Properties<\/th><\/tr><\/thead>
z-0<\/td>z-index: 0;<\/td><\/tr>
<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Container Usage \u30b3\u30f3\u30c6\u30ca\u3092\u4e2d\u592e\u306b\u914d\u7f6e\u3057\u3001\u6c34\u5e73\u65b9\u5411\u306bpadding\u3092\u8a2d\u5b9a\u3002container\u3092\u3064\u3051\u308b\u3053\u3068\u3067\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u6a2a\u5e45\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u308b\u3002container\u304c\u306a\u3044\u3068\u753b\u9762\u306e\u5de6\u7aef\u304b\u3089\u53f3\u7aef\u307e\u3067\u753b\u50cf\u3084\u6587\u5b57\u306a<\/p>\n","protected":false},"author":1,"featured_media":986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tailwindcss"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=985"}],"version-history":[{"count":13,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/985\/revisions"}],"predecessor-version":[{"id":2455,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/985\/revisions\/2455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/986"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}