[Archive] 年別: 2017年

追従するサイドバー

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

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

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

display:gridを使う

display:gridはあまり使ったことが無かったのですが、改めて使ってみたら楽しかった。痒いところに手がとどいでいい感じですね。個人的にflexより好き。複雑なレイアウトやテーブルを簡単に表現できそう。 See the Pen 171031 by M.Ueda (@nekuta) on Code…

フル画面のスライドショー

ブラウザ画面いっぱいに広がるスライドショーです。結構楽しかった。 以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。読み込み時が気持ち悪いので、loading画面とか設定すれば良いと思います。 デモ…

CSSとjQueryで作るアコーディオンボタン

クリックすると中身が出てくるアコーディオンボタン。可変すると周知するために最初の一つは開けています。一応開いた状態の要素に.activeをつけています。 See the Pen 171004 by M.Ueda (@nekuta) on CodePen. js(jQuery)

メニュー以外の箇所をタップするとメニューが自動で戻るナビゲーション

UIを意識したくて作ったやつ。メニューをスライドさせる動きとclassを付けるのをjQueryで行っています。 ハンバーガーメニューは以前作ったこちらを使いました。CSSだけで作るハンバーガーメニュー 縦にメニューが出てくるナビゲーションですが、メニュー以外をタップした時に自動でナビが戻ります。 S…

CSSだけで作るハンバーガーメニュー

今更ですがcssだけでハンバーガーメニューを作ります。widthとheightがあらかじめわかっていれば簡単です。transform:translateYを使ったのは、active時の動作のためです。 html CSS ちょっとわかりにくいかもしれませんが・・・    See the Pen 170…

【wordpress】アーカイブ出力のメモ

wp_get_archivesで使えるオプションオプションは&で区切って指定できます。 type 文字列表示するアーカイブリストの種類。初期値はmonthly(月別)・yearly (年別)・monthly (月別)・daily (日別)・weekly (週別)・postbypost (投稿…

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