imgタグでsvgを設置。
width =”希望の幅”
height=”auto”
基本はこれでOK
でもIE11だと小さかったり大きかったり。
zeplinで書き出したサイズのせいなのかなと思いPC版のサイズで書き出し直し。
なおる
だが、別の箇所で使っているときに結局サイズ感がおかしい
width heightともに数値で設定してもおかしい。
そんなときはsvgをエディタで開いてみてviewboxの値があるかチェックするといいのかも。
とりあえずsvg内のwidth heightと合わせて
viewbox=”0 0 widthの値 heightの値”でやってみたらレスポンシブに対応できた。
よーわからん
とあるサイトをみて初めて知りました。
利用するCSSは
・-webkit-background-clip:text; // これ設定しないとただ単に背景に画像やグラデがはいるだけ。
・-webkit-text-fill-color:transparent; //枠線も透明にしちゃう
・display :inline-block; // blockのままだと全体幅をみちゃう？
レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。
今回お世話になったサイト。
◆Imagemapを生成してくれるサイト
https://www.image-map.net/
◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった
◆レスポンシブ対応させるプラグインの説明サイト
ということで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よりかはいいのかな。
Chrome、Firefox、Edgeでは問題なくtransitionアニメーションをしているのにIE11だとアニメーションが発動しなかった。
原因は該当要素にflexを指定しているせいでアニメーションがうまくいかなかった。cssでallにしてるせいかもしれないけど。
疑う箇所として記憶しておこう。
twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが
<a class="twitter-timeline" data-width="100%"
のくだり。
幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。
jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。
iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】
簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。
でかいけつしました。
このアイデアを思いつくのが素晴らしいです。ありがとうございました。
ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。
そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク
そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。
原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/
諦めるしか無いのか・・・
と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。
たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。
今まではJSなどで親要素の幅を取得してそれを設定して～～
とやっていたが、とても参考になるサイトを発見。
https://moriawase.net/horizontal-scroll
上記のサイトだとinline-blockを利用しているがflexで出来たら良いね？って思ったら出来た。
inline-blockの要素間の隙間調整がめんどくさいなと思ったけど解決。
.parent-parent{
overflow-x: auto;
}
.parent{
display: flex;
white-space: nowrap;
}
.child{
お好きなように
}
多分これでいける。
参考サイト様 ありがとうございました。
jpgやpngだと当然のようにcover containが反応するのにsvgを背景にしたとき縦横比を変えることができませんでした。
Sketchなどで書き出せばその辺元々クリアなのかもしれないが、イラレで書き出してダメでした。
設定しだいではイケるのかもですが。
そんなときはsvgを何かしらのエディタで開いて
preserveAspectRatio=”none”
を追記すると変形してくれるようです、