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

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

汎用性ゼロな対応・・・

ウェブデザインで各セクションの区切りを斜めにしてみたいと思う

事がよくある。

最近のサイトの流行りで画像なり、背景をブラウザ幅いっぱいにすることは良くあるがそれをすると大体サイトって似るのよね。

そこでなんか個性ということで各セクションの色の変わり方を斜めにする方法。

といってもそんなに難しくないけど。

ソース的にもオススメ出来ないけど。

一個斜め用のdivをおいてそれに高さを指定して

background: linear-gradient(to bottom right, #colorcode50%, #colorcode 50%);

とするとブラウザの幅に合わせて斜めがウニウニ調整されてピッタリになる。レスポンシブ対応といえる?かな。

これに気付く前はtriangeを作ってわざわざJsで幅認識してそれをCSSで上書きしてた。

SVGファイルを作る時に気をつけておきたいこと。Illustratorさん、これは気付きづらいよ!

とある案件で、PCでのチェックはOK、IphoneもOK、AndroidもOKとチェックも終わったなーと思ってたらAndroid4.0の機種でSVGの背景画像が表示されていないという現象が。

他のSVGは表示されている(過去に他の方が作成済み)ので対応していない訳ではない。だがファイル自体はちゃんとアップされている。
別にCSSに何か記述忘れがあるわけではない。

前担当の方に確認をしたらすぐに判明。

IllustratorでSVGを作成し、保存する際にウインドウが出るのだがオプションというトグルが存在していた。こんなところは普通触らない箇所なんだが、そこに大切な項目がありました。

upload

この「レスポンシブ」っていうところ。

これに基本的にはチェックが入っているが、これが入っているせいで作成した際のサイズを律儀に守ってしまうことがあるらしい。

ベクターデータだし、CSSでbackground-size指定すればいいんだから大きめて作っちゃえーとやってしまうとこの罠にはまる。

よりによって白いアイコン作っていたから背景と同じ色でろくに気付けず。

今後はリアルに使用するサイズ感で作成することを心がけねば。。

※これを外すことでどんな影響が出るのかまだテストしておりません。※

google noto fonts という名のweb fontがいつのまにか

とうとう大御所が無料でwebfontを。

気付くの遅いというのはご愛嬌。

つかってみました。
やはり日本語なので表示まで時間がかかるのがネックです。
サイト全体で使用するのは避けた方がベターかもしれません。

使用方法はとても簡単。

① CSSを読み込む
http://www.google.com/fonts/earlyaccess
上記URLから使用したいフォントのimport先をコピー
日本語だと・・・

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

②CSSにfont familyを指定

font-family: 'Noto Sans Japanese', serif;

こんなかんじ。

dreamweaver CC2014でデザインビューのフォントサイズがバカでかい

CC2014にアップデートしてから色々と使いづらい。

Photoshopの持っていないフォントを編集→Escでキャンセル
以前はデザインを保ったまま(持っていないフォントの見た目)だったのに、CC2014はフォントが変わってしまう。
のでCtrl+Zを毎回しないといけない。。

さて、本題に戻る。
CSSでノーマライズ的にh1~h6のフォントサイズを1rem指定しているのだが、そうするとデザインビューの文字サイズがとんでもないことになる。
これはバグなのか仕様なのか良く分からないが他の方も同様の言っている模様。

Dreamweaverを捨てきれない理由

なので
①デザインビューを見捨てる
②とりあえずem指定にする

のどちらなのかなぁ。

①が有力だと思うけど。

sass + koala で急にコンパイルされなくなったとき

作業していて、数分前までは普通に動いていたのに急にコンパイルされなくなったとき。

windowsだとkoalaは問題なくコンパイル完了の「Success」を出す。
が、CSS自体は更新されていない。

悩む悩む。

他のサイトで設定したものはちゃんと吐き出しているので、koala自体が調子悪い訳じゃない。

で、macで問題のサイト定義したscssをコンパイルしてみると
「/bin/sh: compass: command not found」
と出た。

ググってもsublimeの設定ばかりであまり核心をついたものは見つからず。

で、結局config.rbを削除してもう一回設定しなおしたら直りました。

謎です。

と思っていたら結局直らず。。

最初からサイトデータを一個ずつコピーしていきどこで問題が発生するのかチェック。

判明したこと(エビデンスは無いので勘です)

sassのコンパイル用のファイル名●●●.scssと同名のimportファイルを作成するとバグが発生する模様。

つまり
●●●.scss
に_●●●.scssというファイルをimportしてしまうとエラーになる。

何が怖いってwindowsだとエラーとして認識されずにcssファイルが更新されないだけっていう。macだと上記のcompass:command ////
になるからマシだけど。

で、注意するのが上記エラーが出たのでファイル名を変更したとしてももうダメ。config.rbと●●●.scssファイルを削除して新しく作り、koalaのサイト定義も消してやり直さないとダメっぽい。

レスポンシブデザインをしていて画像の横幅を100%にしたのは良いけど、PCサイトだと原寸にしたいんだよねって時

もしかしたら、誰でも知っていることなのかもしれないが自分は知らなかった。。

inheritにしてもダメだし、pxで指定するしかないのかしら・・・でも幅なんて色々あるわって悩んでいたらスゴイ答えは簡単

img{
max-width:100%
}

これでいいらしい。

maxがつくことで自分自身の100%までってことになるのかな。