SVGでクリッカブルマップ！リンクをつける方法
こんにちは、yukipanです。 サイト制作で地図やイラスト上でピンポイントにリンクを付けるとき、<map>タグと<area>タグでクリッカブルマップ〜という手法があったそうな。だけどレスポンシブ...
HTML・CSSHTML・CSS
HTML・CSSHTML・CSSCSSのみで実装。アコーディオンメニュー
こんにちは、yukipanです。「Q&A」や、長い項目がたくさんある時に見たいところだけ開いて見れる、ユーザーにも優しいアコーディオンメニュー。よくあるJSやjQueryでつくるアコーディオンメニューもいいけれど...
HTML・CSSswiper.js 4.3.3でトップスライドと記事一覧の調整したコードメモ。
swiper.jsでかんたんに画像のスライダーが設置できる。オプションも豊富だし、便利よね〜。ただ、Ver5はIE11で使えないんだとか。。。IE対応しなくても・・・って思うけど、まだ使ってる人もいるし、もう少しは対応し...
HTML・CSSswiper.js Ver.5.4.5で簡単にスライダー設置（ナビ・ページネーション調整済）
swiper.jsでかんたんに画像のスライダーが設置できる。オプションも豊富だし、便利よね〜。汎用的に使えるバージョンでオプションを追加したコードをメモメモ。 スライドショーのサンプルはこちら→swiperスライダー H...
HTML・CSS【WordPress】画像パスをショートコードで便利に
固定ページにコーディングしたデータをカスタムHTMLにコピペする時、画像で、「サイトのURL/wp-content/themes/テーマ/画像までのディレクトリ/画像名」って入力するの、めっちゃめんどくないですか？「sr...
HTML・CSStableレイアウト（レスポンシブ対応・HTML・CSS・SCSS）
tableレイアウトを組むときにいつもどうだったっけ？ってなるので何パターンかメモしとく。とりあえずまずは1つ。 table1 サンプルはこちら HTML CSS SCSS 変更しやすいようにSCSSバージョンもアップし...
HTML・CSS【脱・jQuery】JavaScriptでシンプル上に戻るボタン(スクロールするとふわっと出てくる仕様)
シンプルな上に戻るボタンのメモ。スクロールするとふわっと表示される仕様。サンプルは「↑」のテキストを入れているけど、画像やfontawesome、CSSで作った図形など好きに変更できる。hoverするとちょっとだけ上に動...
HTML・CSSグローバルナビのスマホのときだけハンバーガーメニューになるテンプレ
最近はPC表示の時でもハンバーガーメニューの表示を見かけるようになった。スマホファーストだから、デザイン自体がスマホ設計なんだね〜。 そんなyukipanも、スマホファーストでPC表示もハンバーガーメニューで良い派。 だ...
HTML・CSS【JavaScript使わない】CSSのみで画像がふわっと切り替わるシンプルなスライドショー
なるべくJS使わずCSSだけで実装したいyukipanです。今の時代、ただ画像をふわっと切り替えるだけなら、JS使わなくてもCSSたけで実装できるんですね〜。ステキ。画像だけふわっと切り替わるバージョンと、背景画像で切り...