青いやつの進捗日記。

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

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…

macOS Mojave のダークモード、全部ダークにするんじゃなくて、メニューバーとかだけ、ダークモードにする。

book.mynavi.jp www.rukkora.com これに沿ってやればできます。 defaults write -g NSRequiresAquaSystemAppearance -bool Yes これをターミナルで打ってログアウトからの再起動で、ダークモードに設定すれば、メニューバー等のみダークモードになりその他は…

ところで DOM ってなんですか。

新卒フロントエンドエンジニアなのですが、いまだにDOMって何か説明できません。 developer.mozilla.org Document Object Model。いやわからん。 eng-entrance.com あーなるほど?ノードって言葉はなんとなくわかる。 qiita.com なんかWebサイト作る際に使う…

display: inline-blockで出来る上下の隙間への対処

css-tricks.com ここを見ると早い。 こうやって上下に隙間ができてしまうのを、 このように解除できる。 display: inline-blockになっている階層の上に、 font-size: 0px; /* display: inline-block で出来る上下の隙間へ対処 */ と書いてあげると、消せます…

Photoshopでの画像書き出し。画像アセットで。

Photoshopでデザイナーからデザイン来て、その中で写真とか画像として使いたい部分のパーツを書き出す方法。 Photoshopで、ファイル>生成>画像アセット を開き、チェックをつける。 書き出したいパーツを選んで、グループにまとめて、 〜〜 .png とかの名前…

タスクランナー「Prepros」を使っていく

prepros.io tech.qookie.jp Preprosとはタスクランナーと呼ばれるもの。 今どきCSSを書くときにそのまま書くのではなくSassなどで書き、その後コンパイルしてCSSを吐き出すのがよくやられていると思います。 VSCodeなどエディターでもLive Sass Compilerなど…

画像の上に文字を重ねたい時、positionでabsoluteとrelative。

public-constructor.com 親要素にposition: relative;を持たせ、実際重ねたい要素にposition: absolute;をもたせます。 これで重ねたい要素は親要素の位置を基準になります。 これに加えて、absoluteを指定した要素にはX軸とY軸の指定が必要なので、top: 0; …

VSCodeで間違えてCommand + Q を押してしまい VSCodeの全ウインドウを閉じてしまう悲しみから開放される。

qiita.com marketplace.visualstudio.com これを入れれば、Command + Q を押したら、 って、確認してくれるようになります。

jQueryで遅延実行したいとき、delayしてqueue

github.com $("img.js-top-img:nth-of-type(1), img.js-top-img:nth-of-type(2), img.js-top-img:nth-of-type(3), img.js-top-img:nth-of-type(4), img.js-top-img:nth-of-type(5)").delay(delayNum).queue(function () { // スライド $("img.js-top-img:nth…

JavaScriptでクエリ「init=3」の取得

www.tam-tam.co.jp www.tam-tam.co.jp www-creators.com kigiroku.com qiita.com ここらへんが参考になります。 今回は、URLの末尾に ?init=3と入っていたときに、それを取得する方法について。 jQueryで書いてます。 // クエリ取得 init=3 ?以降(2文字目以…

HTMLとかで同じ画像のパスを直書きで複数箇所に指定する場合は修正漏れが起きる可能性があるのでJavascriptで画像のパスを1箇所で管理しよう

<img class="imgBackgroundSize imgTop js-imgTop" src="./img/img1.jpg"></img> <img class="imgBackgroundSize imgTop js-imgTop" src="./img/img2.jpg"></img> <img class="thumnail imgBackgroundSize" src="./img/img1.jpg"></img> <img class="thumnail imgBackgroundSize" src="./img/img2.jpg"></img> のような感じで、複数箇所…

jQueryの様々な指定の仕方。疑似要素とかidとか

idotdesign.net jQueryで疑似要素(:afterとか)を変えたいとき。でも疑似要素はjQueryから指定できません。そういうときはClassのつけ外しで対応しましょう。 .imgOnGreen::before { background-color: rgba($color: #26c52e, $alpha: 0.5); position: abso…

HTMLCSSで画像のトリミング、最適解はHTMLのタグにstyle属性でbackground-image。

tech.motoki-watanabe.net tech.motoki-watanabe.net とか色々やりました。HTML側で画像を指定したほうがいいと。 しかしtransition効かせたいとかの場合、imgタグで書いてると出来ない。 結局は最適解はHTMLのタグにstyle属性でbackground-imageですね。