2021-03-06から1日間の記事一覧

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がなんか効かないなー? と思っていたら、w…

リセット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-s…

慣れ

いろんなツールにはよ慣れないと〜〜という気持ち 餃子サイトの模写、あとはハンバーガーメニューのアイコンがなんか動くやつと スクロールダウンの表示的なとこをやりたい 無駄にFigmaで丸つけて書き出ししてみた・・・

天地中央

こちらのサイトを模写コーディング中です。 ローディング画面の実装に挑戦 すごく初歩的なんですが、 top: 50% left: 50% ってしてるのになんで画面真ん中配置にならず中途半端な位置なんやー??ってよくなってたのですが translate(-50%、-50%);を指定…

マークダウン記法

はてなで使えるマークダウン記法 hero-rin.hatenablog.com 見出し 見出し 見出し 見出し 見出し 見出し リスト リスト リスト リスト リンク マークダウン記法の練習です。 ここにコード入ります codeだよ

プログレスバー

coco-factory.jp kimmobrunfeldt.github.io 丸こぴで簡単に実装できたっす あと、Syntax error,なんちゃらかんちゃらというエラーが出たが ↓の記事どおりに、スムーススクロールの記述のところの引用符 $('a[href^="#"]').click(function(){ "#"と囲ってあげ…