忍者ブログ
02 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

29 March

枠線アニメーション

https://zxcvbnmnbvcxz.com/12-css3-border-animate/index.html
https://zxcvbnmnbvcxz.com/demonstration/border.php.html

いつか使いたい時ように・・・
PR
28 December

safari　2回クリック押さないと動かない症状

症状
iphone safari　のみ、2回クリックしないとクリックイベントが発動しない箇所がある

原因
https://on-ze.com/archives/3066

ありがてえ‥これをみつけなければ死んでた。
なぜならmacもってないから開発者ツール使えなくて検証できない
:hoverの指定が邪魔してるらしい
私はopacityじゃなかったんで、hover自体がダメっぽい



macをもっていないので、iphoneだけじゃなくてmacでそうなるかはわかない
でもipadで試してもらったら同じ挙動だったのでmacもそうかもしれない
ということでsafari以外のみhoverのcssを設定することにした
safari以外cssハックをした
safariはhoverを設定してないというcss

safariってあまりおかしくならないので気にしてなかったが、safariのみおかしくなった場合とにかくmacがないのでやばい


safari　iphone
jsのアラートでチェックしてみたところ、1回目のクリックではクリックイベントとして認識されておらず、アラートが発動しなかった。2回目のクリックでアラートが発動したので、そこで初めてクリックが認識された模様。つまり1回目のクリックはhoverに阻まれていた？ような形

jsが全然わからないので、たまたまこんなことやってみようかな（アラートとかconsole.log()　）とかやってみて原因追求ができた。
最初はクリックイベントを強制的にもう1回やるとかダブルクリックさせるとか、色々jsでやってみたんだが、一向に動作しないので、私の記述が悪いのかなんなのか全然わかんなかった。
しかし、1回目のクリックイベントが無効状態なら、私が書いたようなjsはそもそも発動してなかったという可能性が高いのかなあ



opacityなんて使いまくってるし、レスポンシブで画像リンクとかそのままopacityやっちゃってるけど今まで1回目のクリックで飛べないなんて経験したことがなかった
いや、そこまでiphoneで画像クリック確認してないが…
26 October

aタグの中にaタグいれたい　aタグをobjectで囲う

https://qiita.com/fukamiiiiinmin/items/7412b21c6df5de31cab1

aタグ内のaタグを　object　で囲う

<object><a href="#">ああああああああ</a></object>

↑ありがたい引用

hoverで装飾したりするために全体にaタグをつけ、中のテキストにも
カテゴリーのaタグを付けたいとかよくある

でもそうするとソースでaタグが勝手に分割されてしまう（勝手に補完されるらしい）
中のaタグをobjectで囲うと大丈夫なるらしい



13 July

画像　hover　ずれる

https://sleep-sheep.info/2016/09/01/chrome%E3%81%A7hhover%E3%81%97%E3%81%9F%E9%9A%9B%E3%81%AB%E3%81%9A%E3%82%8C%E3%82%8B%E7%8F%BE%E8%B1%A1/

なんかずれたら以下cssを指定

a img{
backface-visibility:hidden;
}
22 June

テキストシャドウ　縁取り

https://qiita.com/NoxGit/items/eb0904822c0f0fe97650

このサイトのコードがすごくよい
自分の使いたい太さに合わせてこぴぺる
しかも自然だし、ありがたい

太くてしっかりした縁取り
text-shadow: 
    black 2px 0px,  black -2px 0px,
    black 0px -2px, black 0px 2px,
    black 2px 2px , black -2px 2px,
    black 2px -2px, black -2px -2px,
    black 1px 2px,  black -1px 2px,
    black 1px -2px, black -1px -2px,
    black 2px 1px,  black -2px 1px,
    black 2px -1px, black -2px -1px;