さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 3 Sep. 2019

    地味に実務で使えるコーディング知識5選

    CATEGORYBlog TAG

    地味に便利な知識ってありますよね。

    実はバナナは黒くなってる方が美味いとか。

    実はレンタカーは「rent a car」の和製英語だったとか。

    実は樋口、新しいメガネが欲しいと思っていたりとか。

    そんなめちゃくちゃ役に立つ情報を今回はばらまいていきたいと思います。

     

     

    IOSではbodyにoverflow hiddenは効かない

     

    要素を横からはみ出させて動きのあるかっこいいページを作っているときにbodyにoverflow:hidden;をかけることによって横スクロールを出させないようにできます。
    がIOS端末(iPhoneなど)だとなぜか効きません。細かくoverflow:hidden;を当てることで対応できそうです。

     

     

    iPhoneはtelリンクが黒くなる

     

    <span class=”tel_num”>Tel:0952-25-7360</span>
    .tel_num a {
    color:#fff !important;
    text-decoration:none !important;
    }

    これは割と有名なものかもしれませんが普通に色を指定しても色が正しく表示されません。!importantを使うことによって無理やり修正できるのでそれで対応しましょう。

     

     

    IOSが勝手に文字が大きくなる

    -webkit-text-size-adjust: 100%;

    これはたまになります。がどんなタイミングでどうなるのか発生条件が難しいのであらかじめreset.cssにおまじないとして書いておくといいかもしれません。

     

     

    横長の画像でも正方形にできるようなcss

    object-fit: cover;

    これは最近出てきた新しいcssですね。
    簡単に言うと画像の縦横比を保ちつつ、マスクをかけながら表示することができます。ポップアップのギャラリーなんかを作るときに便利なのですが、対応しているブラウザが少ないことがネックです。
    Edge, Firefox, Chromeは良いですが、IEdeha壊滅的ですね。しかしJSなどで対応可能なので使ってみても良いかもしれません。

     

    transitionを使用しているときに文字や画像がちらつく場合

     

    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;

    これはつい先日起こった謎事象なのですが、transitionを使いつつ、アコーディオンを使ったときになぜか文字がちらつく現象が起こりました。
    上記のおまじないをtransition部分に書くことでうまく動いていないぜこのやろうという場合は、ぜひおまじないをかけてあげてください。

    参考URL:https://yumeirodesign.jp/blog/201312/csstransforms_fixed.html

     

    まとめ

     

    意外と自分がつまづいた部分って人と共有することがないので自分がつまづいたことはメモを取ってみんなで共有しましょう。

    女性だらけのハーレムを探し、たどり着いたここ湘南!常に調味料を切らし、今日は貴女の部屋へ!毎日コーフンして寝不足気味の強者ジプシー。