JavaScriptを使用せずにCSSでタブを作成する

CSSタブは、ナビゲートしやすい1つの場所に関連情報を表示するのに非常に優れています。それらは基本的に、レシピボックスやバインダーに表示されるタブ付きの仕切りのように見えます。タブ付きナビゲーションを使用するWebサイトの例を次に示します。

サウスウエスト航空はタブ付きナビゲーションを使用して、ユーザーがフライトのチェックイン、フライトの予約、またはホテルの予約への追加をナビゲートできるようにします。
Enterpriseは、ナビゲーションにタブを使用して、ユーザーがレンタルするか購入するかを決定できるようにします。また、他のサービスについても学習します。

これらの2つのサイトを観察しながら、サイトでそのようなUIコンポーネントを使用することの長所について考えてください。それはどのような問題を解決しますか？タブ付きナビゲーションはどのタイプの情報に適していますか？

テキストや情報を意味のあるコンポーネントに整理し、スペースを取りすぎずに画面に表示するUI構造に手を伸ばす必要がある場合は、タブ付きナビゲーションが賢明な選択です。 JavaScript、jQuery、Bootstrapの使用については、タブ付きナビゲーションについて詳しく説明しますが、HTMLと純粋なCSSのみを必要とする実装もあります。セットアップを見てみましょう：

HTMLを設定します：

先に進み、プロジェクトのメインコンテナとして機能するボディ内のコンテナを使用してボイラープレートHTMLを設定します。 class属性では好きなように呼び出すことができますが、class=”tabs”と呼びます。。これまでのところ、HTMLは次のようになっているはずです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Tabs</title>
   <style> /* No CSS to display yet */ </style>
</head>
<body>
   <div class="tabs"></div>
<body>
</html>

“tabs” <div>の内部、さらに4つの

を挿入し、それぞれをtabのクラスで呼び出します。。これは、本日作成する4つのタブのそれぞれを表しています。入力、タブラベル、タブコンテンツが含まれます。それらすべてのために空のコンテナを作りましょう：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Tabs</title>
   <style> /* No CSS to display yet */ </style>
</head>
<body>
   <div class="tabs">
	<div class="tab">
	     /* THIS IS OUR PLAN IN ACTION*/
		/*input */ 
		<input type="radio" id="tab-1" name="tab-group-1" checked/>
 	       /*label for input */
		<label for="tab-1">Label 1</label>
             /* content */
             <div class="content">Our content will go here</div>
 
</div>
	<div class="tab">
		<input type="radio" id="tab-2" name="tab-group-1" checked/>
		<label for="tab-2">Label 2</label>
             <div class="content gryffindor">Our content will go here</div>
       </div>
	<div class="tab">Try these two on your own! Follow the same convention as above for your class names and ids - I am using a HP theme, but name them whatever you'd like!</div>
	<div class="tab"></div>
   </div>
<body>
</html>

コンテンツクラス名の中にはコンテンツが含まれます。好きなコンテンツを使用できますが、1つのタブで関連するコンテンツを使用するのが標準的な方法です。

CSSを開始する時間：

CSSの作成に関しては、最大のコンテナーから始めて、最小のコンテナーに向かって進んでください。これが機能するために必要な最小限のことです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

ワイルドカードセレクターをボックスサイズ：border-boxに設定します。
メインコンテナでは、displayプロパティをflexに設定し、positionをrelativeに設定する必要があります。表示：フレックスを使用すると、タブを並べて配置でき、相対位置は基本的に、タブのコンテンツを含む境界またはフェンスとして機能します。

この時点で、ラジオボタンといくつかのコンテンツを含む4ブロックのテキストのように見えるものが表示されます。次に、チェックされたブロックを表示し、他のブロックを非表示にする方法を理解する必要があります。

.tabコンテナで、ラベルのスタイルを設定します。
1. 任意の色の1pxの実線の境界線。
2. パディング：5px、10px –ラベルテキストの周囲にスペースを追加します
3. Border-radius 10px、10px、0px、0px –これにより、ラベルが従来のタブのように見えます。

ここで作業を確認すると、ラベルの左側に円形のラジオボタンがあることがわかります。したがって、従来のタブのように見えますが、ボタンのチェックされた属性を維持するには、ラジオボタンの円形部分を非表示にする必要があります。

実際にボタンを選択するには、.tab [type =’radio’]を使用します。非表示にするには、displayをnoneに設定します。

次に、一度に1つのタブのみが表示されるように、実際のコンテンツに取り組む必要があります。

コンテンツdivを選択し、位置を絶対に設定します。絶対位置を設定すると、相対親内のどこにでもdivを設定できます。上、右、左、下を使用して、親div内の必要な場所にコンテンツを設定できます。この場合、leftプロパティとrightプロパティを0に設定します。また、境界線を作成し、背景色を不透明な色に設定します。

選択したタブのz-indexを設定すると、そのタブのパネルが一番上に表示されます。これを行うには、チェックされたボタンとそのコンテンツを選択します。これを行うには、[type =’radio’]：checked〜label〜.contentを使用します。 CSSの要素の間にある「〜」は、チェックされたラジオボタンの後に発生するlabel要素の後に発生するコンテンツクラスが必要であることを示しています。

アクティブなタブを表示するには、[type =’radio’]：checked〜labelを別の背景色に設定します。

