今回はフォントから離れて自分なりの解釈でid属性とclass属性について書き残します。
結果だけを求める方にとっては、説明が長いので読む気も起きないと思います。
「理屈っぽくて嫌だ」
でも、その理屈が知りたいワタクシにとっては結果だけを追求するのは「答えは教えます。だけど、なぜそうなるかは自分で考えなさい」と言われてるようです。自主性を重んじる昨今ではこれでいいのでしょうか？
まぁ、答えも解らないままの状態より良いですが・・・。
後々の発展や応用を得る為には、基本と理屈が大事だと思います。それは自分なりの解釈や理解で良いと思います。
間違っていたなら、それを気付いた時点で修正すればいいだけです。
こういった事を文面にすると矛盾が多く出てきますが、それも今後に発生する問題解決の糸口やアイデアになります。
試行錯誤は失敗ではなく、経験の実績です。
失敗を恐れずに実践していきましょう。
PC上では何度でもやり直しが出来るのですからね。
他人ではなく「何事も自分が納得するまでやり切る事」が人生で重要な事と今日この頃思うオッさんです。
では、
間違えてる所もあるでしょうが、現時点でワタクシはこう考えてCSSを見ています。
CSSの属性ってなんだ？要素って？
はっきり言うとあまり理解してません。これは「そういうもの」と考えるようにしてます。
CSSのルールと思ってます。
サッカーでキーパー以外の選手は手を使ってはいけない。なぜ？そういうルールのスポーツだから。
CSSを考えた人が、そういうルールで作ったプログラムだから、そういう物だと。
属性と言われている英語？みたいなのは、この二つ以外にもあります。ただ、一番使用頻度が高いのか、よく目にします。
なので、この二つに関してちょっと調べました。
調べても、属性・要素がどのぐらい種類があるか、そもそも意味を理解していないので、当たり前のように「この属性の場合は・・・」とか丁寧に書かれていても、本当の意味で理解できてません。あくまでもワタクシの解釈です。
属性と言われてる物はHTMLを入力する場所で使う代入法
数学の連立方程式にある
x+2y=8 → HTML
x=y+5 → CSS
みたいな？
答えを導き出す為に作る式をCSSで作る。
で、CSSで作った答えはHTMLに代入されて結果発表(PC上での表示)される。
と。
属性単体では答えを持たない空欄のままの解答用紙。なので、属性には答えが必要。
その空欄を埋める為にCSSで答えを作る。
解答用紙(HTML)に答えを直接記入してもいいけど、それだと解答用紙がごちゃごちゃになって分かりにくい。
なので、解答用紙を見やすくする為に、答えを出す為の計算を事前にする為の用紙がCSS。
簡単に解答できるもの(その場で一つの解答しかない物や簡単に解答出来る物)であれば直接記入する。
よく見かける「href」。リンク先に飛ぶように指示する「属性」みたいです。
じゃあ「属性」と言う事なのでCSSで答えを作らないといけないの？
リンク先を指定する場合は一つの問題に付き一個だけですよね？なので直接解答します。
答え方は 「="ここに答えを書く"」
なので
問題です(<a>)
nofanの日記にジャンプ(href)したい(させたい)のですが、場所はどこですか？
答えは「="https://tftnature.net"」です。
この問題とその答えはここで終わりです(</a>)。
入力したのは以下
<a href="https://tftnature.net">nofanの日記です</a>
HTMLに直接入力すると以下になります。
ってな感じかな？
じゃあ要素は？
要素はそれ単体で答えを持ってる物かなと。
<p></p>みたいな「段落」との答え。
なので、HTMLに答え<p></p>を直接入れてあげると段落が作られる。
では属性に答えを作る方法は？
xやyと同じように、
id (HTMLでの入力) = 「#」(cssでの指示方法)
class (HTMLでの入力) = 「.」ドット(cssでの指示方法)
で、解答用紙にかかれている問題もいっぱいあるので、どの答えを解答したいのか指定してあげる(答えの名前を付ける)。
CSSに書く答え
#anser {font-size: 15px;}
.anser {font-size: 15px;}
実際はフォントサイズだけを指定するだけで使う事は無いかもしれないですが、とりあえず。
これは「フォントサイズは15pxです(フォントサイズを15pxにしなさい)」という答え(命令)です。
名前は自分で考えて何をつけてもいいはずです。ただ、使えない使ってはいけない記号はあるかと思います。
ちなみに複数の答え（指示）を出したい場合はCSSに
#anser {font-size: 15px; color: #ff66b2;｝
と連続して記入すればOKです。また、上記のように同じ名前を付けることはないとは思いますが、同じ答え（指示）を出す場合は「,」コンマで区切ってあげればＯＫのはずです。
#anser,.anser {font-size: 15px; color: #ff66b2;｝
ですね。
そしてこれをHTMLに回答する場合は
<p id="anser">テストです</p>
<p class="anser">テストです</p>
結果は
テストです
テストです
できました。まぁ、両方とも同じ色にしてるのでわかりにくいですが、同じ答えを出す場合は属性であっても、フォント変更の時に入力したやり方と同じでＯＫと言うこと。
あと、一度に複数の属性を入力した場合はどうなるのか？
今回は同じ色、同じフォントサイズなのでわからないかと思いますが、
HTML上
<p id="anser" class="anser">どうなるの？</p>
どうなると言っても同じ答えなので当然
どうなるの？
こうなるの。検証になってないって？いやいや。ひとつの<>の中に複数の属性を入力して答えを出してもエラーが出ずに発表してくれると判明しました。
では今度は id 属性の答えをもう一つ追加です。
#anserbl {font-size: 20px; color: blue｝
文字色を青でフォントサイズも20pxに変更です。
HTML上に先ほどと同じように複数指定してあげます。
<p id="anserbl" class="anser">どうなるの？</p>
どうなるの？
こうなりました。
これはなぜか？
idをclassより先に入力したから？
違うみたいです。
属性でも力関係があるのです。
classさんよりidさんの方が強いのです。
上司です。
classさんが係長でidさんが課長なのです。
同時に違う指示を出した場合は、上司である課長に逆らえない完全なる縦社会なのです！！
この優先順位がある為にフォント変更でも、コピペで使うCSSがうまくいかなかったりするのでした。
でもでもでも、「特命係長」なんてドラマもありましたが、「特命主任」なんて事もできます。多分・・・（ワタクシが勝手に言ってるだけです）。
まだ検証が出来てないのですが、今までの経験上、そうなるのでは？との推測です。
そうなると、主任は「要素さん」で、特命を出すのは会長（CSSの仕様）です。
誰も逆らえません。しかし、某銀行員のようにそれすらも跳ねのける異端児もいるみたいです。
そのあたりの「優先順位」は次回で頑張ります。
フォント変更から違う題材に変わりましたが、これが解決しない限り、ワタクシのフォント変更の結末を迎えることが出来ないと判断したので、こちらを優先して検証と実践をしていきます。
ちなみにこの記事を書いてる時も、CSSでうまくいかなかったりしました。
HTML上でCSSを入力したのですが、CSS専用の用紙ではスルーしてくれる問題をHTMLはスルーしてくれない。と言うことが分かりました。
石頭です。
ちなみに自分のやり方が正解かどうかも不明です。
やったらできた。
の結果です。
ではでは
