カテゴリー別アーカイブ: CSS

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を何かしらのエディタで開いて

pathとか

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にした時にスクロール中に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軸の指定が悪さをしていた。
z-indexよりもそのz軸の指示を優先するらしく。

なので
transform: translate3d(0, 0, -1);
とすると当初の想定通りの重なりあいになりました。

文字だけだとわかりづらい。

MacとWinでGulpの同じプロジェクトの作業をしようと思ったらnode-sassが何かエラー

検証環境をかねてノートをMac、デスクトップをWinにしている人は自分だけでは無いはず。

MacとWinだからなのか、ただたんにインストールする時に色々と違ったのか分からないけどどちらかで立ち上げたプロジェクトがどちらかのPCでエラーになる。

そんなときは大体node-sassが文句言ってくるのでそんな時はnode-sassをりビルドすると治るようだ。

npm rebuild node-sass

CSS3のTransitionとAnimationのメリットデメリットって

これのエントリーの前に書いているAnimation。
使いやすいけど弱点をすごく感じた。

それはスクロールに合わせてClassを追加したり削除したりするときの挙動。

Animationはアニメが0%~100%の間で細かい指定が出来るので凝ったアニメが実現出来る。
が、いざそのアニメーションが関連付けされたClassを削除すると一気に元の状態に戻ってしまう。

簡単な例としてOpacityを0⇔1にしたくても0から1はAnimationが効くが、Classが外された際に一気に0つまりパっと消えてしまう。

その点TransitionはClassが付与されたとき、削除されたときに指定したアニメーションを行き来してくれるのでそう行ったことが起こらない。

あまり検証していない上でのインプレッションでした。

position:absolute;で設定していた要素をある地点までスクロールしたらposition:fixed;に変更する。けど動きおかしい

なかなかやることが無さそうなシチュエーション。

最初からFixed出来ればラクなんだけど、その要素を通過するまで普通にコンテンツ内にまぎれていて、それを越したら画面中央までアニメーション。そして固定。

スクロールの判定はJsでやる。
ちなみに今回はサイトの構成上、root直下に該当要素を設置。
まるでちょうどとあるコンテンツの下にあるように見せかけるためJsで初期位置を設定。

コツはJsで直接位置を調整するのではなく、Classの付与でCSS側でコントロール。

初期設定

position:absolute;
left:50%;
width:(93/640)*100%;
margin-left:-(93/640/2)*100%;
height:auto;
z-index:100;

Class付与

.scroll{
position:fixed;
top:0% !important;
animation: page_center 0.2s linear 1;
-webkit-animation: page_center 0.2s linear 1;
animation-fill-mode: forwards; 
height:100%;
}
		@keyframes page_center {
			0% { transform: translate(0, 0); }
			100% { transform: translate(0, 40%) ; }
		}

スクロールを上に戻したときにもClassを付与

		.scrollback{
			position:absolute;
			
			animation: page_top 0.2s linear 1;
			-webkit-animation: page_top 0.2s linear 1;
			animation-fill-mode: forwards; 
			height:100%;
		}
		@keyframes page_top {
			0% { transform: translate(0, 150px); }
			100% { transform: translate(0, 0px) ; }
		}

こんど清書しよっと。

jqueryで親セレクタ(親要素)を指定する時に相対パス的な書き方だと面倒

今まであまり考えてこなかった問題。

頭の中で組んで、一発でコーディング出来る時はあまり問題になってこなかったけども、動きを検証しながらHTMLを加筆したりすると起きる問題。

ある指定したボタンなど(.btn)をクリックしたら、その親要素(.parent)に.addを付ける的な。

<div class="parent">
<div class="block">
 <div class="btn">CLICK</div>
</div>
</div>

上記のようなサンプルだとしたら

$(".btn").parent().parent().addClass("add");

これでも動く。

でも、たとえば.blockの中にもう一つDIVを噛ませてしまうと、上記のコードでは.blockに対して.addがついてしまう。

なので、そういう場合は指定した要素の一番親要素という風な指定をしちゃえばOK

 

$(".btn").parents(".parent").addClass("add");もしくは
$(".btn").closest(".parent").addClass("add");

相対ルートパス的な考え方かな。

SVGを使って画像や動画をマスクしたいけどclip pathはまだまだ使いづらい?

どうにもこうにもclip pathが使いづらい。
センターにどうやって置くの?かさえよくわからない。

知識が無いならば力技発動。

要は見た目がマスクならいいじゃない。
そこで考えたのが動画(画像)の上にカバーするように見えたい部分を抜きにした画像を重ねちゃう。

少しだけ頑張った?のが画像じゃなくてSVGでマスク。拡大されても大丈夫なように。

イメージはこんなかんじ。

20160222

 

で、後はVIDEOタグ等で動画を設置して、その後にdiv class=”mask”的な空要素を置く。

<video class="mask" autoplay loop >
<source src="mask.mp4">
</video>
<div id="mask"></div>

CSSは特に装飾とかをしないのであれば

#parent{
position:relative;
overflow:hidden;
}
video{
width:100%;
height:auto;
position:relative;
}
#mask{
position:absolute;
width:100%;
left:0;
top: 0;
height:100%;
background:url(mask.svg) no-repeat center center;
background-size:cover;
}

SVGを作るときに余白を考えながら書き出さないと上記サンプルの背景黒部分が表示されないので注意。

汎用性ゼロな対応・・・