AfterEffectが使える前提のアニメーションなんだけどとてもきれい。
https://liginc.co.jp/445055
jsonで読み込む必要あるけど上記サイトを参考にすれば何も難しいことは無し。
アニメーションGIF、アニメーションPNGに次ぐ第三のアニメーション画像なのかな
コメントをどうぞ
カテゴリー別アーカイブ: CSS
CSS Gridの中でSlickを利用すると画像がとんでもなく大きくはみ出る
ずっと避けてきたGrid。
ついに着手。
良く分からないけど参考サイトを見つつ column rowを設定してその中に各要素を収める設定完了。
grid-column: 1/2;
grid-row: 2/3;こんな感じで各divに設定をいれていく。
良し完成と思いつつプレビュするとSlickがとんでもないことに。
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(6,auto);こんな感じで横2 縦6のGridを作っていて右側にSlick用のDivを配置しておりましたが、それだとだめで
display: grid;
grid-template-columns: repeat(2,minmax(0, 1fr));
grid-template-rows: repeat(6,auto);こうする必要があり。
ちょっとまだ良く分かっていない。もっと勉強しないとだ。
レイアウトはかなり自由度が上がるけどCSSの可読性はかなり低いなぁ。
VS CODEでCSSのプロパティの並び順を整える
いっつも感覚で書いてしまうのでバラバラな並び順のプロパティを自動で整形したいと思ってぐぐった。CSSCombってのがあるらしい
ということでVSCODEにインストール
そのまま使うと自分の理想通りのフォーマットにならないので、以下のサイトで整形ルールを決める。
https://csscomb.herokuapp.com/config
一応自分好みの形はこれ
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "double",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": " ",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true,
"vendor-prefix-align": true
}csscomb.jsonって名前で必要な箇所に保存。
WinだとC>User>.vscode>extensions>mrmlnc~~ >node_modules>csscomb>config>ここ
VK All in one Expansion Unit を利用していて固定ページの保存がうまくいかないとき
とある瞬間から管理画面の固定ページの保存が完了しなくなる。
何だろうと思っていたが、原因はタイトルのプラグインのカスタムCSSの入力箇所でコメントアウトが入っていたから。
参考はこちら。
案外気づかないよなー
tabのコーディングをするときにデザイン影付きにされて焦る
そういうときは親要素にかかっている影のCSSがbox-shadowになっているかチェック。
もしそうならば、IE11は切り捨てる方向になるがdrop-shadowにすれば子要素の形にあわせて影をつけてくれる。
ちなみにPNGだと透明部分を無視して影をつけてくれる優れもの。
あとはtabの括りの要素をposition relativeにしてtop -50px的な感じてタブの高さ分をマイナスすれば影付きのタブのできあがーり。
svgがどうやってもIE11でレスポンシブにならないで余白ばっかり増えちゃうよ
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のままだと全体幅をみちゃう？
まみむめもまみむめもまみむめも
複数行でmargin bottomを入れてるけど最後の行だけmargin消したいとき
結局使うことになるImagemap
レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。
今回お世話になったサイト。
◆Imagemapを生成してくれるサイト
https://www.image-map.net/
◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった
◆レスポンシブ対応させるプラグインの説明サイト
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よりかはいいのかな。