カテゴリー : フロントエンド
2020年12月15日
Development > フロントエンド
lightgallery.jsの画像が2枚だけのときスライド方向が逆になる
サンプルまとめページはこちら ①基本の使い方 – lightgallery.jsとWordPressの組み合わせ ②アルバムの作り方 – lightgallery.jsとWordPressの組み合わせ...
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...
2019年3月22日
Development > フロントエンド
基本のSEO対策！
SEO対策とは、ほかにたくさん詳しいサイトがあるから省きます。 簡単に言うとインターネットで検索したら検索結果上位にヒットさせること！ 1.HTMLの<head>をしっかり書く いつもお世...
2018年9月24日
Development > フロントエンド
IEでもflexボックスでグリッドデザインを作る方法！
※結論までワープする タイルのように同じ大きさのボックスを並べるデザイン。 CSSのdisplay:gridを使うと簡単に表示できます。 画面幅に合わせて表示するタイルの列が自動で変わる優れもの。 で...
2017年8月15日
Development > フロントエンド
PCとスマートフォンのクリックイベント
「ある要素をクリックしたら～する」という関数をJavaScriptで書いた場合、スマホだと反応が遅かったり、動作が変になったりする場合があります。 //例 function hoge()...
2017年8月2日
Development > フロントエンド
フッターの高さが分からないときでも常に最下部に表示する
※2019年4月27日 display:flexが発明されたので、古い記事になりました。 新しい記事はこちら 表示するコンテンツが少ないと、 フッターが真ん中あたりに表示さ...