calc(100% / 3)で3等分
display:flexで横に均等に4つ並べたいときはwidth:25%でOKだが
3つのときはwidth:33.33%にしていた
サイト模写していたら width:calc(100% / 3 - 0.5px)という書き方を発見
実際、33.33%だとうまくいかず、この記述なら真似できた
こっちのがなんとなく美しいかもなと納得
position:absolute のとき width,height を指定すること
トンボのサイト模写に着手
ヘッダーの要素 高さをちゃんと指定していて、配置をposition:absolute;で決めてあげているようです
position:absolute;してると flexboxのalign-items:centerやらjustify-content:centerがなんか効かないなー？
と思っていたら、widthとheightの値をちゃんと指定してあげてないからっぽかった
（前も同じようなことで引っかかってた気が・・・）
無事再現できました！
リセットCSS
ほかの人の参考に↓これで始めてみた！ フォントサイズ・太さは特にいじらず。
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section {
display:block;
}
body {
line-height: 1;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
ol, ul {
list-style: none;
list-style-type: none;
}
天地中央
こちらのサイトを模写コーディング中です。
ローディング画面の実装に挑戦
すごく初歩的なんですが、
top: 50% left: 50%
ってしてるのになんで画面真ん中配置にならず中途半端な位置なんやー？？ってよくなってたのですが
translate（-50％、-50％）;を指定してあげないとだめなんですね。
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
これをセットで覚えるかんじですかね
天地中央はめっちゃ使いどき多いのにいまだにパッと最適解だせないので、とにかく慣れるしかないな〜
参考サイト
プログレスバー
丸こぴで簡単に実装できたっす
あと、Syntax error,なんちゃらかんちゃらというエラーが出たが
↓の記事どおりに、スムーススクロールの記述のところの引用符
$('a[href^="#"]').click(function(){
"#"と囲ってあげたら解決しました
