青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

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ですね。

jQueryで関数呼び出すときにfunctionの中に関数を呼びださないとイベント起きなくてもいきなり関数動き出す。

jQueryで関数を作って、他のところで呼び出すときの注意。 teratail.com この記事に似ています。 function changeImg(imgNum) { } って関数を作ります。 で、この関数をクリックで呼びます。 $(".thumnail").click( changeImg(1); ); でいけると思ってたんで…

Webで画像のトリミング、backgroundを使わずに、今度はobject-fit。

tech.motoki-watanabe.net とか書いといてあれですが、 画像をCSSでBackgroundで指定する方式は単純なプロジェクトならばいいものの、画像はそもそもスタイル定義というよりコンテンツ定義で、HTML側で指定したほうが良いケースが多い、と指摘を受けました。…

HTMLで「1つのタグにidを複数指定」は出来ない!

<div id="imgTop js-imgTop"> みたいなこと出来るのかな、と思いやってみたら出来ない。 なんでかなーと思い調べてみると teratail.com 出来ないんですね、Classでは出来るということを知っていたのでidも同じ挙動かと思っていました…! <div id="imgTop" class="js-imgTop"> というわけでこんな感じにしました。 ちなみにな</div></div>…

jQueryの最初の $(function() { } って何ってところからスタート。

qiita.com techacademy.jp まずつまずいたのはJavaScriptをjQueryで書いてもなぜか動かない。 →これはHTMLでJSの読み込み順序を間違えていて、 jQueryを読み込んでから自分のJSを読み込まないとjQueryを使えない。 $(function() { } ってjQueryで書くのはな…

CSSで画像のトリミングをする際にどれが良いかな

style01.net どうやら3つあるらしい。 今回は、これの1つ目の手法である 「画像をBackgroundとして使う」 で実装した。 $imgWidth: 1200px; $imgHeight: 400px; background: url(./img/img1.jpg) no-repeat; background-size: cover; width: $imgWidth; heig…

VJの時にMacbook Proが限界なのか動作が重くなってきたので、TG PROを使ってMacのファンをコントロールして動作軽くしていく

sawayakatrip.com このサイトを参考にやっていきます。 なんでこれやるかって、なんか今までと同じことしようとしても映像再生の際にMacがカクつくようになりまして。で、Twitterになんで〜〜ってツイートしたらMacのファンコントロールのアプリを入れたら良…

CSSをそのまま書くよりSassを使いたいのだが、Sassのインストールでエラー「ERROR: Failed to build gem native extension.」

qiita.com この通りやろうとします。 MacなのでRubyは入ってるので、Sassのインストールを試みる。 まず普通に gem install sass しようとしたらエラー。Permissionがねえよと。 ERROR: While executing gem ... (Gem::FilePermissionError) You don't have …