デザインカンプがPCしかない時は 悩む部分もあるのでこのサイトで たくさんの実例に触れて引き出し増やすと 時短になりそう！ Responsivelyというアプリと併用すると デバイス別での見比べも出来て より勉強になりそうです。 良いサイトをありがとうございます！ #Web制作

#今日の積み上げ 問合せフォームを実装 ・主要ブラウザで見え方統一 ・GoogleFormに紐付け ・チェックボックスCSS Animation ・必須項目全て入力でボタンクリック可 ・Tabでinput非表示部分もアウトライン表示 #デイトラ #Web制作 #朝活

📝デイトラ総復習課題② PC版がほぼ完成。 問合せフォーム前まで約5時間30分。 問合せフォーム、、、2時間😂 問合せフォームのストック作って 次はもっと早く出来るはず！ 細かなアニメーション追加して レスポンシブやって、あと少し。 #デイトラ #Web制作

📝デイトラ総復習課題① 時間計測しながらコーディング中。 仕様指定でドロワーメニューは drawer.jsを利用なんですが 調整するのが逆に大変ですね。 色々と復習になっている（なりそう）なのが デイトラすごいな、と思う瞬間。 #デイトラ #Web制作

📝XDカンプからコーディング @cresta_designさん初級編 ▼ 実施したこと ☑︎ 自作テンプレ利用 ☑︎ BEM利用 ☑︎ font周りをfunctionで管理 ☑︎ Sassの分割管理 ☑︎ CSS animation追加 ☑︎ SP・TABレスポンシブ ☑︎ 主要ブラウザでチェック →約5.5時間 #クリスタチャレンジ #Web制作

📝モーダル表示 デイトラ2nd -DAY26- モーダル表示自体は出来たので 見本から変更した点 ☑︎ ダミーテキストではなく雛形を入れて 　 line-heightや箇条書きのindentを調整する ☑︎ モーダルOPEN時に周りの黒い部分を 　 クリックしても戻れるようにする #デイトラ #プログラミング学習

📝アコーディオン別パターン 見本から追加した点は... ☑︎ hoverで背景色スライド ☑︎ クリックでcssで作った矢印回転 　└ rotateだけだと位置がずれる 　　 → translateYで上下の動きも追加で解決 ☑︎ クリックで質問部分はhover後の状態で固定 #デイトラ #プログラミング学習

dd,dtで作りましたがdtにテキスト直書きしていた為、 スライドするとテキストも一緒に動いていた模様。 ☑︎ dd（質問）,dt（回答）で作る ☑︎ dtの回答テキストは別途囲う（←これ） ☑︎ 最初に開いておきたいところは 　 開くcss記載したクラスを当てておく ☑︎ toggleClass利用

📝FAQのアコーディオン デイトラ2nd -DAY25- 動いたと思ったら回答部分のテキストも流れ、 擬似要素で作った「A」だけ残る... 出来たと思ったら何かがいつも足りない😂 原因を考えます。 #デイトラ #プログラミング学習

ulにheight設定して解決。 設定しないとheight: auto;なので タブサイズに合わせてheightが動く。

タブメニュー出来た！と思ったら クリックすると上下にガタつく…😂 #デイトラ #プログラミング学習

📝Glassmorphism｜css 2021年のUIトレンド…って 誰が決めるんですかね？ 立体感と質感は好き。 ① 写真とテキストを置く ② blurの層を入れる ③ blurの掛かっていないテキストを重ねる ④ clip-pathで丸く抜く（少し装飾） #Web制作 #css #今日の積み上げ ▼CodePen codepen.io/coding_days/pen/P…

📝Hover Effect作ってみた 見かけた記事のhover effectが 面白かったので実際作ってみました。 （プロフのCodePenに残してます） よくある往復のアニメーションではなく hover外すとさらに進んで消える… CSSってほんと発想力次第だ。 #Web制作 #CSS coliss.com/articles/build-we…

📝ResponsivelyApp 複数デバイスを同一画面で確認できるので Chromeのディベロッパーツールと 併用して利用しています。 しかも縦横回転も画面上で ワンクリックで可能！ #Web制作 #Webコーダー #プログラミング学習 詳しくはしまぶーのIT大学で紹介されています。 youtube.com/watch?v=YNdBIH9B…