結局使うことになるImagemap

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

サイトとjsonpの文字コードが異なるせいで文字化け発生

Makeshopのサイトをいじっていて発生。
MakeshopはEUC-JP。jsonpはutf-8

beforeSendでEUC-JP指定すれば解決や！って思ったけどうまくいかなかった。

そんなときは　scriptCharset　を利用するといいらしい。

上記参考にさせていただきました。

colorboxでmodalが開くときに画面幅より一度大きい状態からフィットする現象

サイトのつくりの影響かもしれないが、画面を大幅に超える大きさで表示された後にぴったりとアニメーションで調整される現象がおこった。

 $(".inline").colorbox({
inline:true,
width:"90%",
maxWidth:1020,
rel:'group',
closeButton:false
});

スマホのときは画面幅の90％でPCなどの時は1020くらいを最大にしてよっていう書き方、

色々微調整してもうまくいかなかったので、以下のように逃げました。

$(".inline").colorbox({
inline:true,
maxWidth:"90%",
rel:'group',
closeButton:false
});

.modal-content {
  max-width: 1020px;
}

とりあえずこれで回避。
原因はなんだったのだろうか。

2560 x 1440のモニタを買ったけどたまに1920で表示されるときがある。windows10

windowsのダメなところなのか、なんなのか。
起動するとせっかくの2.5kモニタが今までの2kとしてボヤっとして表示される。

再起動で直ってたからいいかなーと思ってたが今日からそれでも直らず。

https://support.microsoft.com/ja-jp/help/182595/unable-to-select-a-higher-screen-area-in-display-properties
公式のリンクを参考にしようにも

[スタート] ボタンをクリックし、[設定] をポイントして、[コントロール パネル] をクリックします。次に、[画面] をダブルクリックします。

まず、これがない。

のでどうしようか悩んでいたのだが自分の環境だけかもしれないけど、nbiviaのコンパネにはいってディスプレイ＞解像度の変更　で最大解像度を選べば平気ぽい

 

【解決】atomでejsを利用するときにemmetがうまく機能しない

調べると環境設定 パッケージ emmetのSetting Extensions PathにSnipets.jsonを置けとあるがそれがどこなのかよくわからない。

~/emmet

これどこよと。

ユーザーフォルダ直下の、、、っていうブログもあったけどおいてみたがちがう。

ユーザー/HOGEHOGE/.atom/emmet/ココ

に置けばいいらしい。

 

中身はこれ

{
"ejs": {
"filters": "ejs",
"extends": "html",
"profile": "xml"
}
}

とおもったけどうまくいってない・・・

 

2018/9/29追記

解決しました。
上記でShift+eではEmmetが動いていることが確認できたのであとはショートカットの設定を変更するだけでした。

Setting > keybindings > your keymap fileをクリックでユーザー設定を追加。

追加内容は以下

'atom-text-editor.editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'

 

CSSでradioを修飾するときにlabelにidを振るのはエンジニアさんに苦笑いされる

ということでid振らずに何とかならないかね、ということで考えてみたらどうせソースが少し汚れてしまうならばlabel内にspan置けばいいじゃないと。

<label><input type="radio" name="name" value="hoge" />hoge<span class="radio-checked"></span></label>

こんなかんじか。
inputの後ろじゃないとCSS的に指定ができないので注意。

あとはCSSを（以下はSass）

label {
display: flex;
position: relative;
cursor: pointer;
padding-left: 25px;
margin-right: 20px;
.radio-checked {
position : absolute;
left: 0;
display : block;
height: 17px;
width: 17px;
border-radius: 17px;
border: 1px solid #000;
&::after {
position : absolute;
content : '';
width : 11px;
height : 11px;
border-radius : 100%;
left : 3px;
top : 3px;
background-color : transparent;
z-index : 1;
}
&::after {
}
}
input[type="radio"] {
display: none;
&:checked +.radio-checked {
border-color: #f00;
&::after {
background-color : #f00;
}
}
}
}

こんな感じか。
横並びにするのにflex利用したりしてるけどこの辺は好みで好きなようにできそう。

label idよりかはいいのかな。

IE11でtransitionがうまくいかないときは該当要素にflexを指定してる可能性があり？

Chrome、Firefox、Edgeでは問題なくtransitionアニメーションをしているのにIE11だとアニメーションが発動しなかった。

原因は該当要素にflexを指定しているせいでアニメーションがうまくいかなかった。cssでallにしてるせいかもしれないけど。

疑う箇所として記憶しておこう。