Style css

CSS セレクター - CSS: カスケーディングスタイルシート | MDN (mozilla.org)

20090000 コメントの入れ方

通常のコメントは  であるが

スタイルシートの中では、/* */ で行なう



<style>
    /*メニューボタンの幅 */
    .button_menu    {
        width:"240px";    
    }
    /*メニューボタンの幅 */
    .tr_height        {
        height:"50px";
    }
</style>

20100105 スタイルシートCSSの指定方法

外部のファイルで宣言する方法


		
	<link rel="stylesheet" href="../shodai_base.css">

head内で宣言する方法



<head>
  <style type="text/css">
    p  {color: red}
    h2 {color: blue; font-size: 120%}
  </style>

インライン設定

<div style="color:#ffa500; font-size:20pt; font-weight:bold; text-decoration:underline;">

http://www.kanzaki.com/docs/html/htminfo17.html

20230712 基本のセレクタ

タグ名で指定


p {
	color:red;
}

クラス名で指定ピリオド( . )で示す


.abc {
	color:red;
}

idで指定 #で示す


#abc {
	color:red;
}

同じ指定を複数の要素に指定カンマ( , )で区切る


p, .abc, #abc {
	color:red;
}

20230712 親子関係のセレクタ

指定した要素よりも配下の要素。「親子」自分は含まない



<div id="a1-1">id=a1-1
    <div id="a1-2">id=a1-2
        <div id="a1-3">id=a1-3</div>
    </div>
    <div id="a1-4">id=a1-4
        <div id="a1-5">id=a1-5</div>
    </div>
</div>

<style>
    #a1-1 div {
        background-color: yellowgreen;
    }
</style>

id=a1-1

id=a1-2

id=a1-3

id=a1-4

id=a1-5

直下の要素。「親 > 子」子は対象になるが、孫は対象にならない



<div id="a2-1">id=a2-1
    <div id="a2-2">id=a2-2
        <div id="a2-3">id=a2-3</div>
    </div>
    <div id="a2-4">id=a2-4
        <div id="a2-5">id=a2-5</div>
    </div>
</div>

<style>
    #a2-1 > div{
        background: yellowgreen;
    }
</style>

id=a2-1

id=a2-2

id=a2-3

id=a2-4

id=a2-5

20230712 属性によるセレクタ

指定した属性を持つ。「 [ ] 」値は問わない


	
	<div id="a3-1" >id=a3-1
	    <div id="a3-2" abc="12">id=a3-2 abc="12"
	        <div id="a3-3">id=a3-3</div>
	    </div>
	    <div id="a3-4">id=a3-4
	        <div id="a3-5" abc="23">id=a3-5 abc="23"</div>
	    </div>
	</div>
	
	<style>
	    #a3-1 [abc] {
	        background: yellowgreen;
	    }
	</style>

id=a3-1

id=a3-2 abc="12"

id=a3-3

id=a3-4

id=a3-5 abc="23"

指定した属性=値で一致する。「 [ ]=値」



<div id="a4-1">id=a4-1
    <div id="a4-2" abc="12">id=a4-2 abc="12"
        <div id="a4-3">id=a4-3</div>
    </div>
    <div id="a4-4">id=a4-4
        <div id="a4-5" abc="23">id=a4-5 abc="23"</div>
    </div>
</div>

<style>
    #a4-1 [abc="23"] {
        background: yellowgreen;
    }
</style>

id=a4-1

id=a4-2 abc="12"

id=a4-3

id=a4-4

id=a4-5 abc="23"

指定した属性が値と部分一致する。「 [ ]*=値」



<div id="a5-1">id=a5-1
    <div id="a5-2" abc="12345">id=a5-2 abc="12345"
        <div id="a5-3">id=a5-3</div>
    </div>
    <div id="a5-4">id=a5-4
        <div id="a5-5" abc="67890">id=a5-5 abc="67890"</div>
    </div>
</div>

<style>
    #a5-1 [abc*="23"] {
        background: yellowgreen;
    }
</style>

id=a5-1

id=a5-2 abc="12345"

id=a5-3

id=a5-4

id=a5-5 abc="67890"

指定した属性が値と先頭が一致する。「 [ ]^=値」



<div id="a6-1">id=a6-1
    <div id="a6-2" abc="12345">id=a6-2 abc="12345"
        <div id="a6-3">id=a6-3</div>
    </div>
    <div id="a6-4">id=a6-4
        <div id="a6-5" abc="23456">id=a6-5 abc="23456"</div>
    </div>
</div>

<style>
    #a6-1 [abc^="123"] {
        background: yellowgreen;
    }
</style>

id=a6-1

id=a6-2 abc="12345"

id=a6-3

id=a6-4

id=a6-5 abc="23456"