これで、ユーザーが各タブをクリックすると、他のパネルのコンテンツを見なくても、タブ間を移動できるようになります。これは、タブ付きナビゲーションを機能させるために必要な最小限の機能です。 CSSをいじって、スタイルを変更してみてください。実用的な実装は以下にコード化されています。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Tabs</title>
   <style>
       * {
           box-sizing: border-box;
       }
 
       body {
           font-family: 'Roboto';
       }
 
       .tabs {
           max-width: 700px;
           min-height: 100px;
           margin: 25px 0;
           width: 100%;
           display: flex;
           /* allows for tabs to be next to each other */
           position: relative;
           /* relative here contains the width of the content */
       }
 
       .tab label {
           padding: 5px 10px;
           border: 1px solid #ccc;
           cursor: pointer;
           border-radius: 10px 10px 0 0;
       }
 
       .tab [type='radio'] {
           display: none;
           /* this makes the radio buttons disappear - we are only keeping track if they are checked or not */
       }
 
       h3 {
           margin: 10px 40px;
       }
 
       ul {
           list-style-type: none;
       }
       .content {
           padding: 10px;
           border-radius: 0px 10px 10px 10px;
           position: absolute;
           left: 0;
           right: 0;
           background: white;
           border: 1px solid #ccc;
           /* the left and right at 0 help the tabs to overlap each other */
       }
 
       /* This allows the selected tab to be on top */
       [type='radio']:checked ~ label ~ .content {
           z-index: 1;
       }
 
       [type="radio"]:checked ~ label {
           background: lightgrey;
       }
       /* color scheme for tabs */
       [type='radio']:checked ~ #gryffindor {
           background: #ec9086;
           color: #241806;
       }
       [type='radio']:checked ~ #ravenclaw {
           background: #3054ca;
           color: #241806;
       }
 
       [type='radio']:checked ~ #slytherin {
           background: #089714;
           color: #252525;
       }
       [type='radio']:checked ~ #hufflepuff {
           background: #f0d695;
           color: #372e29;
       }
 
       [type='radio'] ~ #slytherin {
           background: #033807;
           color: #aaaaaa;
       }
       [type='radio'] ~ #hufflepuff {
           background: #f0c75e;
           color: #372e29;
       }
       [type='radio'] ~ #gryffindor {
           background: #9c1203;
           color: #e3a000;
       }
       [type='radio'] ~ #ravenclaw {
           background: #0e1a40;
           color: #946b2d;
       }
       .gryffindor {
           background: #9c1203;
           color: #e3a000;
       }
       .slytherin {
           background: #033807;
           color: #aaaaaa;
       }
       .hufflepuff {
           background: #f0c75e;
           color: #372e29;
       }
       .ravenclaw {
           background: #0e1a40;
           color: #946b2d;
       }
          
   </style>
</head>
<body>
   <div class="tabs">
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked/>
           <label id="gryffindor" for="tab-1">Gryffindor</label>
           <div class="content gryffindor">
               <h3>HP Chars in Gryffindor</h3>
               <ul class="gryffindor-students">
                   <li>Harry Potter</li>
                   <li>Hermione Grainger</li>
                   <li>Ron Weasley</li>
                   <li>Albus Dumbledore</li>
                   <li>Katie Bell</li>
                   <li>Neville Longbottom</li>
               </ul>
           </div>
       </div>
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1"/>
           <label id="slytherin" for="tab-2">Slytherin</label>
           <div class="content slytherin">
               <h3>HP Chars in Slytherin</h3>
               <ul class="slytherin-students">
                   <li>Draco Malfoy</li>
                   <li>Narcissa Black</li>
                   <li>Lucius Malfoy</li>
                   <li>Severus Snape</li>
                   <li>Tom Riddle</li>
                   <li>Dolores Umbridge</li>
               </ul>
           </div>
       </div>
       <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1"/>
           <label for="tab-3" id="ravenclaw">Ravenclaw</label>
           <div class="content ravenclaw">
               <h3>HP Chars in Ravenclaw</h3>
               <ul class="ravenclaw-students">
                   <li>Lisa Turpin</li>
                   <li>Luna Lovegood</li>
                   <li>Gilderoy Lockhart</li>
                   <li>Garrick Ollivander</li>
                   <li>Padma Patil</li>
                   <li>Sybil Trelawney</li>
               </ul>
           </div>
       </div>
       <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-1">
           <label for="tab-4" id="hufflepuff">Hufflepuff</label>
 
           <div class="content hufflepuff">
               <h3>HP Chars in Hufflepuff</h3>
               <ul class="hufflepuff-students">
                   <li>Cedric Diggory</li>
                   <li>Newton Scamander</li>
                   <li>Nymphadora Tonks</li>
                   <li>Pomona Sprout</li>
                   <li>Susan Bones</li>
                   <li>Teddy Lupin</li>
               </ul>
           </div>
       </div>
   </div>
</body>
</html>

CSSの特異性

CSSボックスモデル：ハウツーガイド

CSSImageSpriteを使用したナビゲーションメニューの作成
画像スプライトは、サイトの読み込み時間を短縮するhttpリクエストの数を減らすために使用されます。以下は、CSS画像スプライトを使用してナビゲーションメニューを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; } span {
HTMLとCSSを使用してサイドバーとメインコンテンツ領域を含むページを作成する
HTMLと本文のサイズを100％に設定すると、流動的なサイドバーとメインコンテンツ領域を備えたWebページが作成されます。次の例はこれを示しています。例 <!DOCTYPE html> <html> <head> <style> html,body { height: 100%; color: white; font-size: 2em; line-height: 200px; } #parent { displ