レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。
今回お世話になったサイト。
◆Imagemapを生成してくれるサイト
https://www.image-map.net/
◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった
◆レスポンシブ対応させるプラグインの説明サイト
カテゴリー別アーカイブ: CSS
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にしてるせいかもしれないけど。
疑う箇所として記憶しておこう。
iphoneでtwitter widegetのiframeが横にはみ出るバグの修正
twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが
<a class="twitter-timeline" data-width="100%"
のくだり。
幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。
jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。
iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】
簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。
でかいけつしました。
このアイデアを思いつくのが素晴らしいです。ありがとうございました。
position:fixed;にした要素の子にoverflow-scrolling: touch;を設定するとフリーズすることがある
ナビの固定などでヘッダーを固定、その子要素のナビがクリックで階層表示されるみたいなことをやっているとfixedした要素が画面の高さを超えることが多々ある。
そういうときにナビに対してoverflow-y:scroll;をしてスクロールできるようにするのだけどデフォルトのままだとカクカク
そのため
overflow-scrolling: touch;
を設定してスムーズになるようにするのだが画面の高さ以上にスクロールしようとすると画面が数秒フリーズする。
原因調べていたら以下のようなサイトの情報が。
http://webdev.jp.net/ios-safari-fixed-overflow-scrolling-bug/
諦めるしか無いのか・・・
と思っていたけど試しに親要素自体に
overflow-scrolling: touch;
を設定してみたらバグなくなった。
たしかfixedとoverflow-scrolling: touch;は一緒にかけるな。的発言があったような気もしつつ。
まぁいいか。
iphoneなどのスマホで横スクロールメニューを作るけど横幅設定がめんどうくさい
今まではJSなどで親要素の幅を取得してそれを設定して～～
とやっていたが、とても参考になるサイトを発見。
https://moriawase.net/horizontal-scroll
上記のサイトだとinline-blockを利用しているがflexで出来たら良いね？って思ったら出来た。
inline-blockの要素間の隙間調整がめんどくさいなと思ったけど解決。
.parent-parent{
overflow-x: auto;
}
.parent{
display: flex;
white-space: nowrap;
}
.child{
お好きなように
}
多分これでいける。
参考サイト様 ありがとうございました。
svgをbackground-sizeで変形しようとしても無視されるとき
jpgやpngだと当然のようにcover containが反応するのにsvgを背景にしたとき縦横比を変えることができませんでした。
Sketchなどで書き出せばその辺元々クリアなのかもしれないが、イラレで書き出してダメでした。
設定しだいではイケるのかもですが。
そんなときはsvgを何かしらのエディタで開いて
preserveAspectRatio=”none”
を追記すると変形してくれるようです、
テストサーバーでサイト構築、問題なしからのwordpressに入れたら変に崩れるときがある。CSSが無視される？
すごくレアなケースぽいけど備忘録。
おそらくWordpressを何度も制作していると自分のテンプレ的なものが出来上がっていると思う。
今回も何も気にせずにそのような作り方をして必要な場所を書き換え～～～
本番にアップ！だがちょっとだけ崩れる。
Flexboxの指定が無視されている。
上下センター合わせにして、って言ってるのにそこだけ無視されている。
CSSを見比べても問題なし。
type=text/cssとか入れても変化なし。
最終的にわかったのが
<!DOCTYPE html> <html lang="ja">
ココをちゃんと記載せずに
<html>
で書いてしまったことが原因でした。
display:flexにしたら良きに計らえすぎて画像の幅とかが意図したより小さくなることがある
display:flexでレイアウトを横並びにするのはとても助かる機能なので利用しています。
が、今回画像とテキストが横並びになるレイアウトでテキストが多めの時に画像幅が勝手に狭くなる現象に遭遇。
画像のwidthを指定してもダメで困っていたが、以下の方法で対応可能。
子要素にflex:noneを指定すると下手な気遣いが減って画像幅を担保してくれました！
今回はimg側に上記CSSをあてました、
iphoneなどのスマホでposition fixedにした時にスクロール中にｆｉｘｅｄしてくれないからtransform: translate3dで対応してみたらz-indexではまった
タイトルで全てを終わらせている感じ。
ちょっと複雑な重なりあいをテストしていてタイトルの現象にハマった。
<div class="block-1st"> <div class="saizenmen">最前面に来てほしい</div> </div> <div class="block-2nd"> block-1stに少し喰い込む形にする（margin-top:-50px; etc）けど、その内部の.saizenmenよりかは裏に回りたい </div>
こんなとき。
.box-1stには背景だけ入れてみる。
.saizenmenに
position relative
z-index 1000
transform: translate3d(0, 0,0) //iphoneなどでスクロール中にfixedしてほしいから追加
としてみて、
.block-2ndに
position:relative;
としてみると
優先順位としては
.saizenmen > .block-2nd > .block-1st
になってほしいのにならない。
その理由としてはtranslate3dのｚ軸の指定が悪さをしていた。
z-indexよりもそのz軸の指示を優先するらしく。
なので
transform: translate3d(0, 0, -1);
とすると当初の想定通りの重なりあいになりました。
文字だけだとわかりづらい。