指定した属性が値と末尾が一致する。「 [ ]$=値」


	
	<div id="a7-1">id=a7-1
	    <div id="a7-2" abc="12345">id=a7-2 abc="12345"
	        <div id="a7-3">id=a7-3</div>
	    </div>
	    <div id="a7-4">id=a7-4
	        <div id="a7-5" abc="23456">id=a7-5 abc="23456"</div>
	    </div>
	</div>
	
	<style>
	    #a7-1 [abc$="456"] {
	        background: yellowgreen;
	    }
	</style>

id=a7-1

id=a7-2 abc="12345"

id=a7-3

id=a7-4

id=a7-5 abc="23456"

20230712 ～以外によるセレクタ

:not( ～ ) で指定する。



<div id="a8-1">id=a8-1
    <div id="a8-2" abc="12345">id=a8-2 abc="12345"
        <div id="a8-3">id=a8-3</div>
    </div>
    <div id="a8-4" abc="56789">id=a8-4 abc="56789"
        <div id="a8-5" abc="23456">id=a8-5 abc="23456"</div>
    </div>
</div>

<style>
    #a8-1 :not([abc*="345"])  {
        background: yellowgreen;
    }
</style>

id=a8-1

id=a8-2 abc="12345"

id=a8-3

id=a8-4 abc="56789"

id=a8-5 abc="23456"

20230712 全てのセレクタ

アスタリスク( * ) で指定する。



<div id="a9-1">id=a9-1
    <div id="a9-2">id=a9-2
        <div id="a9-3">id=a9-3</div>
    </div>
    <div id="a9-4">id=a9-4
        <div id="a9-5">id=a9-5 </div>
    </div>
</div>

<style>
    #a9-1 * {
        background: yellowgreen;
    }
</style>

id=a9-1

id=a9-2

id=a9-3

id=a9-4

id=a9-5

20230712 AND条件指定でのセレクタ

空白抜きで連結する



    <div id="a10-1">id=a10-1
        <div id="a10-2" class="abc">id=a10-2 class="abc"
            <div id="a10-3" class="efg">id=a10-3 class="efg"</div>
        </div>
        <div id="a10-4" class="abcde" >id=a10-4 class="abc"
            <div id="a10-5" class="efg" atr="ccc">id=a10-5 class="efg" atr="ccc"</div>
        </div>
    </div>
    
    <style>
        /*IDがa10-1 配下のdivタグで、クラスがefg かつ 属性atr あること*/
        #a10-1 div.efg[atr]{
            background: yellowgreen;
        }
    </style>

id=a10-1

id=a10-2 class="abc"

id=a10-3 class="efg"

id=a10-4 class="abc"

id=a10-5 class="efg" atr="ccc"

20230712 複数のクラスを指定する

classを複数指定するときは、空白区切り。


	
	<div id="a11-1">id=a11-1
	    <div id="a11-2" class="aaa ccc">id=a11-2 class="aaa"</div>
	    <div id="a11-3" class="bbb">id=a11-3 class="bbb"</div>
	    <div id="a11-4" class="aaa bbb">id=a11-4 class="aaa bbb"</div>
	</div>
	
	<style>
	    #a11-1 .aaa {
	        background: yellowgreen;
	    }
	    
	    /*クラスaaaとbbbが両方指定されているとき*/
	    #a11-1 .aaa.bbb {
	        background: yellow;
	    }
	</style>

id=a11-1

id=a11-2 class="aaa"

id=a11-3 class="bbb"

id=a11-4 class="aaa bbb"

20230714 widthの詳細

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

CSSのmarginとは？paddingとは？余白の指定方法まとめ

20230714 tableのwidthの詳細

TABLEを切りとき、思ったように幅の設定ができずに困る事が多いので、ココでまとめておく

実際に多いのは、列毎に表示したいサイズが先にありきで、後から全体の幅はこれだけ必要...というケースが多い。
なので、先に列毎に幅を切ってみる

見出し1ああああああああ	見出し2	見出し3
データ1-1	データ1-2	データ1-3
データ2-1	データ2-2	データ2-3



<style>
    #table20230714 {
        background-color: #FFF;
    }
    #table20230714 table {
    border-collapse: collapse;    /*隣接するセルで境界線を共有する*/
    }
    #table20230714 table th, 
    #table20230714 table td {
        border: solid 20px rgb(8, 240, 27);
        padding: 5px;
    }
</style>

<div id="table20230714" >
    <table >
        <tr>
            <th style="border: solid 20px rgb(122, 174, 233) ;width: 100px;">見出し1ああああああああ</th>
            <th style="border: solid 20px rgb(57, 199, 64);width: 200px;"">見出し2</th>

            <th style="width: 100px;">見出し3</th>

        </tr>
        <tr>
            <td>データ1-1</td>
            <td style="border: solid 20px rgb(177, 153, 216)">データ1-2</td>
            <td>データ1-3</td>
        </tr>
        <tr>
            <td>データ2-1</td>
            <td>データ2-2</td>
            <td>データ2-3</td>
        </tr>
	    </table>
</div>

table･tdの幅(width)の仕様と指定方法