HTML

HTML

【スクロールイベントの最適化】”Intersection Observer API”の活用

これまでのjsのaddEventListener('scroll')によるスクロールイベント Webサイトでスクロールイベントを扱う際、従来のwindow.addEventListener('scroll')メソッドは頻繁に呼び出さ...
HTML

日本語の改行位置を自動で判定するjsライブラリBudouX!

はじめに 英語のテキストは、スペースやハイフンなどの手がかりにより、美しく読みやすい改行が可能です。一方、日本語などのCJK言語では、これらの手がかりがないため、適切な改行が難しいという課題がありました。 そこで注目したいのが...
CSS

【爆速コーディング】Tailwindの本当の使い方まとめ【LPデザインも怖くない】

Tailwind cssについて、Webクリエイターボックスでも利用割合調査のアンケートを行っていましたが、やはりそもそも認知度が低いようです。 今回は、以前にも取り上げた、このTailwind cssが、いったいどんな...
HTML

iPhone実機で、テキスト入力フィールドで画面がフォーカス(拡大)されるのを禁止する方法

けっこう前のことだが、iPhoneで、テキスト入力フィールド(inputフィールド)をタップした際に、画面が自動的にズームインしてしまう問題。Webサイト上で、これをどうしたらズームしないようにできるか対処する方法がわからず悩んだ。 ...
HTML

【ハック的手法】特定のテキストをマークアップしているDOM要素があったときのみ処理をするJS

Shopifyで、アプリで生成されるコードで、特定の要素にクラスやIDを指定できず、要素内に表示されるテキスト情報を見て処理をするかしないかを分けたいとき! このハック的な小技を使えば怖くない! ↓ 例として、すべておなじDO...
CSS

【コピペでOK!】CSSでテキストの文字色をグラデーションに!

コードは以下です。 See the Pen gradation_text by Naoto Yoshikawa (@nanaironanaoto) on CodePen. あらためてコードを解説しますと、 ...
CSS

【あまりにもよく使う右向きアイコンのSVG】chevron(シェブロン)のsvgコードをワンコードで使い回す方法

タイトルにも記載した通り、 よくよく見回すすと、このアイコンを実によく見かけると思う。 参考) bootstrap opensource icons その名は"chevron"(シェブロン) ...
CSS

【CSS,jQuery】input type=”file”のデザインをカスタマイズする【アップロード時のアニメーション,ファイル上限オーバー時のアラートも!】

画像ファイルなどをアップロードできる<input type="file">タグだが、何も手を加えないとこのような見た目になる。 iPhone(iOS)での表示 Windowsでの表示 OSによ...
CSS

【CSS,jQuery】HTMLをハックするcss,jQueryあれこれ

form内でバリデーションエラーになった要素にスクロールで移動する テキストエリアのフォームに文字を入力されないでclickを押すと その箇所までジャンプしてフォームが赤くなる、など。 必要になったときに引き出しがないと意外と...
CSS

【ローカル環境開発高速化】reloadコマンドを使って、テキストエディタ更新時にブラウザプレビューを自動同期

reloadコマンドとは? ECのCMS上で商品ページのが LPのように一枚一枚が作り込まれているとき、大量の画像をアップロードしたり、このページのみに使われるようなスタイルをあてた、読み物コンテンツのページを効率的に作る手順では、...
CSS

【ローカルHTML開発】ローカル環境でホットリロードのブラウザ開発環境を作る!

ローカル環境でネット接続もせず、飛行機の中でも核シェルターの中でも、超サクサクと限りなくストレスなくコーディングしたい方向けです! こんな感じで高速でページを作成できます! テーマにならい手順を高速で紹介します! ...
CSS

【iOS版Sublime Text!?】GoCoEditが神がかってきた件(おまけ:Inspect)

いつの間にか、こんなにできる子に!"GoCoEdit" 先日、愛機のデスクトップで作業していて、ある壁にぶつかり、なんで〜なんで〜と進めずに苦しんでいて、とりあえず頭休めようと、寝たんですが、寝てる時も、あれをこうして、これをああす...
CSS

【HTML】ユーザのOSがダークモードならWebサイトもダークモードに!

いまさらながらダークモードとは! 一度体験してから、大好きになったダークモード。 いちおう説明しますと、ダークモードとは、Windows、Mac OS、iOS、Andoroidなど最近のOSでは切り替え設定ができるようになった...
CSS

CSS,jQueryでよく使うコードまとめ(2021/04/26版)

タイトルの通り、よく使うやつを備忘録としてもまとめてみました。こんな感じで定番の型はアーカイブしていって順次1ページに集約していきたいと思います。 ちなみにサムネイルの画像は僕が別名義で運営する二次元系のブログサイトのメインビジュア...
CSS

【CSSだけで作る】高性能ドロワーメニューの決定版(2021/5/8追記)

CSSだけでクォリティの高いドロワーメニューの作り方! 前回の定番のスライダーのコードに続き、自分用の備忘録として。 サイト作ってると、これも毎回必要になってくる「ドロワーメニュー」(ハンバーガーメニューとかとも言われます)。...
HTML

【JavaScript】カルーセルスライダの定番はFlickityで決まり!なのだが、玉石混交の情報に注意!な件。

結論:このFlickityのコードが正解! カルーセルスライダーのJSライブラリといえば、SlickやbxSliderなど、これまでにいろいろなものを使ってきたが、カスタマイズしないとスマホのフリックに反応しなかったり、レスポンシブ...
HTML

【GoogleMap,YouTube埋め込みで利用可能!】制御しづらいiframeの大きさを可変にし、レスポンシブ対応にする!

今でも使われる機会があるiframe要素ですが、皆さんはどんな時に使ったりしますか?よくある例としては、Google MapやYoutube動画の埋め込みがあると思いますが、このiframe、使用したことある方であればお分かりかと思います...
HTML

Youtube の動画の複数埋め込みをしたページの高速化

このサイトのTOPでYouTube動画を複数貼り付けしているが、そのおかげでページスピードがかなり遅くなってしまったため、何か良い手はないか調べてみたら、あった。 埋め込みしたYouTube動画を遅延読み込みさせる! ifra...
HTML

FORM情報を、HTMLのAタグでPOSTする方法(2023年最新情報更新)

Future ShopというCMSを使用したECサイトのLPを制作する案件があり、 そのLPの中で、特定の商品について、商品ページに飛ばさずに、ボタンを押したら直接カートインする仕様を実現することに。 Future Shopで...

ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

社名合同会社PRYTHMWORKS
事業内容EC/Webサイトの構築、管理保守
CEO吉川直人
法人事務所所在地〒150-0001
東京都渋谷区神宮前六丁目23番4号桑野ビル2階
設立日2023年(令和5年)7月3日
沿革2020年(令和2年)10月
個人事業主PRYTHMWORKS事業開始
2023年(令和5年)7月
合同会社PRYTHMWORKS設立

会社に関するご連絡は以下よりお願いいたします。

mail@prytymworks.tokyo


お問い合わせ用LINEはこちらからどうぞ!

お問い合わせ用LINEはこちらからどうぞ!

LINE

GoogleMeetの相談予約が可能になりました!

以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

タイトルとURLをコピーしました