コーディングメモ– category –
-
モバイルフレンドリーテストが失敗するときに確認するポイント
コーダーのオッコです。 SEO対策の一環として用いられる、モバイルフレンドリーテスト。 なぜか失敗するときには以下を試してみてください。 CSSが読み込まれない テスト結果画面で「スクリーンショット」を確認してみてください。 ページのデザインが大き... -
Google Tag Managerを使ってGoogle Analytics 4をサイトに導入する
こんにちは、コーダーのオッコです。 GA4の設定が大変だったのでメモ代わりに残します。 目次 大前提としてこれらは何なのか GTMとGA4とGSCの関係性 それぞれを連携させる 開発環境からのアクセスは計測しないようにする方法 2サイト間のユーザーの動きを... -
:first-childと:first-pf-type の違い
:first-childが効かない原因は子要素の構造にある コーダーのオッコです。 <div> <h2>hogehoge</h2> <p>aaaa</p> <p>bbbb</p> <p>cccc</p> <p>dddd</p> </div> こう... -
カレンダーがスマホで横スクロール表示になってくれない
横長の要素にoverflowが効かない問題 コーダーのオッコです。 カレンダーをスマホで横スクロールにしたかったのですが、カレンダーの横幅のcssを以下のように書いてもはみ出す問題がありました。 width: 100%; overflow: auto; -webkit-overflow-scrolling... -
新しいページのtplファイルを追加したい時
こちらはエンジニアとデザイナの領域が交わった作業になりますが、とても簡単とのことなので@オッコさんにレクチャーいただきました。(アピコ） 詳しくは下記になります。 /** * 口コミ商品一覧 */ public function listAction(){ $this->outHttpRespon... -
safariで、撮った写真をブラウザ上で表示させる機能が動かない【iPhone/iPad】
どんなシステムか デザイナーのオッコです。 iPhoneで写真を撮らせるフローがあるシステムってありますよね。 例えば顔写真認証サイトなど。 今回の案件では、受付のときに写真が必要なシステムがありました。 流れとしては、受付時に「写真を撮る」ボタン... -
scroll-hintで横長の表の操作性を改善する
デザイナーのオッコです。 どうしても横長のコンテンツをスマホで表示しなければならないときってありますよね。 でもぱっと見て「横スクロールができる」とユーザーに分からせるUIを作るのは案外難しいです。 そこで、指マークが出てくれるプラグイン「sc... -
インデント【無料】HTMLのコード整形ツール
コーディングにはインデントを入れるルールがありますが、複数のエンジニアやコーダーが入ってコピー＆ペーストなどで編集した時、かなりインデントが乱れ、コードがわからなくなることがあります。 そんな時、カンタンにページのインデントを整形してくれ... -
position:stickyを使ってテーブルの1行目を固定する【css】
デザイナーのオッコです。 表が長くなると、見出しを固定したくなることがありますね。 今日はそんなときに使える、position:stickyを使った処理をご紹介したいと思います。 前提：UIKitを使用しているためある程度のテーブルが既に出来上がっている（ukク... -
Emmetで文字列を囲んでタグを後付けする【Visual Studio Code】
デザイナーのオッコです。 htmlを書いていたけど、途中で要素同士をdivで囲む必要が出てきた！ということ、ありますよね。 そんなときに使えるemmetのショートカットをご紹介します。 まずこのショートカットの名前は 「Emmet: Wrap with Abbreviation」 ...
