未分類 swiperのフェード切り替えでゆっくり拡大していくアニメーション
手作りでやると地味に面倒だよなぁという意識持ってましたが、簡単にできる方法があったので紹介。 html <div class="kv"> <ul class="kv_list swiper-wrapper"> <li class="kv_l...
未分類
未分類 未分類 游明朝と縦書き（writing-mode:vertical-rl）を併用すると文字がずれる。
writing-mode:vertical-rlを指定すると縦書きになる。日本語サイトでたまに使います。しかし游明朝と同時につかうと文字がずれるみたいです。 ちょっと探してみましたが解決法みつからなかったので、noto serif jpで代...
未分類 タグにwidthをheight属性を書いたほうがよい時代がまた来たらしい
①スマホが登場するまでは、imgタグにはwidthとheight属性を必ず書く必要ありました。 ②スマホが出てきてレスポンシブコーディングが一般的になるにつれサイズが可変するimgタグにwidthとheightいれないようになっていった ③...
未分類 イノグリのCSS設計手法を整理
CSS設計手法っていっぱいあります。OOCSS,BEM,SMACCS,FLOCCSなどなど。 どれも一長一短です。うちでは、コーディングをずーっとやってきた現場経験をもとに、2021年現在、BEMとSMACCSを融合させたような形を採用して...
JS swiperで要素が1つのときはスライダーを発動させない
swiperのオプションに「決めた数よりも要素が少ないときにはスライダーを発動させない」オプションがあります。 それが「watchOverflow」というオプション こんなふうに使う mySlider = new Swiper ('.sli...
JS jQuery – 要素の幅を小数点以下まで取得する
例えば、.hogeの幅が 50.1px だった場合、 $('.hoge').width(); だと四捨五入され 50px という値が返ってくる。 小数点以下まで取得したい場合は、 $('.hoge').get(0).getBoundingC...
WEB 年1でコーディングとデザイン界隈のトレンドを確認しよう
コーディング界隈も変化が激しいです。いままでのやり方をずっと続けているといつのまにか古くなってしまっていたりするし、かといって毎日のように常に最新トレンドを追い続けていても現場ではまだ使わない（=役にたたない）ものがほとんどです。 ではどれ...