Bloosh Company

カテゴリー : フロントエンド

投稿が新しい順 | 投稿が古い順

Development > フロントエンド

游ゴシックの縦書きが揃わないとき!

JugemuJUGEMUGokoのSURIKIRE JugemuJUGEMUGokoのSURIKIRE   ※この記事は游ゴシックがインストールされてる端末で見てね! 上の縦書きテキストをごらんくださ...

Development > フロントエンド

Intersection Observerで、少しスクロールしたら現れるヤツ

前回のJavaScriptとcssで要素をふわっと表示させるアニメーションに引き続き、JavascriptのIntersection Observer APIを使って、少しスクロールしたら右下からぴょ...

Development > フロントエンド

JavaScriptとcssで要素をふわっと表示させるアニメーション

ウェブページをスクロールして、要素が画面内に入ったとき、ふわっと表示させるアニメーションです。これまでonscrollイベントを使ってきましたが、スクロールのたびにイベントが発生して動作が重くなる原因...

Development > フロントエンド

JavaScriptを使った文字サイズスイッチの作り方

jQueryなしで文字サイズスイッチを作ります。 セッションに保存しているのでページが変わっても文字サイズが保たれます。   HTML <button onclick="changeF...

Development > WordPress > フロントエンド

swiper.js スマホ版だけレスポンシブにしたい

jQuery不要のswiper.jsを使った事例。 基本の使い方はこちら   ・PC版は比率を変えたくない。 ・スマホ版は画面幅に合わせてレスポンシブにしたい。 ・PC版の画像1枚の大きさより画面幅が...

Development > フロントエンド

svgをJSなし・インライン読み込みなしで自由に色を変更する方法!

svg画像をCSSで制御して色を変えたりするためには、インラインで読み込みしなければいけません。 こうなる。 そうするとHTMLファイルがすごいことになります。少なくとも人間にとっては読みにくくなって...

Development > フロントエンド

Safariでremが効かない

文字サイズや要素間の隙間がパソコンの画面ではちょうどよくても、スマホで見ると大きすぎたり空きすぎたりするんで、サイズ指定にremを使ったりします。 (モバイルファーストだろというのは置いといて)   ...

Development > WordPress > フロントエンド

新しくなったlightgallery.js v2 基本の使い方

前に紹介したlightgallery.jsが新しくなりました。   lightgallery.jsの記事まとめ   大きな変更点として、商用サイトで使う場合は有料になりました。 個人で使う場合はこれま...

Development > フロントエンド

2. アルバム複数設置(各アルバムは独立) – lightgallery.js WordPressギャラリー事例

2021.11.10 更新。 lightgallery.js Ver1の話です。Ver1とVer2があり、商用利用する場合はVer2は有料です。 lightgalleryに関する新しい記事はこちら V...

Development > フロントエンド

lightgallery.jsの画像が2枚だけのときスライド方向が逆になる

2021.10.19 編集。 lightgallery.js Ver1の話です。 ver2や、その他の事例についてはこちら   lightgallery.jsについて jQuery不要のギャラリー表示...

Tweets by blooshcompany