ROROのWEB技術・子育て・ガジェット通信

本WEBページは2児の息子を持つROROの子育てに伴うメリット・デメリットを丸裸にしていきます。例えば旅行であったり家系であったり、どんな生活をしているのかをお楽しみください。また子育ての便利グッズの紹介、ROROの趣味であるガジェットやゲーム情報や勉強なども紹介します。色んなコンテンツをお楽しみくださいね！

CSSで切り替えタブを作る

date:2018/2/25

【img：】

CSSでタブ切り替えを実現する

イメージ的には、メニューボタンがあり画面内でボタンに応じたデータの内容を表示します。
どのように実現しているかというと、radioボタン（実際のボタンは非常でラベルの属性で切り替え）で指定されたコンテンツを表示します。コンテンツの内容はradioボタンのcheckedされたコンテンツのみをblock属性にすることで、他のdiv内容を表示しないようにします。














メニュー１の内容です


メニュー２の内容です



メニュー３の内容です

サンプルコードです。

<div class="css_tab">

    <input id="menu1" type="radio" name="tab_item" checked>
    <label class="tab_item" for="menu1">メニュー１</label>
    <input id="menu2" type="radio" name="tab_item">
    <label class="tab_item" for="menu2">メニュー２</label>
    <input id="menu3" type="radio" name="tab_item">
    <label class="tab_item" for="menu3">メニュー３</label>
    
    <div class="tab_content" id="menu1_content">
    <div class="contents">
    メニュー１の内容です
    </div>
    </div>

    <div class="tab_content" id="menu2_content">
    <div class="contents">
    メニュー２の内容です
    </div>
    </div>
    
    <div class="tab_content" id="menu3_content">
    <div class="contents">
    メニュー３の内容です
    </div>
    </div>
</div>
関連記事

Category

Latest Game News

