www.itti.jp これが参考になりました。 ポートフォリオとしてある https://motoki-watanabe.net/ このサイト、学部3年の時に作ったのですが汚すぎて更新もしんどいので放置されてて、今ポートフォリオはnotionで仮運用されているのでそちらに飛ばしたい。 FT…

こんな感じで押してないときは緑、押したら赤に光らせようと思います。 saikuro0526.hatenablog.com 参考にしました。 まずMIDIコンをDetectでアサイン。 ここまでは普通。ここからが重要。 nanoKONTROL2とかなら普通に echo values back out to:でMIDIコン…

たぶんバグですけどね。散々使ってて初めて出会いました。 普通にレイヤーの名前を 200% img05.jpgとかにしてアセット書き出ししようとしたら こうなる。クリッピングマスクしてそのマスクかけた方の名前変更したらこれ。 で、原因は謎。おそらくPhotoshopの…

手動で文章に改行を入れたくない。 wemo.tech 禁則処理、例えば句読点(,や.)が文章の先頭に来ないようにとか。 どこまでを禁則にするかによりますが、単語レベルで単語中では改行しないように、とかも出来ます。これらを改行調整することなく良い感じに自動…

Swiperというスライダーを作るときに便利なプラグイン。 swiperjs.com もう超絶便利ですよね。 で、こいつをWebpackとかで使う際に注意が必要だと最近わかりました。 なぜかIEでだけ、普通に使ってるとJS全部機能しません。 【JS】スライダーのSwiperをwebpa…

fukatsu.tech というわけでまずはこれ。 brew.sh /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" で、Homebrewが入ります。 次に、yarnのインストール。 yarnpkg.com brew install yarn これでインス…

sterfield.co.jp text-align: justify; text-justify: inter-ideograph; これで出来る。 基本はtext-align: justifyで問題ない。 text-justify: inter-ideographはIE用とのことだが、やってみたところ上手くいかなかったので諸説ある気がする。text-justify:…

こんな感じでタブで選んで中身のコンテンツを入れ替えたい。 わかりづらいがこの上がタブで、下がコンテンツ。 しかも、そのタブは上下にあり、どちらでも中身のコンテンツを入れ替えられる。 ↓下 つまり、 こういう感じ。 で、問題なのは、 ・このコンテン…

tech.motoki-watanabe.net IEでスムーススクロールのなんかでガタついてしまうという現象 があったが、これ以外にも、 どうやらposition:fixedの要素にz-index: -1 を指定すると、ガタついた。 原因は謎。z-indexを指定しない、もしくはz-index: 1を指定する…

mo-ja.net これで解決。 つまり、スクロールを無効にして、JSで同じような動作を作って上げる必要があるそうです。 これをブラウザ判定して、IEやEdgeのときに上記のJSを効かせてあげれば解決します。

えーなんで。 Githubの自分のプロジェクトで、 remote: Permission to ユーザー名/プロジェクト名.git denied to ユーザー名 って出てCommit出来ない。 で、なぜかは理由はよくわからないが、解決方法を見つけた。 blog.vtryo.me teratail.com 追加したいデ…

slick - the last carousel you'll ever need なんと、初期設定で、 pauseOnFocusとpauseOnHoverがtrueになっている。 なので、初期設定ではそのスライダーにフォーカスした時（フォーカスした時ってなんなのですかね、ホバーとなにが違うのか）と、スライダ…

www.webdlab.com iPhone Safari 横 iPhone Safari 縦 横にすると、※1が拡大されてしまう。 おそらくiPhoneのSafariのみ。 なので、 developer.mozilla.org これでテキストの自動拡大アルゴリズムを制御する。 body { //iPhoneのSafariでで横向きにした際に一…

ithat.me ここに書いてあります var $slider = $('.slider'); $slider.slick(); // スライド切り替えの度にスライド番号を取得 $slider.on('afterChange', function(slick, currentSlide){ var current_slide = $my_slide.slick('slickCurrentSlide'); conso…

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

stella-design.biz qiita.com その要素にdisplay:blockとかdisplay:flexとかdisplay:inline-blockをかけてあげれば解決する。 とりあえずdisplay:inlineだとだめ。 今回自分でやっていてバグが発生した箇所はaタグに対してだったので、デフォルトがdisplay:i…

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

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

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

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

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

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で幅、高さで制御出来ます

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

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

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>

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

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