Bus errorとSegmentation faultに困ったら見るブログ【CSS】idとclassの違い

物理学者(ポスドク)による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)

【CSS】idとclassの違い
2018.07.26 Thu 02:44 | html/Markdown/CSS

最近、htmlのことをいろいろと勉強している(君、物理屋だよね？)

htmlのコードの中で
divを使ってグループ化をする=> CSSでグループに属性をつける
という流れが多い

本によってはidとclassの属性どちらを付けるかが割と割れてる

↓にそのまま書かれてた
■ 参考 : CSSの記述方法－idとclassの違い

id : 1ページで1回しか使えない
使い所はcontent, container, footer, sidebarとか明らかに1つのページに1つしかないものに使うべきか

class : 1ページ内で何度も使える
「1ページで1度しか使用できない名前を複数使ってしまった場合（id="name"という記述が複数になった場合）、一部のアクセス解析やその他 cgiプログラムなどで不具合を起こしてしまうこともあるようです。ブラウザ上ではid名が重複していてもCSSの指定は反映されますが、リスクを考えて慎重に使うようにしましょう。」とのこと

この違いを知ると、idを使う利点がほぼないように感じるが・・・・

ちなみにidの設定をするときCSSでは

#hoge_id {foo : AAA; }

と#から始める

classの設定をする時CSSでは

.hoge_clas {bar : BBB;}

のように.から始める

あと本によって見かけたのは

div#hoge_id {foo : AAA;}

と頭にdivがついている設定方法

これについては↓に詳しく書かれていた
■ 参考 : CSS divのidとclass、#と.って。初歩の確認事項

#hoge_id {foo : AAA; }
.hoge_clas {bar : BBB;}

という書き方は

*#hoge_id {foo : AAA; }
*.hoge_clas {bar : BBB;}

のようにアスタリスクを省略した書き方

div#hoge_id {foo : AAA;}

はきちんと特定の要素にのみこの設定させると書いているらしい

基本的に.で設定するclassのみを使っていこうと思う

Posted by coffee | Comment(0)

この記事にコメントする

<< 【ただのメモ+写真】台湾滞在記 6~7日目 + ポケモンGO フリーザーデイ | HOME | 【matplotlib】でヒストグラム+フィッティングのメモ + ガウス分布でフィット >>

プロフィール

ＨＮ：coffee
職業：物理屋~~（自称）~~
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST

print "先月子供が産まれました！"

# 最終更新 2022/10/25

カウンター

ブログ内検索

ツイートするボタン

リンク

相互リンク募集中です (Twitterにてお知らせください)

Demo scripts for gnuplot version 5
(gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)

gnuplotスクリプトの解説
(米澤進吾さんの個人ページ、gnuplotと言えばこのかた)

gnuplot のページ
(Takeno Lab、うちのブログがリンクされていたのでリンク返し)

Twitterから映画の評価が分かる＆映画の鑑賞記録が残せる coco
(映画の感想をまとめられるサイト、いつもお世話になっています)

Astronomy Picture of the Day Archive
(天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)

今日のほしぞら
(任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)

GNUPLOTとアニメーション
(応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)

読書メーター
(読んだ本をリストできる便利なサイト)

flickr難民の写真置き場
(20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。しかし、tumblr移住民は死に絶えてはいなかった。)

教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定
(阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)

英語論文執筆用の例文検索サービス
(とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の英語論文から，例文を検索するための検索エンジン)

Name
Title
Color
E-Mail
URL
Comment
Password