From 79f82b05fd99c34808903d0e674fa15d1d0ea557 Mon Sep 17 00:00:00 2001 From: nakaterm <104970808+nakaterm@users.noreply.github.com> Date: Sat, 8 Nov 2025 22:43:30 +0900 Subject: [PATCH 01/18] =?UTF-8?q?CSS=20=E3=81=AE=E7=AF=80=E3=82=92?= =?UTF-8?q?=E6=94=B9=E8=A8=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_samples/absolute/index.html | 16 - .../_samples/absolute/style.css | 38 -- .../_samples/border-radius/index.html | 40 ++ .../_samples/border-radius/style.css | 23 + .../_samples/border/index.html | 40 ++ .../_samples/border/style.css | 21 + .../_samples/box-model/index.html | 11 - .../_samples/box-model/style.css | 7 - .../_samples/display/index.html | 12 - .../_samples/display/style.css | 9 - .../_samples/exercise/index.html | 39 -- .../_samples/exercise/style.css | 61 -- .../_samples/fixed/index.html | 16 - .../_samples/fixed/style.css | 38 -- .../_samples/flex/index.html | 15 - .../_samples/flex/style.css | 21 - .../_samples/flexbox/index.html | 40 ++ .../_samples/flexbox/style.css | 31 + .../_samples/grid/index.html | 16 - .../_samples/grid/style.css | 25 - .../_samples/margin-top/index.html | 40 ++ .../_samples/margin-top/style.css | 27 + .../_samples/margin/index.html | 40 ++ .../_samples/margin/style.css | 26 + .../_samples/max-min-width/index.html | 13 - .../_samples/max-min-width/style.css | 16 - .../_samples/media-query/index.html | 35 +- .../_samples/media-query/style.css | 38 +- .../_samples/padding/index.html | 40 ++ .../_samples/padding/style.css | 25 + .../_samples/percent/index.html | 12 - .../_samples/percent/style.css | 9 - .../_samples/relative-absolute/index.html | 14 - .../_samples/relative-absolute/style.css | 16 - .../_samples/relative/index.html | 16 - .../_samples/relative/style.css | 38 -- .../_samples/space-around/index.html | 15 - .../_samples/space-around/style.css | 22 - .../_samples/three-div/index.html | 13 - .../_samples/three-div/style.css | 11 - .../_samples/three-span/index.html | 13 - .../_samples/three-span/style.css | 11 - .../_samples/width-percent/index.html | 40 ++ .../_samples/width-percent/style.css | 19 + .../_samples/width/index.html | 40 ++ .../_samples/width/style.css | 19 + .../05-css-arrangement/button-full-width.png | Bin 0 -> 60534 bytes .../05-css-arrangement/button-margin-top.png | Bin 0 -> 82128 bytes .../05-css-arrangement/card-border-radius.png | Bin 0 -> 71077 bytes .../05-css-arrangement/card-border.png | Bin 0 -> 66780 bytes .../05-css-arrangement/card-fixed-width.png | Bin 0 -> 119188 bytes .../05-css-arrangement/card-full-width.png | Bin 0 -> 115943 bytes .../05-css-arrangement/card-margin.png | Bin 0 -> 128886 bytes .../05-css-arrangement/card-padding.png | Bin 0 -> 79995 bytes .../05-css-arrangement/cards-flexbox.png | Bin 0 -> 179588 bytes .../05-css-arrangement/cards-responsive.mp4 | Bin 0 -> 259548 bytes .../05-css-arrangement/devtool-boxmodel.png | Bin 109335 -> 0 bytes .../exercise-smartphone.png | Bin 451075 -> 0 bytes .../05-css-arrangement/exercise.png | Bin 707780 -> 0 bytes .../05-css-arrangement/final-image.png | Bin 0 -> 97620 bytes .../05-css-arrangement/flex.png | Bin 54683 -> 0 bytes .../05-css-arrangement/grid-column-row.png | Bin 81081 -> 0 bytes .../05-css-arrangement/grid.png | Bin 92236 -> 0 bytes .../05-css-arrangement/index.mdx | 578 ++++++------------ .../max-width-min-width.mp4 | Bin 108028 -> 0 bytes .../05-css-arrangement/mediaquery.mp4 | Bin 68367 -> 0 bytes .../05-css-arrangement/percent-css.mp4 | Bin 106129 -> 0 bytes .../position-absolute-scroll.mp4 | Bin 159873 -> 0 bytes .../05-css-arrangement/position-absolute.png | Bin 62657 -> 0 bytes .../position-fixed-scroll.mp4 | Bin 163663 -> 0 bytes .../05-css-arrangement/position-relative.png | Bin 98334 -> 0 bytes .../relative-absolute-after.png | Bin 96592 -> 0 bytes .../relative-absolute-before.png | Bin 93651 -> 0 bytes .../05-css-arrangement/space-around.png | Bin 81191 -> 0 bytes .../05-css-arrangement/three-blocks.png | Bin 81054 -> 0 bytes .../05-css-arrangement/three-div.png | Bin 39973 -> 0 bytes .../05-css-arrangement/three-span.png | Bin 34414 -> 0 bytes 77 files changed, 773 insertions(+), 932 deletions(-) delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/absolute/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/border-radius/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/border-radius/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/border/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/border/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/box-model/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/box-model/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/display/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/display/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/exercise/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/exercise/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/fixed/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/fixed/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/flex/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/flex/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/flexbox/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/flexbox/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/grid/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/grid/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/margin-top/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/margin-top/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/margin/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/margin/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/max-min-width/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/padding/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/padding/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/percent/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/percent/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/relative-absolute/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/relative/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/relative/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/space-around/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/space-around/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/three-div/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/three-div/style.css delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/three-span/index.html delete mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/three-span/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/width-percent/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/width-percent/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/width/index.html create mode 100644 docs/2-browser-apps/05-css-arrangement/_samples/width/style.css create mode 100644 docs/2-browser-apps/05-css-arrangement/button-full-width.png create mode 100644 docs/2-browser-apps/05-css-arrangement/button-margin-top.png create mode 100644 docs/2-browser-apps/05-css-arrangement/card-border-radius.png create mode 100644 docs/2-browser-apps/05-css-arrangement/card-border.png create mode 100644 docs/2-browser-apps/05-css-arrangement/card-fixed-width.png create mode 100644 docs/2-browser-apps/05-css-arrangement/card-full-width.png create mode 100644 docs/2-browser-apps/05-css-arrangement/card-margin.png create mode 100644 docs/2-browser-apps/05-css-arrangement/card-padding.png create mode 100644 docs/2-browser-apps/05-css-arrangement/cards-flexbox.png create mode 100644 docs/2-browser-apps/05-css-arrangement/cards-responsive.mp4 delete mode 100644 docs/2-browser-apps/05-css-arrangement/devtool-boxmodel.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/exercise-smartphone.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/exercise.png create mode 100644 docs/2-browser-apps/05-css-arrangement/final-image.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/flex.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/grid-column-row.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/grid.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/max-width-min-width.mp4 delete mode 100644 docs/2-browser-apps/05-css-arrangement/mediaquery.mp4 delete mode 100644 docs/2-browser-apps/05-css-arrangement/percent-css.mp4 delete mode 100644 docs/2-browser-apps/05-css-arrangement/position-absolute-scroll.mp4 delete mode 100644 docs/2-browser-apps/05-css-arrangement/position-absolute.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/position-fixed-scroll.mp4 delete mode 100644 docs/2-browser-apps/05-css-arrangement/position-relative.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/relative-absolute-after.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/relative-absolute-before.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/space-around.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/three-blocks.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/three-div.png delete mode 100644 docs/2-browser-apps/05-css-arrangement/three-span.png diff --git a/docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html b/docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html deleted file mode 100644 index 78451cc5e..000000000 --- a/docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - -
- -Y7AW)*L|@$LhX>}s@tjD51q3^
zvSa&5mh_j5miTVnx^?50dYRs>qLDjg_se{qFZ8o!*J%#wRA?^b!gKigbhA-fvN^s6
zN3>x|C29M;8rH<6w51Xw)+0V61{81Jq?4%2XBR=zAE!T>32r(o@!J00LKnOz1WAhy
zM5~~URfDr)xpkuv;wB}Jx8BaH{_+)g6IY^Bs#8DURABU&zBJi7y0oA)u=MqaN@<04
z%7E|pFPG-e3Ce%b`#IEcyB#@jc}Z`1-NnhJ&1DDaf87?92y{qg;S
z&I8sP5moO!{5=BqeM7r1bzJKHU}47CWXQ0k }7|odtcrfa^&F#sdUZ_P+P*f
z3od_G&eN$LN5piA9Ke`c(AH+4K;oA2m3JAsTL%kx5sepRd+H5o8@!gnX|qNo;&=ks
z*-~fzlihTddr|ecu7+wig6f)^{giBW;D?1=_j~qnjVyvqZ3n6BEv`NWz3XQ73&aWu
z-a4YB31%J6e-$&m_dqP;ZT*>fsY_KC)UU5J2!U6;Ce-Lhom%Pr)r4M?&9C!3NkHW1
zjCfKGyV;d1@w91pFC3bj4i&~%@nRMCMJttjVV g+Zhrf-a0oFYu6OwU9_jl-sdSm
zGd=Yl8`Ca|Nw`Jmk>g~of*Imsft_{a5#|lld0&cIS*W%54g#OWIga{y!LRTe?D*SJ
zw<4;JV5;09{#mEl^#vjZaN+63r1et<8(H``?q|wYq{a(cAEDhQLwJu(W
zF8!x+c=$xr5S(8DkTd3-U8GB%-TJ3Lz$ZF~PathV^yj+-S0ON}DaG`5GIoDF0-Rse
z$bHH`-eRYQ;1l@Z2{9Te;an0s0)I#+^pCgj0`SPGk%aEuND
y10F`zU&L%6U9M1gCV{EwOnabAuFSCJE>eI`O-G)5l0W3wvry87>Tg6C`
zz$dOcG4b4~wKsJSd*NK|ybPr<#^e|8>qG)%h7r_9@~8I3d7em-0OQFNp+{*7(^qb!
zS`hef!<_G)T7B&Ih%~snmL(S@E*a}QCPV8lK6euQk8!~(f3bj=Gw8PSuO6+|8OjjU
z(F-h{Uhw)Vz@R>hJ((5
so4B>D+5OVSiEm*@w6B8Ed@49?+y>^qrUC!ucZJ}}9
zi01CL_jYZx#r}fq32)i+{>?H;Mkz$?=6znhxr1{1(zMHNbJL?!j^Y^!;J7|0o7
zSOBtA0N@L-be*=3SZt{}*Zr7C(;vYM3%Oq<>tr7*utLEMI7Z-857RB<+Kk!&@WXWz
zi~W&v7CE|zWPYRSzIMTT+7*DXOGZ^MB|Y{Lx%`nX>6#im^lV$2bNQt2!Rq2tVSSKs
zk?9YYvZyG@<#Y@tTlS9(8M{=0`)>zpLb`P+#t3uQ=^=d*=GU^(kV5AiE5hRB_(*X<
zRDH){Z~b>q4b;J;IwxXf(y3jbzBIN)X{~aG@}r1FFcuj^1*O{IAQWn{3t;adP}FSV
zPFGgYNwRU*wC@8{I&Ua^&&HjBOwfhgm!#)mg72ZU^L(hw+L%7@{zzr#GuHCT1AdrA
zxR0IJ%1}`uyl!jziy%|);EgQxlr;}LnfPCt6u5ib7F%Bc
l8bIXl
zZr(14!{+13?$c-TIGXK>k`=m=Tx@32(GIM$2&MTPM-6~XwF84m@cA^GOi8}sSfcRv9mfYT*c2%
zO{hFctJ2l_dGaUqexFs8Gn;fb165;`zJ0&AJr{l?iVrk9kI%os^S1I7K
bg04vzRq_v$|@B7-R>oh(S_es@#z6fHu)1k9Wh3zKym1WdXfVb&n
z8LCu54*@aOOjt%;-jcT#99tjV;tle)Gh|KV@oTQ?Ny%+%bu2YSG1G3I?$DbK9ChDm
z=lpIEC8&Wgn^-r`NT~a?jX-H|Jl(NQ8FS<}a{@GCKq|{M3U)
z4>|*|h8>YqQ@f^o=Q9@o96+AeLCn7?+KcwP+#{>OCtSj2$ES)W^U}Rm3;v(>zA`H6
zum4sNl~7R-FlgzN?go)A=~6-(q;o(JP+D5LJBFH}L8QC8q=yz5LWa19=f|_|e?8BA
zb>H2!uCG`N9lvwV`JS^s`|Qu&GikRmjHQ1Xi1wH7xWn79Am&IIMZu@L#otkO4fJ>j
z58h6Ew@}XUZ=5z)nPv|?p0R%nQ7vyZl)fU+a~#s#VC7Vor(n@DD6Bm*T^ja}A07+W
z)>0{Q%k)>JETc2=*Jn7kEUC%4wlIxKz&LII9;`ON?iFX=QZAax0EQU51XhW}+lsZZ
z1vH)60(~nMSHQ6yPTfB;$xzjfrzkMw9z>5r>zIbC>QSKdyQ9A#x#7(W8g
F1!>VB1c(Ym&6(OnHH_%Rf2;_85bm4
4C
z+GgojwtI5otF(