【CSS】接頭句の違い "#"と"." 【お家IT#15】

前回は、ボタンの透過度を設定した。
今回は、基礎的な話でなんとなく使っていたCSSの接頭句の違いを書く。

前々回のコードをコピーしたのが下記。

"."で開始するstyleは、classに対応
"#"で開始するstyleは、idに対応

classで記載しておくと同じstyleを適用できる。

//**************** html **********************

…
    <div class="l2">
        <canvas id="camera_record_box"></canvas>
    </div>
…

//**************** css ***********************


<style type="text/css">
…
.l2 {
    top: 0px;   /*動的に変更されるので適当*/
    left: 0px;  /*動的に変更されるので適当*/
    width: 400px; /*撮影枠サイズ*/ 
    height: 60px; /*撮影枠サイズ*/
    position: absolute; /*absoluteに設定*/
    padding: 0em 0em;
}
#camera_record_box{
    position: absolute; /*absoluteに設定*/
    border: 1px solid red; /*赤い撮影枠*/
    padding: 0em 0em;
}
…
</style>

以上。
次回でフロントエンド（webアプリ系統）の話は終えたい。
最後は簡単に非同期処理について、以降は画像処理の話をしたい。

MotoJapan's Tech-Memo

技術めも

【CSS】接頭句の違い "#"と"." 【お家IT#15】