jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法｜CSS擬似要素・擬似クラス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
チェックボックにチェックを入れることで、指定した要素の文字の色や幅(width の値）を変えたり、表示非表示を切替えたりする方法のご紹介です。 サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介させていただきます。 チェックボックスのデザイン変更 まず最初に、チェックボックスのデザインをボタンのイメージへと変更してみます。 CSS の記述例はこんな感じです。 input[type=checkbox] { position: absolute; left: -9999px; } label { display: block; width:200px; text-align:center; font-weight: bold; color: #fff; background: #e54040; border:1px solid #dd0000;
![[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法｜CSS擬似要素・擬似クラス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/1934f1693adca4bd770d83c0eb11ca9cfc036a2e/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fcheckboxchecked.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
