カテゴリー : フロントエンド
2021年10月25日
Development > フロントエンド
svgをインライン読み込みなしで自由に色を変更する方法！
svg画像をCSSで制御して色を変えたりするためには、インラインで読み込みしなければいけません。 こうなる。 そうするとHTMLファイルがすごいことになります。少なくとも人間にとっては読みにくくなって...
2021年10月20日
Development > フロントエンド
Safariでremが効かない
文字サイズや要素間の隙間がパソコンの画面ではちょうどよくても、スマホで見ると大きすぎたり空きすぎたりするんで、サイズ指定にremを使ったりします。 （モバイルファーストだろというのは置いといて） ...
2021年9月23日
Development > WordPress > フロントエンド
新しくなったlightgallery.js v2 基本の使い方
前に紹介したlightgallery.jsが新しくなりました。 lightgallery.jsの記事まとめ 大きな変更点として、商用サイトで使う場合は有料になりました。 個人で使う場合はこれま...
2021年3月1日
Development > フロントエンド
2. アルバム複数設置（各アルバムは独立） – lightgallery.js WordPressギャラリー事例
2021.10.19 編集。 lightgallery.js Ver1の話です。Ver1とVer2があり、商用利用する場合はVer2は有料です。 lightgalleryに関する新しい記事はこちら V...
2020年12月15日
Development > フロントエンド
lightgallery.jsの画像が2枚だけのときスライド方向が逆になる
2021.10.19 編集。 lightgallery.js Ver1の話です。 ver2や、その他の事例についてはこちら lightgallery.jsについて jQuery不要のギャラリー表示...
2020年10月28日
Development > フロントエンド
YouTubeやGoogleマップを埋め込んで、比率を変えずにレスポンシブ表示する方法！
YouTubeやGoogleマップを埋め込むと、サイズが固定されて、コンテンツエリアからはみ出して表示されることがあります。 Googleマップの埋め込み方法はこちら。WordPress...
2020年10月2日
Development > WordPress > フロントエンド
IEでもWordPressでもjQuery不要のスライダーSiemaを自動再生する方法！
JavaScriptのプラグインSiema。 スライダーを簡単に設置できます。（カルーセルとも言う。） ここでいうプラグインとは、WordPressのプラグインではありません。 このプラグインと違いま...
2020年8月2日
Development > フロントエンド
スマホ画面になったらボタンになって開閉するメニュー
ヘッダーメニューのよく見るやつ。 パソコンの大きい画面では普通に表示されていて、スマホ画面になったらボタンに変わって出したりしまったりできるやつです。 これが↓ こう↓ JavaScriptのoncl...
2019年4月27日
Development > フロントエンド
[display:flex]フッターの高さが分からないときでも常に最下部に表示する
むかし書いたこちらの記事から月日が経ち、display:flex;が発明されたので、書き直します。 HTMLは、こう。 <body> <header></h...
2019年3月29日
Development > フロントエンド
flexボックスでコンテンツを2つ並べる！
cssに、flexのあれこれを記述して、HTMLでクラス名を書くだけ！ /* css */ .df{ display: flex; }.justify-between{ justify-content...