青いやつの進捗日記。

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

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

当たり前かもしれないけど、上手く動かないときのエラーを見つけるの、明確なエラーとか出てなかったらどうしようもないんですよね。 最近だと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…

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 を押したら、 って、確認してくれるようになります。