青いやつの進捗日記。

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

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

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 …

Adobe XD でシンボルを使って同じような部分を一気に編集する

Adobe XD の機能にシンボル、があります。 blogs.adobe.com blog.maromaro.co.jp で、これ使ったら同じようなパーツは一気に編集できる! と思ってたらなんか同期して勝手にやってくれるわけじゃないんだな…と。 いや、厳密に言うと「色」「位置」とかは同期…

Adobe XD のアセットの使い方がカラーだけ少しわかった

これです。Command + Shift + Y でレイヤーからアセットに表示が変わります。 こうやって今回はNavBarを選択し、 アセットのカラーの右上のプラスを押すと、カラーにそのNavBarの色が追加されます。 これ以降、パーツを選んでアセットのカラーの色の部分を押…

VSCodeのSetting Syncで設定同期させたのでフォントが変。

tech.motoki-watanabe.net からの続編なんですが、フォントが変。知ってる設定じゃない。 で、なんでかって、答えは簡単で 会社のMacにそのフォント入れてない ただそれだけでした。笑 www.rs.tus.ac.jp これを使ってるので入れたらすぐ解決しましたとさ。

VSCodeのSetting Syncの設定。自宅のMacと会社のMac。

会社のMacと家のMacの設定を同期させたい。 qiita.com とりあえずこれをすればアップロードできてGistにjsonが保存され、完了。 私の場合は家のMacbookPro の VSCode の設定をアップロード。 さて明日会社のMacbook Airにて反映させることができるか…? さて…

Adobe XDに入門し、ワイヤーフレームを書こうとしている

qiita.com Adobe XDの入門。 とりあえず画像の切り抜きを出来た。 で、Adobe XD UIキット なるものがあったのでダウンロードしてみて、使ってみようとする。 www.webcreatorbox.com これからWires jp のものをインストール。 helpx.adobe.com これを見てなん…

論文書くことに基本的に気をつけなければいけないこと。

ってなんなんだろな。と思って調べてまして、 qiita.com これが参考になりました。 論文に置いて体裁を整えるのは非常に大事。 句読点の統一くらいは知っていましたが、私的には並列列挙のやり方が参考になりました。あとキャプションはけっこう教授に突っ込…

はてなブログのデザイン、サイドバーをちょこっとカスタマイズ

こんな感じに。 sentence.hatenablog.jp 使っているテーマ「Sentence」の作者さんのをそのまま使いました。 shirokai.hatenablog.com www.royalnaught.com ここを見るとはてなブログではClassで指定するだけでいろんなWebアイコン使えるみたいですね。Instag…

latexでエラー、なんで表 4.6 を指定してるのに 表 4.2.3 って書くのそんな表ないよ!!ってとき。

okmount.hatenablog.com この通りやればいけます。 これの多くは,\labelの位置が原因で起こります.このようなことが起こった場合はとりあえず,\captionのすぐ下に対応する \labelを持ってきてみてください.そして何回かコンパイル(一回だけだと反映され…

MacでLateX文書にlistingsでソースコード表示させる。colorで色付き。そしてplistingsで日本語も表示できる!

tech.motoki-watanabe.net これの続編。まず先にこれ読んでからこの記事読んでください。 なんか日本語表示できてるとか抜かしてたんですが出来てはいるんですけど正しくは出来ていなくてバグって日本語コメントの部分が変なことになってました。 なんか日本…

LateXで画像データだけをdraftにしてコンパイルを軽くする。ソースコードはdraftしない。

tech.motoki-watanabe.net この記事で \documentclass[a4j,11pt, draft]{jreport} で画像が枠だけになる!!と言いました。 間違ってないんですが、実はソースコードは枠どころか中身が消えて且つ枠のみになり、確認にならないと判明しました。 で、正しい方…

LateXで画像多いとコンパイル時間かかるから画像を枠だけに。draft。

画像多いとその分コンパイル時間かかりますよね。待ち時間めっちゃ長くなる。コンパイル同時にしてくれる系のLateX環境使ってると重いですし。 そこで!! qiita.com これですこれ。 \documentclass[a4j,11pt]{jreport} を \documentclass[a4j,11pt, draft]{…

BibTeXで謎のエラー。! Missing } inserted. <inserted text> } l.130 \end{thebibliography}

ペチャバト - AR対戦バトル・大乱闘シューティングゲームGraffity Inc.ゲーム無料 をBibに追加したい。 ので、 https://itunes.apple.com/jp/app/%E3%83%9A%E3%83%81%E3%83%A3%E3%83%90%E3%83%88-ar%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%…