【JavaScript・jQuery】アコーディオンメニュー。アコーディオン内に下層のアコーディオンも実装できるよ
こんにちは、yukipanです。メニューやコンテンツがたくさんあるときにアコーディオンでギュッと凝縮できるの、便利ですよね。見たいところだけ開いてみてくださーい、みたいな。 CSSのみで実装できるけど、CSSはinput...
HTML・CSSHTML・CSS
HTML・CSSHTML・CSSふわっと浮き出てくるグローバルナビのハンバーガーメニュー
ちょこっと解説とサンプルページ 横とか上からスライドで出てくるメニューじゃなくて、ふわっと浮き出てくるハンバーガーメニューを作ってみた。 非表示のときは「opacity: 0;」だけじゃなくて、「right: -100v...
HTML・CSS【jQuery】文章が長いときのみグラデーションで隠して続きを読む・閉じるを表示
文章が長いときによくある「続きを読む」っていうやつ。一定の長さのときのみ「続きを読む」を表示させて、短いときは表示しないようにできます。jsの高さを調整すれば、ある程度表示させたい文章の長さを調整できる。 デモはこちら ...
HTML・CSSコピペで使えるcssアニメーション
コピペで使えるCSSアニメーションをメモしておきます。よかったらご自由にコピペして使ってください。 一文字ずつふわっと表示テキストアニメーション ※jQueryのCDNを先に読み込まないと動きません。 背景が幕のように上...
HTML・CSSタスクランナーGulp4で環境構築してsassとpugでコーディングを楽に！
コーディング作業ってスピード勝負な所ありますよね。。。コーディングすればするほどパーツ的なものも増えるし、使い回せたらめっちゃ爆速でコーディングできるんじゃないか！？ということで、重い腰を上げて環境構築の調整を。。。 j...
HTML・CSSコーディングパーツ（見出し・リスト・お知らせ一覧・矢印・テーブル）
コーディング中にパーツのコード（HTML・CSS）をいちいち調べるのめんどくさいから、ここにストックしていく。 見出し センターで下線 左にタテ線 ストライプ背景 ストライプ生成便利サイト：CSS STRIPE GENE...
HTML・CSSナビゲーション・メニュー・リストなどのcurrent（カレント）表示のcssをメモ。
今見ているページや選択しているメニューのところのみ表示をかえるカレント表示のcssをメモしておく。.currentが付いたら下層のメニューも表示される仕様。jsはまた今度。。 classに「current」が付いていると...
HTML・CSS注意事項の※がついたリストのコードメモ
いつも書くのがめんどくさいのと、beforeだからって「display: block;」や「top: 0;」など、余計なコードを書かなくていいようにコピペ用にメモしておく。
HTML・CSS特定のクエリ文字列（パラメータ付きURL)のみリダイレクト処理するとき困ったからメモしとく。
特定のページIDのパラメータがついたもののみリダイレクト処理して別ページへ遷移させたいとき困ったのでメモしておく。 特定のクエリ付きURLのリダイレクト処理 例えば、特定のクエリ付きURLのページ「サイトURL/blog...
HTML・CSSAmazonや楽天の商品ページへのリンクボタンを作ってみた。
読んだ本の紹介リンク、テキストでリンク貼りつけたりしていませんか？例えばこんな感じに。 革命のファンファーレ 現代のお金と広告 これだと本の写真がないし、どんな本かわからないし、クリックする人がamazonでよく買う人な...