[
[返信する]]
cssの記載について
by ぺーぺー
2020-02-16 03:20
cssやタグの書き方ついて自分でもよく勉強し、ネットでセレクタなどのキーワードで調べてみてもわからなかったのでお聞きします。
わからないことの例:
子ページのヘッダー内
<style>
.red {color:red;}
red {display:block;color:red;}
</style>
子ページの全体レイアウト内
<div class="red">赤い文字</div>
<red>これも赤い文字になる</red>
.をつけるのと、つけないのは具体的にどういう違いがあるのでしょうか。
divとspanはわかります。
<div class="red">段落がある赤い文字</div>
<span class="red">インラインの赤い文字</span>
段落の赤い文字にしたい場合、
<red>こちらの方が本文で表記しやすいのでよくつかっているのですが、</red>
問題ないでしょうか？
例では単に、文字色の変更程度なのでわかりにくくてすみませんが、詳しい方、お答え待ってます。
pc
[編集]
by 774
2020-02-16 13:34
▼HTMLについて
▽HTMLの基本
・<要素名>内容</要素名>
・<要素名 属性="値">内容</要素名>
└『属性="値"』を増やす際は半角スペースを挟む
▽要素名について
『div』『span』『p』などはHTMLとして定義されていますが、『red』は未定義となります。
基本的に定義済の要素以外は使用しない方が無難です。
▽未定義要素の利用について
・一応は問題なし
・今後HTMLのアップデートで現利用とは全く違った挙動の要素として定義される可能性がある
（詳細『HTMLUnknownElement』で検索）
個人的な好みの話ですが、未定義要素を利用しているとHTML採点ツール等を用いた際にそれ等に反応し指摘項が多くなる為、肝心のミスの発見がし難くなったりします。
▼cssのセレクタについて
▽『.』有無
無：指定単語が要素名となる要素すべて
└例:『red』→『<red></red>』に反映
有：指定単語のクラスを持つ要素すべて
└例:『.red』→『<要素名 class="red"></要素名>』に反映
このあたりは一度『CSS セレクタ』での検索をお勧めします。
『div』『span』要素はHTMLとして定義済かつ、余計な機能やスタイルを持たない汎用タグの為、此等にクラスを付け装飾している人が大多数です。
pc
[編集]
by ぺーぺー
2020-02-16 15:56
>774さんへ
詳しくありがとうございます。なんとなくやってしまっているけどずっと不安だったことが理解できました。
.無しは未定義要素で一応は問題無いが、あまり好ましくない記述という認識を持ちました。とても勉強になりました。一応、自分もほとんどdiv,spanで囲うようにはしているんですが、面倒なときたまにやってしまうのでやめようと思います。なんだか目の前の雲が晴れていくようです。お答えありがとうございました。
pc
[編集]
by 774
2020-02-16 17:05
>.無しは未定義要素
『.』無しはあくまで「指定単語が要素名となる要素」へのスタイルを指定する問題のない記述です。
要素自体の定義/未定義はHTMLの話なので、CSSとは切り離してお考えください。
例：
div { color: red;}
→CSS :問題なし,全ての『div』要素に反映
HTML:問題なし
p { color: red;}
→CSS :問題なし,全ての『p』要素に反映
HTML:問題なし
red { color: red;}
→CSS :問題なし,全ての『red』要素に反映
HTML:未定義要素の為やや問題有り
pc
[編集]
by ぺーぺー
2020-02-16 23:08
>774さんへ
わかりました。
すみませんでした。このトピを立てる前、自分でわからないことをどう質問したらいいかもわからない状態でタイトルを決めてしまいました。
ユーザーさんのテンプレで.無しの方法を知り、それまで<div class="クラス名">ほにゃらら</div>などしか知らなかったので度肝を抜かれて自分でもやってたんですが、どう違うのかと問題無いとわかって良かったです。
親切にありがとうございました。
あともうひとつわからないことがありますのでどなたか教えてください。
小説機能で公式テンプレを使っています。
以下小説全体レイアウト
<div id="layout">#novel#</div>
ここまで全体レイアウト
この小説機能の小説全体にパスワードをつけているんですが、
以下、その小説機能パスワードのコメント欄
<div id="layout">パスワードを入力してくれなどの説明文章#form_入場#
</div>
ここまでパスワード
パスワードのページも同じデザインにしたいと思い、そうしてるんですが
「id」は一回しか使えないと聞きました。
私はパスワードのページが独立しているという認識です。もし間違っていたら教えてください。
pc
[編集]
by 774
2020-02-17 17:57
パスページは機能の全体レイアウトもHP設定の共通上下表示テキストも継承されない為、独立している認識で問題ないです。
何処のページに何が反映されるのか結構わかり難いですよね。
このあたりはソース表示をしてみると可視化できるので、一度試してみることをお勧めします。
>「id」は一回しか使えない
すみません、おそらく理解しているとは思うのですが一応。
id属性自体は何度でも使えます。
しかし、id属性の値はページ内で重複しない一意な物である必要があります。
▽例
×：│<div id="layout">aaa</div>
│<div id="layout">bbb</div>
○：│<div id="layout1">aaa</div>
│<div id="layout2">bbb</div>
pc
[編集]
by ぺーぺー
2020-02-17 20:02
>774様
お答えありがとうございます。
わーよかった安心いたしました！
言葉足らずですみません。
同じ「id名」はそのページ内に一回しか使えないという認識でいます。(イメージとしてページ内ジャンプのように)
不安があったらページのソースを見てみることにします!!いろいろと教えてくださり助かりました。本当にありがとうございました。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2020-02-16 03:20
pc
戻る
]