先日僕が制作に関わったサイトについて連絡があり、「iPhone（Ver. 11, 12共に）のSafariでlighboxで表示させたiframe内のリンクをクリックするとiframe内のスクロールトップに戻る」というバグ報告が届きました。

最初これを聞いた時、誰かがページ内リンク設定しちゃったのかなーと思いソースを確認するも違い、何故かパソコンのブラウザからだと正しく機能していました。

、、、え？
iPhoneだけ？

一応解決は出来たので、方法をめも

(さらに…)

ブログを書いていると別サイトにリンクしたい時ってないですか？
別サイトだから、自分のサイトからアクセス後に離脱して欲しくないので、別タブで開かせてページを閉じたら戻ってきてほしいものですよね？

ただ、毎回「target="_blank"」の設定をするのはめんどくさい！
僕もそう思い、簡単なjsを作ってみました。
一応、jQuery必須です。

(さらに…)

ラジオボタンをフォームで使いたいけど、間違ってクリックされた時は外させることがデフォルトの仕様ではできません。
（間違う可能性がある時点でフォームの設計が悪いとも言われかねないですが。。）

しかしそういった要望があるのも事実。
javascriptを使うことで対応が可能です。

(さらに…)

私はよくスライダーを実装する際にjQueryプラグインである「slick」をよく使うのですが、今回はそのslickを使ってスライドショー（フェイドショー？）などを作った際に一番最後まで行ったら自動再生を止めたいといった依頼を受けました。

そんなに難しくないだろ〜なと思い引き受けたら、これがビミョーに手こずる内容だったので記録として残しておきたいと思います。

(さらに…)

最近個人的に作っていたホームページをLINEのブラウザで見た所、javascriptが動いていない箇所を発見。。。

jsのファイルを解析して変更してを繰り返したところで理由がわかったので、ご紹介。

(さらに…)

一昔前、iPadやiPhoneなどといったRetinaディスプレイが世に出た頃、Web制作の世界では通常サイズと2倍サイズの2種類の画像を書き出し、javascriptなどを使って表示を出し分けたりしていかに画像やアイコンを綺麗に見せるかといった技術が出回っていました。

現在ではブラウザやスマートフォーンの進化のおかげで、イラストレータで作ったSVG（オブジェクト）が画像と同じように使えるようになってきて、同じ画像を2倍で書き出したりといった手間が減ってきています。

私も案件によってはsvgを多用したり、svgタグをjavascriptで動かしたりとsvgの恩恵を受けていたのですが、、、

コーダーが嫌ってやまないInternet Explorer。
こやつでsvgタグを使うとheightが横幅に対して自動で設定されず、表示が崩れるといった問題に遭遇しました。

今回はjavascriptで解決できたので方法をご紹介。

(さらに…)

サイトの作りによってはiframeを使うことは今でもあると思います。

iframeの使用用途としては、
・自分で作ったページをiframeで読み込む
・外部サイトの動画などを読み込む
といった使い方があると思います。

そんな中、今回は自分で作ったページをiframeで読み込んだ際に、
MacのSafariの時に要素が透明化され表示されないといったバグに遭遇したので、
回避方法をご紹介。

(さらに…)

レスポンシブやスマートフォン専用ページでページ内リンクを実装した時に、稀にページ内リンクが効かなくなる時があります。

理想はクリックしたらスムーススクロール（スムーズスクロール）して欲しいのですが、なぜか動作しない。

そんな時は普段使いしてるスムーススクロールのjsを紹介する内容に変更して見てください。

(さらに…)

お問い合わせフォームを入力中に5ボタンマウスやトラックパッドを使用している方は間違えてページバック（戻る）を行ったことある方、多いのではないでしょうか。

今回は製作者のちょっとした心遣いで誤操作を防止できるのでそんな方法をご紹介。

(さらに…)

カラーミーやMakeShopを使いレスポンシブサイトを作ろうとした時に問題となるのが、viewportが設定できないことかと思います。
なのでJavaScriptを使用し、viewportを設定してあげたいと思います。

(さらに…)