See the Pen タブ切り替え（汎用版） by 草村 (@kusamura_mono) on CodePen.38847 HTML<div class="tab-wrap"> <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ボタン 1</label> <div class="tab-content"> コンテンツ 1 </div> <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">ボタン 2</label> <div class="tab-co

はじめに 今回はCSSだけでタブ切り替えを作る方法をご紹介します。 最近はCSSの使い方次第でできることが非常に多くなっているので、タブ切り替えなどちょっと動きがあるものでもJavaScriptを使わず作ることが可能です。 今回作成していくもの まずは、今回作成していくデモをご紹介します。 今回作成していくデモはこちらです。 See the Pen CSS tabs by Ayaka Sasaki (@ayausaspirit) on CodePen. HTML解説 では、中身のソースコードを見て行きましょう。 まず、今回の全体のHTMLはこのようになっています。 <div class="tabs"> <input id="all" type="radio" name="tab_item" checked> <label class="tab_item" for="all">総合</lab

HTML 閉じている状態をチェックボックとして設定し、 クリックされた時（チェックされた時）に、アニメーションで隠れている内容を表示するという仕組みです。 <div class="accordion"> <div class="option"> <input type="checkbox" id="toggle1" class="toggle"> <label class="title" for="toggle1">タイトル1</label> <div class="content"> <p>本文1</p> </div> </div> <div class="option"> <input type="checkbox" id="toggle2" class="toggle"> <label class="title" for="toggle2">タイトル2</label> <div cl

「htmlにスライドショーを実装する方法ってどうやるんだろう？」 このような悩みを抱えている方もいるのではないでしょうか。 スライドショーの実装といえば、jQueryの利用が定番ですが、実はHTMLとCSSだけでも作ることができます。 今回、WEBCAMP MEDIAは、HTMLとCSSだけでスライドショーを作る方法について解説していきます！

サイトのコンテンツ量が増えてくるといくらメニューを整理しても、いや、むしろメニューを事細かに整理するほど、メニューツリーは深く複雑になっていきますよね。 ぼくが運営しているサイトでもそんなサイトが増えてきたので、グローバルナビ（HP上部で横並びに表示されているメニュー）にマウスをのせたときにサブメニューが出てくる、いわゆるドロップダウンメニューを実装しようと思ったんです。 ところがググっても良いサンプルが見つからない。高機能な他階層対応メニューや、jQueryを使ったサンプルなどはすぐ見つかったのですが、いやーそんなすごいのは求めてないんだよなぁ。 CSSは複雑になるとプログラム以上に読み解くのが困難になってくるので、数年後、記憶喪失になってもパッと見ただけでわかるくらいのシンプルなドロップダウンメニューが実装したい。 というわけで、ないものは作ろう精神で、軽く書いてみました。 尚、ぼくは

レスポンシブサイトなどでよく使われる、メニューボタンをクリックするとページの端からニョロっと表示されるメニューをドロワーメニューといいます。 jQueryなどで実装することが多いですが、HTMLとCSSだけで実装することもできます。 簡単に実装できるので、最近はHTMLとCSSのみでドロワーメニューを実装することが多いです。 それでは、HTMLとCSSを使ったドロワーメニューの実装方法を解説します。 HTMLとCSSで実装したドロワーメニューの基本形 まずは、HTMLとCSSで実装したドロワーメニューの基本形を解説します。装飾は一切施していない最低限のソースコードです。 ドロワーメニューのHTMLは以下のようになります。 <input type="checkbox" id="menu-toggle" class="menu-checkbox"> <label for="menu-toggl

このサイトは、分析、パーソナライゼーション、およびターゲットを絞った広告の目的だけでなく、サイトの重要な機能を有効にするためになどのテクノロジーを利用します。詳細については、次のリンクをご覧ください。ポリシー設定の管理ストレージの設定サイトにアクセスすると、および同様の技術「」を使用して、ユーザーに関するデータが保存または取得される場合があります。は、サイトの基本的な機能やその他の目的に必要になる場合があります。特定の種類のを無効にするオプションもありますが、無効にするとサイトでのエクスペリエンスに影響を与える可能性があります。ポリシー必須サイトの基本的な機能を有効にするために必要です。必須のを無効にすることはできません。クッキーを見るターゲットを絞った広告あなたとあなたの興味により関連性の高い広告を配信するために使用されます。広告の表示回数を制限したり、広告キャンペーンの効果を測定したり

本チュートリアルでは、CSS3のtransitionを使用して「スライド型」および「プッシュ型」のオフキャンバスメニューを作成していきます。メニューは最初は隠れていますが、ボタンをクリックすると現れるという仕組みです。 Get Source Code View the Demo まずはこの２つのメニューの違いを定義すると： ・スライドメニューはコンテンツの上にスライドする形で表示される ・プッシュメニューはスライドしながらコンテンツを押しやる形で表示される 先に進む前におさえておきたい重要ポイントは以下です。 ・CSS3のtransitionでスムーズな動きを演出しているため、古いブラウザでは機能しません ・Classの管理を楽にするためjsを使用しています ・IE8以降でサポートされているJavascriptのquerySelectorおよびquerySelectorAllを使用していま

レスポンシブデザインを考えている時に、 「アイコンをクリックしたらメニューが表示される、スマホでよくある実装をしたい」 「ハンバーガーメニューを使いたいけど、一から作るのは面倒…」 と思ったことはありませんか？ そこで今回は、ハンバーガーメニューの実装方法について解説します！ この記事を読んでわかる内容は以下の通りです。 ハンバーガーメニューの基礎 ハンバーガーメニューをHTMLとCSSだけで作る方法 ハンバーガーメニューのアイコン、メニュー表示の様々なアニメーション 当たり前のようにスマホで調べものをする現代は、Webサイトのレスポンシブ化は必須。 スマホでメニューを見やすくできる「ハンバーガーメニュー」の実装方法をマスターしておくと、レスポンシブデザインのWebサイトが簡単に作れるようになりますよ！