青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

slickを使ったスライダーで、.slick-dotsのdot部分の大きさがおかしいときに調整する方法

このページャー部分となるドット、大きさがおかしいときどうするか。 GoogleChrome DevToolでその部分を見て、 ここのfont-sizeっぽい。 ここの指定が.slick-dots li button:beforeなので、それをそのままエディタにコピペ。 .slick-dots li button:before {…

aタグでリンク踏ませて使用デバイスがスマホならそのまま電話をさせたいとき

<a href="tel:0300000000"> これで電話できる。 が、PCのときは電話できる必要がないので、 @media(min-width: 769px){ a[href^="tel:"]{ pointer-events: none; } } で押せなくする。 ^="tel"はhrefがありtelからはじまるものというセレクタ。</a>

USB-CのMacbookPro、HDMIでディスプレイとかに繋ぐと、何秒かに1回固まるときがあるが、原因はHDMI to USB-C の変換アダプタである!!!

もうこれが全て。 家で外付けディスプレイに繋ぐ時は大丈夫なのに、 外でクラブの映像演出でディスプレイ等にHDMI接続するとき、なぜか4秒に1回 の頻度で映像固まるからなんでだろうなあ…って思ってたんですよね で、色々検証した結果、問題はUSB-CとHDMIを…

@media(hover:hover)はIE11では効かない

codeday.me caniuse.com Caniuseを見ると、IE11では効かない。Edgeなら大丈夫です。 なので普通に @media screen and (max-width: 736px) { } とか画面幅でやるしかないのかな。 他に良い案あるのかな。 IE以外では効くから、基本的には @media (hover: hove…

box-shadowを2重に重ねて2重線で囲っているように見せる

こうやって2重で線を囲いたい時 borderを使わずにbox-shadowでやる box-shadow: 0 0 0 1px #d1d1d1, 0 0 0 2px #666666; } #d1d1d1が1px周りに広がり、#666666が2px周りに広がるので、 結果的に2重で線を周りに引ける、みたいになる。

potision:fixed したheaderがページ全体のmin-widthを下回った時にスクロールできなくなってしまう

www.websuccess.jp この記事が参考になる。 .header { position: fixed; top: 0; min-width: 1000px; } みたいに固定されててmin-width指定してあると、min-width下回ると普通のコンテンツは横スクロール出来るが、fixedのコンテンツは出来ない。なので、fix…

デザイン上のボタンと、実際のヒットエリアと、ヒットエリア外の挙動。

qiita.com というQiitaを読みまして。 そういえば自分も以前やったプロジェクトでデザイナー、アートディレクターにヒットエリアについて後々けっこう言われたなあ、と。 ヒットエリアと、更にはヒットエリア外の挙動も。 特にモーダルはそうだと思うんです…

エラー時の挙動を書いておく重要性。

当たり前かもしれないけど、上手く動かないときのエラーを見つけるの、明確なエラーとか出てなかったらどうしようもないんですよね。 最近だとjson読み込んでJavaScriptで生成する部分があったのだけど、そこでうまくいっていないのか、その生成をスライダー…

疑似要素で画像を置いて、高さ幅を制御する

saruwakakun.com 背景画像にして、background-size: contain; にすればOK content: ''にして、background-image: url()で画像を指定し、background-size: contain で、width、heightで幅、高さで制御出来ます

画像ってJPGとPNGとGIFとSVG、結局どれを使えばいいの。

uxdesign.cc これが参考になります。 png 背景に透明処理が必要なもの 例として、シャドウが付いている、テキストのみの書き出し、角が丸い jpg 四角くて背景があるもの 例、メインイメージ、シャドウが付いていないボタンなど gif 色数が少ない画像。 (デ…

box-shadowってなに、PhotoshopのドロップシャドウからどうCSSに落とし込むの

ってなりません? ボタンとか、後ろから浮かせたいものにつけるシャドウ。 あと、Photoshopでドロップシャドウってついてるやつ、値とかそのままCSSに入れればOK、とならないんですよ。面倒くさいったらありゃしない。 developer.mozilla.org まあ影つけるや…

Swiperというライブラリで簡単にスライダーを実装する

www.willstyle.co.jp Swiperのバージョンとかによって微妙に書き方が異なる印象があるので注意。 idangero.us <link rel="stylesheet" href="<%= pathToAssets %>lib/swiper/css/swiper.min.css"> <script src="<%= pathToAssets %>lib/swiper/js/swiper.min.js"></script> これで読み込む。 </link>

SVGをgulpのimageminのsvgoで画像圧縮かけると、デフォルトの設定のままだとviewboxの記述が消える、結果、IEでの挙動がおかしくなる…!

qiita.com codeday.me どうやらgulpのtaskの画像圧縮するタスクのgulp-imageminでsvgoでSVGを圧縮する際に、viewboxの記述を消してしまうそうで、そうするとIEで挙動がおかしくなる模様。 qiita.com のように、 imagemin.svgo({ plugins: [ // viewBox属性を…

position: absoluteの水平中央寄せ

cssで position : absolute な要素を中央に配置する(上下左右センタリング)|プログラムメモ どういう論理なんですかね 親要素に position: relative; して、中央寄せしたい要素に position: absolute; left: 50%; transform: translateX(-50%); でOK。 ab…

Macを新しく買い替えたけど、LINEの会話履歴とかをそのまま引き継ぎたいとき!

今はスマホならiCloudにバックアップをとれるので、そこ経由でデバイスを変えてもLINEの履歴を引き継げるようになりました。 しかし、PC版LINEではそのような機能は用意されていません。 2台目のPCでLINEにログインすると直近2週間の履歴のみは見られます。2…