デザインカンプが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が動く。

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