▪️【Amazon予約数ランキング】体験版が話題の『Anthem』が1位に！ 発売間近の『JUMP FORCE』も急上昇【1/27～2/2】@ファミ通(2019/02/06  16:00)▪️“ファミコン Switch Online”に『スーパーマリオUSA』、『つっぱり大相撲』、『星のカービィ　夢の泉の物語』が2月13日から追加@ファミ通(2019/02/06  16:00)▪️『チームソニックレーシング』ソニックとシャドウのデザインをあしらったロックグラスなど、限定グッズが多数付属の“DXパック”が登場@ファミ通(2019/02/06  16:00)▪️『アルケミックダンジョンズDX』が2月14日より配信開始、やりこみ要素満載のローグライクRPGがDXにパワーアップ！@ファミ通(2019/02/06  16:00)▪️『ワイルドアームズ』のヴォーカル曲がここに！ 『milestone〜ワイルドアームズ・ヴォーカルコレクション2』が本日（2月6日）発売@ファミ通(2019/02/06  16:00)▪️『ファークライ ニュードーン』ミッキー＆ルー姉妹が、本編さながらの激しい銃撃戦をくり広げる実写版トレーラーが公開！@ファミ通(2019/02/06  16:00)▪️『殺人探偵ジャック・ザ・リッパー』がエビテンで予約開始、限定特典は山根知氏の描きおろしイラストを使用したB3タペストリー@ファミ通(2019/02/06  16:00)▪️『キャサリン・フルボディ』より羊人間をモチーフとしたグッズ“Colorful Sheeple × Sweets！”シリーズがお目見え@ファミ通(2019/02/06  16:00)▪️『DOAX3 スカーレット』かすみ＆あやね＆ヒトミがバカンスを楽しむイメージビデオが公開@ファミ通(2019/02/06  16:00)▪️『ドラゴンボール ファイターズ』“人造人間21号”のフィギュアが2月7日より予約受付開始、挑発的なポージングとボディラインが魅惑する@ファミ通(2019/02/06  16:00)▪️『キルラキル ザ・ゲーム -異布-』“鬼龍院羅暁”と“針目縫”の性能が公開！ サントラなどがセットになった限定版BOXも発売決定@ファミ通(2019/02/06  16:00)▪️『FFXIV: 漆黒のヴィランズ』Loppi・HMV限定特典はオリジナルデザインのA4クリアファイル！@ファミ通(2019/02/06  12:00)▪️『PSO2』に二つ名付きの【仮面】が登場！　劇場版『魔法少女リリカルなのは』コラボスクラッチも開始！@ファミ通(2019/02/06  12:00)▪️『ポケモンGO』メルタンの色違いが2月6日～3月5日に登場。“ふしぎなはこ”再使用の期間が3日間に短縮され、ゲットの大チャンス！@ファミ通(2019/02/06  12:00)▪️『JUMP FORCE』に参戦決定の『ジョジョの奇妙な冒険』のショートPVが公開！ 承太郎とDIOのバトルがすさまじい@ファミ通(2019/02/06  12:00)▪️DLC福袋で『ブレイブルー セントラルフィクション SE』、『ディシディアFF』などのアイテムをゲット！【先出し週刊ファミ通】@ファミ通(2019/02/05  20:00)▪️『FFXIV』のキャラクターや衣装はこうやって作られる！　『FFXIV』ファンフェス 開発パネルリポート@ファミ通(2019/02/05  20:00)▪️『キングダム ハーツIII』全世界出荷・ダウンロード本数が500万本を突破！ シリーズ作の記念セールも開催@ファミ通(2019/02/05  20:00)▪️『キャサリン・フルボディ』人前では堂々と読みにくい？ 魅惑の特製バレンタインカードと情報総まとめ特集をお届け！【先出し週刊ファミ通】@ファミ通(2019/02/05  20:00)▪️『カードファイト!! ヴァンガード エクス（EX）』がPS4/Switch向けに2019年秋発売決定。テレビアニメシリーズが題材のヴァンガードシミュレーターゲーム@ファミ通(2019/02/05  20:00)▪️『Days Gone』新トレーラー“『Days Gone』の世界 ～ドリフターバイク～”が公開！　唯一の移動手段であるバイクを紹介@ファミ通(2019/02/05  20:00)▪️『EDF: IR』オンライン対戦モード“マーセナリー”実装が判明！　4対4のチームで戦え!!【先出し週刊ファミ通】@ファミ通(2019/02/05  20:00)▪️キャラが変わればゲームが変わる？ 2DアクションRPG『Dragon Marked For Death』プレイレビュー@ファミ通(2019/02/05  16:00)▪️新ゲームバラエティ“YATTE-MIKKA!”が配信！ 第1回はインパルス・板倉らお笑い芸人が『CoD ブラックオプス 4』に挑戦@ファミ通(2019/02/05  16:00)▪️『グランブルーファンタジー Relink』プラチナゲームズとの開発契約が終了、今後はサイゲームス一社での開発体制に移行しプロジェクトは継続@ファミ通(2019/02/05  16:00)▪️PS4/PS Vita『バレットガールズ ファンタジア』のBEST版が3月28日に発売決定、DL版『バレットガールズ2』も価格を改定@ファミ通(2019/02/05  16:00)▪️『仁王』が全世界250万本突破！ 本編とDLCを収録した『仁王 Complete Edition』が50％OFFになる突破記念セールを開催@ファミ通(2019/02/05  16:00)▪️2019年1月ソフト・ハード売上ランキング速報、『キングダム ハーツIII』が月間ランキング1位！Switchは11か月連続首位に@ファミ通(2019/02/05  12:00)▪️12機の個性的なメカが大乱闘をくり広げるアクションゲーム『オーバーライド 巨大メカ大乱闘』がPS4で4月18日に発売決定@ファミ通(2019/02/05  12:00)▪️タイタンフォール世界の基本プレイ無料バトルロイヤルゲー『APEX LEGENDS』が発表＆PS4/XB1/PCで本日サービス開始！@ファミ通(2019/02/05  08:00)

Latest Post

17610views

クリスマスプレゼントの購入

育児シンカリオン

