slideshow と lightbox を併用する【UIKit】 公開日:2023年7月14日 webコーダー挑戦デザインチーム コーダーのオッコです。 弊社はUIKitをコーディングで積極的に取り入れていますが、その要素同士を併用する際に詰まったのでメモとして残します。 やりたかったこと ・商品詳細画面で、複数の画像をuk-slideshowを使 […] 続きを読む
クリックで開閉するヘッダのプルダウンコード(任意の場所をクリックして閉じられる処理あり) 更新日:2024年6月19日 公開日:2023年6月16日 webコーダー挑戦コーダー技術MEMOデザインチーム コーダーのオッコです。 ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。 ヘッダの右上にプルダウンのボタンがある前提の命名になっています。 大筋以外は突 […] 続きを読む
iOSでリンク付きの画像をタップしたときにデフォルトで青くなってしまうのを解消 更新日:2024年6月19日 公開日:2023年5月24日 webコーダー挑戦コーダー技術MEMOデザインチーム こんにちは、コーダーのオッコです。 直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青くなる現象に遭遇したので修正方法をメモがてら残します。 結論 […] 続きを読む
モバイルフレンドリーテストが失敗するときに確認するポイント 公開日:2023年5月12日 webコーダー挑戦コーダー技術MEMOデザインチーム コーダーのオッコです。 SEO対策の一環として用いられる、モバイルフレンドリーテスト。 なぜか失敗するときには以下を試してみてください。 CSSが読み込まれない テスト結果画面で「スクリーンショット」を確認してみてくださ […] 続きを読む
Google Tag Managerを使ってGoogle Analytics 4をサイトに導入する 更新日:2023年5月24日 公開日:2023年5月12日 webコーダー挑戦コーダー技術MEMOデザインチーム こんにちは、コーダーのオッコです。 GA4の設定が大変だったのでメモ代わりに残します。 目次 大前提としてこれらは何なのか Goole Tag Manager(以下GTM)、Google Analytics 4(以下GA […] 続きを読む
:first-childと:first-pf-type の違い 更新日:2023年4月26日 公開日:2023年4月25日 webコーダー挑戦コーダー技術MEMOデザインチーム :first-childが効かない原因は子要素の構造にある コーダーのオッコです。 こういったコードの、aaaaだけ色を変えたい場合に、cssはどのように書いたらいいでしょうか? 答えはこうです。 以下のようにやりがちだ […] 続きを読む
カレンダーがスマホで横スクロール表示になってくれない 更新日:2024年6月19日 公開日:2023年4月20日 webコーダー挑戦コーダー技術MEMOデザインチーム 横長の要素にoverflowが効かない問題 コーダーのオッコです。 カレンダーをスマホで横スクロールにしたかったのですが、カレンダーの横幅のcssを以下のように書いてもはみ出す問題がありました。 width: 100%; […] 続きを読む
safariで、撮った写真をブラウザ上で表示させる機能が動かない【iPhone/iPad】 更新日:2023年5月12日 公開日:2023年1月27日 webコーダー挑戦コーダー技術MEMOデザインチーム どんなシステムか デザイナーのオッコです。 iPhoneで写真を撮らせるフローがあるシステムってありますよね。 例えば顔写真認証サイトなど。 今回の案件では、受付のときに写真が必要なシステムがありました。 流れとしては、 […] 続きを読む
【初心者コーダー必見】コピペで実装できる参考サイト 公開日:2023年1月6日 webコーダー挑戦Webデザイナ挑戦デザインチーム ■Pote Stock とっても簡単にHTMLとCSSで実装できる参考コードがコピーできます。 ※アピコの場合はtplファイルでシステムが入り込んで複雑すぎて成功できませんでした(汗)。 https://pote-chi […] 続きを読む
scroll-hintで横長の表の操作性を改善する 更新日:2024年6月19日 公開日:2022年12月16日 webコーダー挑戦コーダー技術MEMOデザインチーム デザイナーのオッコです。 どうしても横長のコンテンツをスマホで表示しなければならないときってありますよね。 でもぱっと見て「横スクロールができる」とユーザーに分からせるUIを作るのは案外難しいです。 そこで、指マークが出 […] 続きを読む