レスポンシブのタブメニュー
先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは5個なので、スマホサイズの時のタブサイズは、1〜3番目の横幅は33%、4番目と5番目の時は横幅50%です。 See the …
先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは5個なので、スマホサイズの時のタブサイズは、1〜3番目の横幅は33%、4番目と5番目の時は横幅50%です。 See the …
デザインをhtmlにするときに楽したいなという願望から生まれた計算機です。 ・とりあえず2で割ってくれる電卓 ・px→em変換 ・px→rem変換 ・行送り計算 ・トラッキング計算 こんな感じにまとまって言います。 楽す…
タイトルの数に応じてアンカーリンクを自動で作成します。wpのビジュアルエディタ部分で実装しました。ビジュアルエディタで見出し(h2)を追加するとその数に応じてアンカーリンクが増えます。静的なサイトでも十分活躍できそう。 …
あるリストの個数が動的に変化し、その個数が1個のときはセンタリングして、それ以外の時は左寄せにする。要素をセンタリングしたい時はinline-blockが便利ですけど、下記demoのように横に収まる個数が決まっていて、半…
追従範囲を指定したサイドバーです。resizeした時にも対応させていますので、サイドバーが突き抜けることはありません。デモではわかりやすく各要素にheightを指定しています。 追従している時は.sideにfixedとい…
HTMLをポップアップするjavascriptです。jQueryを使用しています。jQueryバージョンは3.2.1です。 ・HTML(同一ディレクトリ内)をポップアップ・ポップアップした状態で次のリンクへ移行する・ポッ…
ブラウザ画面いっぱいに広がるスライドショーです。結構楽しかった。 以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。読…
クリックすると中身が出てくるアコーディオンボタン。可変すると周知するために最初の一つは開けています。一応開いた状態の要素に.activeをつけています。 See the Pen 171004 by M.Ueda (@ne…
東京在住のweb屋が
気になったコードを書いていく日記