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

レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。 今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。 クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world! 基本的なやり方 どうやって実装するかを簡単に説明します。 labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付けたり外したりする チェッ

「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サイトが簡単に作れるようになりますよ！

CSSのみで作る CSSのみで作る場合、チェックボックスを利用します。 チェックボックスにチェックが入っているかどうかをトリガーに、メニューを表示したり非表示にしたりする仕組みを作ります。 CSS製のハンバーガーメニューの特徴をあげると 【メリット】 ・jQ(js)使えない人でも作れる ・javascript使えない環境でも動く 【デメリット】 ・ちょっと記述がごちゃついて見える (※個人の意見です) という感じです。一番のメリットとしてはやはりjavascript機能を切られた環境でもデザイン崩や機能崩れもなくしっかり動くので、私も基本的大事なメニューはCSSのみでのハンバーガーメニュー構築にしています。 構築方法 まずは前回に同じくハンバーガーメニューをつくる為の土台を書きます。 ただし前回の記述とは少し違い、今回はチェックボックスをトリガーにしてボタンを作るのでチェックボックスを追加

PST（米国太平洋時間）2021/5/5にBootstrap v5.0.0が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。 解説はできるだけ最新版（v5.3.3）に対応するよう更新しています。 目次を見る 導入を見る ※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。 ※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。 Bootstrapとは？ もともとTwitter社のデザイナーや開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの1つとなっています。 Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成され

はじめに 軽量のCSSフレームワークとして有名なUIkitですが、その新バージョンであるUIkit3(2017-06-19時点でbeta25)も比較的安定していると感じましたので、別案件で使ってみました。 今回の「つくってみた」では、そのインストール方法からレイアウトの方法を中心に、UIkit3の使い方をご紹介いたします。 また、ReactやVueといったリアクティブなjsフレームワークとの親和性が高く、UIkit3のサイト自体がVueで作られていています。 ただ、jQueryが必須となっていますので、そこは妥協が必要かもしれません。 2019.03.13 追記 beta31からjQueryは必要なくなりました。 現在(2019.03.13)は3.0.3が公開されており、off-canvasのhtml構造が変更されてたり、新しいコンポーネントや機能が追加されています。 ピュアなCSSフレー

CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じるかもしれません。 そこで、CSS Grid Layoutの重要なポイントに絞って、分かりやすく解説したいと思います。 もう迷わない！CSS Flexboxの使い方を徹底解説 CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法... Web Design Trends

2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

順序リストの表示に利用するol要素。 デフォルトではごくシンプルな番号つきリストですが、デザイナーさんからこんな風に番号部分だけ色を変えるなどの装飾がされたデザインを渡されたらどのようにCSSを作りますか？ …簡単そうに見えて、意外と悩むのではないでしょうか？ 今回の記事では、こんなシーンで使えるCSSのTipsをご紹介します。 最初からついている数字は使わない 結論から言うと、list-style-typeによって付与される数字は使いません。 ここだけを装飾する方法はないので、せっかくですが指定自体を無くすことになります。 ol{ list-style-type: none; } ここから活躍するのが当記事の主役、CSS2から登場した「カウンタ機能」です。 これを使って1,2,3,4…といった連番を疑似要素:beforeにつけなおす方法をとった上で、自由に装飾できるようにしてみましょう。

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。 Bootstrap Bootstrap 4の基本テンプレート Bootstrap 4のナビゲーションバーのテンプレート Bootstrap 4のコンポーネントのテンプレート Bootstrap 4の実験的なテンプレート Bootstrap 4の基本テンプレート まずは、Bootstrap 4