メモ
- 表示だけじゃなく特定位置にきたらjsを実行するプラグイン
- 基本は、位置に来たらclass付与でアニメーションが楽
- この「jQuery.inview.js」というプラグインの利点は、とにかくシンプルにイベントとして返すだけなので、逆に実行する内容でいろいろと応用が効くのでとても有用ではないでしょうか。最近のサイトではアニメーションが当たり前になってきているので、動きはシンプルでもいいのでアニメーション表示する事に挑戦してみてはいかがでしょうか。
css
【scss】scssの親セレクタの考え方
【css】cssだけでtableのセルをexcelみたいに上左固定する方法
https://hyiromori.com/blog/2019-06-01/css-scroll-table.html
メモ
固定の列、行を増やしたいときは、固定セルの幅を指定してから、nth-child()でtop、leftの値に幅の値を足していく
【css】CSS3アニメーション「transition」の使い方
【css】absoluteでセンターに配置する方法
【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説！
+ > ~でいろいろできる
【css】object-fitをIEに対応させる方法
【まとめ】
・windows7のサポート対応が2020年1月までなので、それまでの辛抱
・それまでは、これでしのぐ
＋
cssへの記述
/*外接リサイズ*/
.of img {
width: 100px;
height: 100px;
object-fit: cover;
font-family: ‘object-fit: cover;’; /*IE対策*/
}
【Jquery】jQuery＆CSS3で超簡単！スクロールするとかっこ良く要素を表示する方法7つ
【まとめ】
・要素が表示されるエリアまでスクロールしたら、移動＋フェードイン表示しながら要素を表示します。
【CSS】img画像の縦横比を保ったままボックス内に収める方法
img画像の縦横比を保ったままボックス内に収める方法
【参考】
https://1design.jp/web-development/css/1844
まとめ
・基本は下記のソース
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
・今回自分が使用したのは
object-fit:scale-down
モダンブラウザならこれ付けただけでOKでした
【editor】AtomでSass（SCSS）を自動コンパイルできるようにする
SCSSの自動コンパイル機能がAtomにもあると知って設定してみる
【2019/12/28追記更新】
ATOMのコンパイル機能「sass-autocompile」をちゃんとインストールができるようになった！！
↓こちらを参照して解決！
https://qiita.com/akane8747/items/f72cf307354ffe10b91d
https://asamone.com/2018/04/01/atom-sass-windows/
↑こちらを参考に設定
エディターを
ドリ→Atom→ドリ（SCSSの自動コンパイルが便利と聞いて）
このように渡り歩いてきましたが、Atomにもあると知り、もう一度出戻りしよう！
と思っていたら、node-sassがインストールできない
↓この方のブログをみると、なにかできないらしい。。。
ということで、こちらを参考に再チャレンジ！
codekitは有料ですが。。