模写コーディング続き レスポンシブで正方形維持するのはどうやってやるんや？？ となったが ↓のサイト参考にしたらできましたー！ web-no-hito.com &__movie { display: flex; &Item { width: 50%; position: relative; &:before { content: ""; display: b…

模写コーディング続き。間が空いてしまった 要素を横並びにするとき、つい安易にdisplay: flex使いがちなのですが 親要素を用意してあげなきゃいけないのでhtmlの記述がその分増えるため 今回はdisplay: inline-block使いました。 日付・プレスリリースのタ…

左が元ロゴ、右がトレース 直線的なロゴはトレースしやすいな 曲線のを練習します

イラレの操作に慣れるためロゴトレース ペンツールと曲線ツール使用 曲線ツールで線で描いたら パスのアウトライン化して塗りの形式に変えると 加工しやすい。 左：元ロゴ 右：トレース 手書き風文字（since1954）は曲線ツール 他はペンツール（丸は図形ツー…

display:flexで横に均等に4つ並べたいときはwidth:25%でOKだが 3つのときはwidth:33.33%にしていた サイト模写していたら width:calc(100% / 3 - 0.5px)という書き方を発見 実際、33.33%だとうまくいかず、この記述なら真似できた こっちのがなんとなく美し…

トンボのサイト模写に着手 ヘッダーの要素 高さをちゃんと指定していて、配置をposition:absolute;で決めてあげているようです position:absolute;してると flexboxのalign-items:centerやらjustify-content:centerがなんか効かないなー？ と思っていたら、w…

ほかの人の参考に↓これで始めてみた！ フォントサイズ・太さは特にいじらず。 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(){ "#"と囲ってあげ…

やりたかったこと ・画像（リンク）ホバーしたら、画像が拡大されて 画像に色付きのマスクがかかってテキストが表示される 参考サイト kuzlog.com kubogen.com creative.eccom.jp できなかったこと overflow:hidden 指定するときは画像のサイズを明確に指定…

Webデザイン、コーディングの勉強していて つまずいたこと、引っかかったこと、解決してすっきりしたこと 書き残しておけば、忘れないかなー（すぐに振り返れるかなー）と思ってブログはじめました 転職活動はじめたばかりながら、スキルの低さを痛感してい…