さてもう直ぐクリスマスですね。早速ですが、既に購入してしまいました。何を購入したかというと・・・シンカリオンの「ブラックシンカリオン」のプラレールです！！これの何がすごいって？それは何と言っても、先頭車両に動力がなくても動く代物です！！。他のシンカリオンはそもそも動かないんですよね。動いて返信してっ...2018/8/19

307457views

webページに独自のフォントを利用する

ホームページ作成PHPのTIPS＆便利な利用方法htmlCSSTips@font-facefont-familyフォント

本日はWEBページで外部フォントを利用する方法です。任意の位置に、自分のコードを導入することが出来ます。例えば以下のようにフォントを変更することが可能です。Let's use Original font@font-faceで外部フォントを利用する独自のフォントを使うには@font-face...2018/8/18

25340views

2020年度のプログラム必修化に備える！子供向けパソコンの選び方とは

育児プログラム必修化プログラムパソコン

記事は製作中です。下記はhttps://dot.asahi.com/aera/2016102800135.html?page=1からの紹介です。　今年3月に発表された新学習指導要領で、2020年度から小学校でプログラミング教育が必修化されることが明示されました。数年前からプログラミング教育への関心は...2018/8/8

10202views

年代別！2018年度の子供のクリスマスプレゼントのオススメ

育児クリスマスプレゼント

この記事は作成中です。また今年もやってきたクリスマス。お子さんにはどんなプレゼントを上げますか？悩ましい問題ですよね。皆さんに年代別で今年の流行りも含めながらオススメのプレゼントを紹介していきますので、ぜひ参考にして頂ければと思います。0〜1才★男の子編2才★男の子編第一位２才になって来たらそろそろ...2018/8/6

419843views

NEOGEO miniを買うなら楽天に急げ！

育児ゲームガジェットネオジオミニ

【aff：2,1】NEOGEO miniを買うなら楽天に急げ！楽天ならまだまだ在庫がありますよ。しかも・・・自分の場合はamazonで予約して入荷予定が８末で予約してしまいました・・・なので首を長〜くして待っています。さてネオジオミニ ですがどんなソフトが収集されているのでしょうか？ネオジオミニ に...2018/8/6

9210views

preタグ内のコードのタグをそのまま表示させる方法

育児PHPのTIPS＆便利な利用方法htmlPHP正規表現preg_match_allstr_replaceprecode

例えばホームページを作成する際にプログラムコードをそのまま表示させたい場合、preタグ内であってもタグは表示できません。あくまでpreタグ内は改行・空欄がそのまま表示されるだけです。なので、preタグ内をプログラムで表示させたい場合、HTMLの特殊文字を変換しないといけません。いちいち面倒なので指定...2018/8/6

17877views

PHPで配列のキーと値を取得する

ホームページ作成PHPのTIPS＆便利な利用方法TipsPHPforeachexplode

PHPの配列のキーと値を同時に取得することで、BLOGサイトのように、URLではカテゴリーのID（配列のキー）で、リンクの形式は配列の値で同時に表示することができます。実施したい内容は以下のイメージです。foreachの構文を見てみましょう。foreach(変数 as キー => 値){ pri...2018/8/5

943503views

徹底解剖！Whatsko 3022種ゲーム贈 ポータブルゲーム機 16G拡張バージョンのリスト FC MDレトロ懐かしゲーム機を紹介

GAMEエミュレータガジェット

さて前回紹介を行った「Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)」でしたがなかなか面白いものでしたので、今度はW...2018/8/5

24028views

徹底解剖！Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)

GAMEエミュレータガジェット

amazonで怪しい商品を買ってみました。それはこれです。Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)このゲームは...2018/8/5

9490views

真・女神転生４北米版のプレイ日記４

GAME真・女神転生４プレイ日記ゲーム英語北米版ゲーム中継

さて、メインクエストをどんどん進めていきます。するとNavarreが行方不明ということで助けに行きます。先の展開的に多分危ない方向になるんだろうなぁと思いつつクエストを進めます。真・女神転生４では、複数の敵が連なったバトルがあります。全体魔法で一気に片付けないと全滅の恐れがあります！敵が叫び声をあげ...2018/2/4

PAGE TOP

(C)ROROのWEB技術・子育て・ガジェット通信