数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。

CSSのシャープ(#)idとドット(.)クラスの全て

CSSのシャープ(#)idとドット(.)クラスの全て


今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。

レベル1 #について

#はCSSではクラスではなくてidの時に使います。

次の例で見て下さい。

<div id="testid1">テスト</div>
#testid1{
font-size:20px;
}

実際は次のように表示されます。

テスト

とにかくクラスはドット(.)、idはシャープ(#)と覚えておくといいです。


レベル2 idのもう一つの書き方

通常は<div id="testid2">内容</div>のように記述しますが

<input type="text id="html" name="htmlname" size="30">

のような時にも使えます。

次の例で見て下さい。

<input type="text id="html" name="htmlname" size="30">
#html{
background-color:green;
}

すると今回は背景を緑にしたので次のように表示されます。


レベル3 通常のクラスの書き方

これが一番ポピュラーな方法です。

<div=class="popular">内容</div>と書いた場合です。

次の例を見て下さい。

idではなくクラスなので#ではなくてドット(.)を使っています。

<div class="popular">テスト3</div>
.popular{ border:2px solid red; }

今回は境界線の色を赤にしたので次のように表示されます。


レベル4 クラスのもう一つの使い方

idも2種類書き方があったようにクラスにももう一つ書き方があります

<input type="radio" id="radioid" name="pic">
<label for="radioid" class="radioclass"<メニュー>/label<

のように書くやり方があります。

次の例を見て下さい。

<input type="radio" id="radioid" name="pic">
<label for="radioid" class="radioclass">メニュー</label>
.radioclass{
background-color:yellow;
}

すると今回は背景を黄色にしたので次のように表示されます。

タブで画面を切り替える方法上級編

~タブで画面を切り替える方法上級編~


前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていって より実践で使える形にしていきます。

前回の記事はこちら↓↓になります。

~タブで画面を切り替える方法初級編~ - ★うつ病の一人暮らし★外で働かないで生きていく

レベル1 前回の初級編のスタイルシートと記事中の記述

スタイルシート

<style>

.tabwaku{
border:2px solid aquamarine;
width:150px;
height:50px;
margin: 0 auto;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
display : inline-block;
}

div.wakut{
display: none;
border:2px solid hotpink;
width:450px;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;}

#menu:checked ~ #content1{ display: block; }
#picture:checked ~ #content2{ display: block; }
#recipe:checked ~ #content3{ display: block; }

</style>

記事中

<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

<div class="wakut" id="content1">メニュー部分</div>
<div class="wakut" id="content2">写真部分</div>
<div class="wakut" id="content3">レシピ部分</div>

レベル2 前回の見た目

メニュー部分
写真部分
レシピ部分

それぞれをクリックすると専用の画面が開きますがまだまだお粗末なので今回はそれを修正していきます。


レベル3 ラジオボタンの〇を消す

まずはラジオボタンの〇を消していきます。

まずは全体を$<div class="box">%lt;/div>で囲みます。

<div class="box"<
記事中の記述全部
</div>

このclass="box"内のinput="radio"の部分のdisplayを非表示(none)にします。

.box input { display: none; }

これはスタイルシート(CSS)に記述します。

すると見た目は次のように変わります。

メニュー部分
写真部分
レシピ部分

レベル4 タブ同士の隙間をなくす

次は要素同士の隙間をなくしていきます。

2つの要素の隙間をなくしてみた HTML,CSS復習14 - ★うつ病の一人暮らし★外で働かないで生きていく

ここでも説明していますがまず大元の枠

<div class="box"></div>

のフォントを初期化します。

スタイルシートに次のように追加します。

.box {font-size:0px;}

それから他のクラスのfontを元に戻します。

.tabwaku{font-size:16px;}
.wakut{font-size:16px;}

これもスタイルシートに追加します。

すると見た目は次のように変わります。

メニュー部分
写真部分
レシピ部分

レベル5 スマホの枠内でもうまく表示できるようにする

このままでもパソコンで見たらうまく表示されていると思いますがスマホで見ると枠からはみ出したりしてるので スマホでも枠内にきちんとおさまるようにしていきます。

まず親クラスであるboxクラスにdisplay:flex; flex-wrap: wrap;を追加します。widthを%表示する時に使います。

.box{
display:flex;
flex-wrap;
}

次にタブクラスのtabwakuのdisplay:inline-block;を削除してwidthを次のように修正します。

・修正前

.tabwaku{
width:150px;
display:inline-block;
}

・修正後

.tabwaku{
width: calc(100% / 3);
}

全体の幅を100%にして3つタブがあるので3で割っています。


次に内容の枠のクラスwakutのwidthも100%表示にします。

・修正前

div.wakut{
width:450px;
}

・修正後

div.wakut{
width: 100%;
}

すると見た目は次のように変わります。

メニュー部分
写真部分
レシピ部分

レベル6 一つのタブだけ予め選択状態にしておく

今回は写真タブを選択状態にしてみます。

記事中の表示に次のようにcheckedを追加するだけです。

・修正前

<input id="picture" type="radio" name="onaji1 ">

・修正後

<input id="picture" type="radio" name="onaji1 checked">

すると見た目は次のように変わります。

メニュー部分
写真部分
レシピ部分

レベル7 タブにマウスがのった時の装飾をする

クラス名:hover{ }を使ってタブの背景色などを変えます。

今回は適当に背景、文字色共に赤色にしてみます笑

cursor:pointer:でマウスがそこに乗った時に反応するようになります。

スタイルシートに次のように追加します。

   .tabwaku:hover {
      background-color: red;
      color: red;
      cursor: pointer;
   }

すると見た目変わりませんがマウスが乗った時にタブの背景などが変わります。

メニュー部分
写真部分
レシピ部分

レベル8 うまく表示できました

タップした時赤色なのでみにくいですがうまくいきました笑

レベル9 スタイルシートと記事中の表示のまとめ

スタイルシート
<style>

.box{
font-size: 0px;
display:flex;
flex-wrap: wrap;
}

.box input
 { display: none; }

.tabwaku{
border:2px solid aquamarine;
font-size:16px;
width: calc(100% / 3);
margin: 0 auto;
height:50px;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
}

div.wakut{
display: none;
border:2px solid hotpink;
font-size:16px;
width:100%;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;
}

 .tabwaku:hover {
  background-color: red;
  color: red;
  cursor: pointer;
 }

#menu:checked ~ #content1{ display: block;}
#picture:checked ~ #content2{ display: block;}
#recipe:checked ~ #content3{ display: block;}
</style>
記事中
<div class="box">

<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1" checked>
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

<div class="wakut" id="content1">メニュー部分</div>
<div class="wakut" id="content2">写真部分</div>
<div class="wakut" id="content3">レシピ部分</div>

</div>

レベル10 提供

purechan22.hatenablog.com

purechan22.hatenablog.com

レベル11 困った

スマホで表示したらタブが3つ並んで表示されないので方法を調べたりしてます。

レベル12 スマホだけ表示画面を変えてみる

@media only screen and (max-width : 767px){
  .tabwaku { width:85px; }
}

画面のサイズが767pxを超える場合widthを85pxに固定してみます。

うまくいきました!

~タブで画面を切り替える方法初級編~

~タブで画面を切り替える方法初級編~


今回はタブで画面を切り替える方法を説明していきます。

また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。

他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。

今回は初級編なので最低限の機能だけです。


レベル1 ラジオボタンを作成する

まずはラジオボタンを作成していきます。

今回はメニュー、写真、レシピと画面が切り替わるようにしていきます。

ラジオボタンなのでtype="radio"を使います。

またidとnameには好きな名前を入れておきます。ただしnameは全て同じ名前にします。

<input id="menu" type="radio" name="onaji1">
<input id="picture" type="radio" name="onaji1">
<input id="recipe" type="radio" name="onaji1">

実際の見た目は次のようになります。


レベル2 ラジオボタンに名前をつける

これだけだとラジオボタンがポツポツと並んでいるだけなのでこれに名前(ラベル)をつけていきます。

label for="好きな名前" classは全部同じ名前をつけておきます。

ここでいうクラスはスタイルシートのクラスのことです。

通常だとdiv class="tagwaku"などとする所ですがこの場合は次のように記述します。

<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

レベル3 タブ自体の枠を作る

私の自作ツール (クリック→枠のスタイルシートを自動で作れるツール←クリック)を使うだけです。

自動ツールで出てきたスタイルシートにdisplay:inline-block;を追加して要素を横並びにするだけです。

ここでレベル1でつけたclass="tagwaku"と同じクラス名を書きます。

.tabwaku{
border:2px solid aquamarine;
width:150px;
height:50px;
margin: 0 auto;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
display : inline-block; 
}

記事中には次のように記述します。


<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

実際には次のように表示されます。


レベル4 タブをクリックした時にでてくる枠を作る

次にタブを押した時に出てくる枠を作ります。

これも私の自作ツール (枠のスタイルシートを自動で作れるツール)を使うだけです。

タブの一つの幅が150pxなので幅を450px、高さを適当に300pxにしておきます。

また枠はタブがクリックされるまでは非表示にするのでdisplay: none;を追加します

div.wakut{
display:none;
border:2px solid hotpink;
width:450px;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;}

記事中には次のように記述します。

<div class="wakut" id="content1">メニュー部分</div>
<div class="wakut" id="content2">写真部分</div>
<div class="wakut" id="content3">レシピ部分</div>

実際にはdisplay:noneにしているので何も見えません。


レベル5 タブとその内容部分を連結させる

タブのidと内容部分のidに注目してそれぞれ対応させるように記述します。

タブのメニューとその内容のidを対応させます。


<input id="menu" type="radio" name="onaji1">

<div class="wakut" id="content1">メニュー部分</div>

上記のid="menu”とid="content"を対応させて次のように記述します。
#menu:checked ~ #content1{display:block;}

まずいったんdisplayを非表示noneにしてるのでタブが選択された時に表示させるためにblockにします。

またシャープ(#)はCSSではidを表します。

さらに対応させるためにはCSSでは~を使います。

#menu:checkedでもしmenuタブが選択されていたらという意味になります。

同じように写真タブとレシピタブも記述すると次のようになります。

   #menu:checked ~ #content1{ display: block; } 
   #picture:checked ~ #content2{ display: block; }
   #recipe:checked ~ #content3 { display: block; }

レベル6 ここまでをまとめて書く

記事中

<input id="menu" type="radio" name="onaji1">
<label for="menu" class="tabwaku">メニュー</label>

<input id="picture" type="radio" name="onaji1">
<label for="picture" class="tabwaku">写真</label>

<input id="recipe" type="radio" name="onaji1">
<label for="recipe" class="tabwaku">レシピ</label>

<div class="wakut" id="content1">メニュー部分</div>
<div class="wakut" id="content2">写真部分</div>
<div class="wakut" id="content3">レシピ部分</div>

スタイルシート

<style>

.tabwaku{
border:2px solid aquamarine;
width:150px;
height:50px;
margin: 0 auto;
padding:10px;
background-color:wheat;
border-radius:0px;
box-shadow:none;
font-weight:bold;
display : inline-block;
}

div.wakut{
display: none;
border:2px solid hotpink;
width:450px;
height:300px;
padding:10px;
background-color:mistyrose;
border-radius:0px;
box-shadow:none;
font-weight:bold;}

#menu:checked ~ #content1{ display: block; }
#picture:checked ~ #content2{ display: block; }
#recipe:checked ~ #content3{ display: block; }

</style>


実際には次のように表示されます。

メニュー部分
写真部分
レシピ部分

それぞれクリックすることで内容が入れ替わります。

次回は上級編としてより実践で使える形に装飾していきます。