「webコーダー挑戦」の記事一覧

クリックで開閉するヘッダのプルダウンコード（任意の場所をクリックして閉じられる処理あり）

コーダーのオッコです。ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。ヘッダの右上にプルダウンのボタンがある前提の命名になっています。大筋以外は突 […]

こんにちは、コーダーのオッコです。直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青くなる現象に遭遇したので修正方法をメモがてら残します。結論 […]

コーダーのオッコです。 SEO対策の一環として用いられる、モバイルフレンドリーテスト。なぜか失敗するときには以下を試してみてください。 CSSが読み込まれないテスト結果画面で「スクリーンショット」を確認してみてくださ […]

こんにちは、コーダーのオッコです。 GA4の設定が大変だったのでメモ代わりに残します。目次大前提としてこれらは何なのか Goole Tag Manager（以下GTM）、Google Analytics 4（以下GA […]

:first-childが効かない原因は子要素の構造にあるコーダーのオッコです。こういったコードの、aaaaだけ色を変えたい場合に、cssはどのように書いたらいいでしょうか？答えはこうです。以下のようにやりがちだ […]

横長の要素にoverflowが効かない問題コーダーのオッコです。カレンダーをスマホで横スクロールにしたかったのですが、カレンダーの横幅のcssを以下のように書いてもはみ出す問題がありました。 width: 100%; […]

どんなシステムかデザイナーのオッコです。 iPhoneで写真を撮らせるフローがあるシステムってありますよね。例えば顔写真認証サイトなど。今回の案件では、受付のときに写真が必要なシステムがありました。流れとしては、 […]

■Pote Stock とっても簡単にHTMLとCSSで実装できる参考コードがコピーできます。 ※アピコの場合はtplファイルでシステムが入り込んで複雑すぎて成功できませんでした（汗）。 https://pote-chi […]

デザイナーのオッコです。どうしても横長のコンテンツをスマホで表示しなければならないときってありますよね。でもぱっと見て「横スクロールができる」とユーザーに分からせるUIを作るのは案外難しいです。そこで、指マークが出 […]