[Category] javascript

全てチェックするチェックボックス

全ての項目をチェックするチェックボックスです。 チェックが1つでも外れたら、全てチェックするチェックボックスもチェックが外れます。 See the Pen 全てチェックするチェックボックス by nekuta (@nekuta) on CodePen. チェックした時に全ての項目をチェックする $(…

レスポンシブのタブメニュー

先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは5個なので、スマホサイズの時のタブサイズは、1〜3番目の横幅は33%、4番目と5番目の時は横幅50%です。 See the Pen 180327 by nekuta (@nekuta) on CodePe…

コーダーのための計算機を作りました

デザインをhtmlにするときに楽したいなという願望から生まれた計算機です。 ・とりあえず2で割ってくれる電卓 ・px→em変換 ・px→rem変換 ・行送り計算 ・トラッキング計算 こんな感じにまとまって言います。 楽するところは楽していきたいですね。 コーダーのための計算機 https://dem…

アンカーリンクを自動的に増やす

タイトルの数に応じてアンカーリンクを自動で作成します。 wpのビジュアルエディタ部分で実装しました。ビジュアルエディタで見出し(h2)を追加するとその数に応じてアンカーリンクが増えます。静的なサイトでも十分活躍できそう。 See the Pen rJWrWV by nekuta (@nekuta) …

リストの個数が1つの場合のみセンタリングする

あるリストの個数が動的に変化し、その個数が1個のときはセンタリングして、それ以外の時は左寄せにする。 要素をセンタリングしたい時はinline-blockが便利ですけど、下記demoのように横に収まる個数が決まっていて、半端な要素が出た時にセンタリングされてしまいます。 一覧ページやスタッフ紹介など…

追従するサイドバー

追従範囲を指定したサイドバーです。 resizeした時にも対応させていますので、サイドバーが突き抜けることはありません。 デモではわかりやすく各要素にheightを指定しています。 追従している時は.sideにfixedというクラスを、追従をやめたら.sideにstopというクラスが付きますのでst…

外部HTMLをポップアップする

外部HTMLをポップアップするjavascriptです。jQueryを使用しています。jQueryバージョンは3.2.1です。 ・外部HTML(同一ディレクトリ内)をポップアップ・ポップアップした状態で次の外部リンクへ移行する・ポップアップ部分以外をクリック(タップ)した場合、ポップアップを閉じる・…

  • コーダーのための計算機