cssのリンク時におけるセミコロンについて

[jaljal]

気付いたのですが、
link:aの時と一括指定の時はセミコロンが必要ですが
クラスの時はセミコロンがいらないのは何故でしょう？

.parents children1 link

.parents children1:linkとするとエラーです。

こうなるものだと覚えておくものでしょうか？調べても載ってないので。

[softya（ソフト屋)]

css セレクタでちゃんと勉強されるべきです。
それで無くてもjaljalさんは早とちりが多いので、しっかり確認する癖をつけたほうが良いでしょう。
: コロン ; セミコロン
とかa:linkなら知ってますがlink:aは見かけないです。
書籍を買われて、ちゃんと勉強すべきなのかとも思います。
※　ネットの情報の惑わされているように見えます。

[jaljal]

>ソフト屋さん
a:linkでしたか…
そうですね横着やめてちょっとセレクタ調べてみます。
この調子だと質問の切が無いですからね。
ありがとうございます。

[softya（ソフト屋)]

切りが無いというよりも、誤解を蓄積している様子が伺えます。
今までの質問でも回答を誤解しているのでは？と思わせるところがあります。
分かっているかはご本人がご自身で動作を確認して判断するしかありません。
ここで回答やヒントを貰っても、ちゃんとした資料で裏を取ることを省略してはいけません。
早とちりは、jaljalさんの癖というか特性だと思いますので、より入念に確認すべきだと思います。

[jaljal]

>ソフト屋さん
そうですね、ブラックボックス法じゃないですが、出来る時の形をコピペして改変みたいな感じでやってきましたから穴が多すぎますね、体系的に勉強します。

ちなみに:←これはセミコロンでもなく、ただのコロンですね。すいません。
疑似クラスのセレクタの時:link :hoverのように:を付けるのが普通ですが
リストの要素と組み合わせる時は:がいらないのは何故かと思ったという事です。
セレクタを詳しく調べてみます。

[softya（ソフト屋)]

私の知る限り:link擬似クラスはa要素にしか効かないはずです。
> .parents children1 link
なので、そのｌinkは違うものだと言えます。たぶん、link要素とcssエンジンが解釈した可能性があります。
本当に効いていましたか？ google chromeなどのデバッグ機能で確認したと断言できる状況でしょうか。

【補足】
jaljalさんに言った念入りに確認して下さい。って事はこれも同じです。
裏付けをとって下さい。

[nullptr]

:link擬似クラスと:visited擬似クラスはa要素にしか適用はできません。

擬似クラス、擬似要素を学ぶ前にまずセレクタの基本を学んでください。
更に言えば、クラスというものを勘違いされている気もします。JavaやC++で言う｢クラス｣とは別のものです。質問なら受け付けますのでもう少ししっかりと資料を見つけて勉強してみる事をおすすめします。

[jaljal]

<ul class=first>
<li class=second><a class=third href>文章<a><li>
<li class=second2>・・・・・・・・・・・・・・・・・・・
<li class=second3>・・・・・・・・・・・・・・・・・・・
<ul>

こういう構造なんですよね。

[jaljal]

後変数使用時はidは使わず、全てclassを使うようにしています。

[softya（ソフト屋)]

css で変数とはなんでしょうか？　用語は正確にお願いします。
あと、liタグ毎のclass名が違うのが気になります。狙った意図があるんででしょうか？

【補足】
プログラムでも同じですが、メンテナンス性を高めるためには出来るだけシンプルにすることが重要です。
cssの記述も出来るだけ少ないほうがメンテナンス性が高くなります。
htmlの描画速度も上がります。これ、スマホの場合に結構重要です。

[jaljal]

>ソフト屋さん

大いに意味があります。
何故ならsecondのリンクは赤色、second2のリンクは黄色にしたいので
classを分ける必要があります。これをidでしてもいいのですが、css適用時#という記号を使うのが好きじゃないのでclassにしています。

[softya（ソフト屋)]

classを２つ組み合わせると言う技もありますよ。
<li class="second red">
<li class="second yellow">

>classを分ける必要があります。これをidでしてもいいのですが、css適用時#という記号を使うのが好きじゃないのでclassにしています。
今回の話はidは全然関係無いですよね。class名が複数あるのは何故？と聞いただけですよ。
よく読んでから書き込んで頂ければと思います。落ち着いて、誤解しないように。

あと回答を求めた変数とは何なのでしょう？

【補足】
idは好き嫌いで使うものではなく、唯一無二であることを利点を利用するために使います。
特にDOMでは重要です。

[jaljal]

classは型だと思うんですが間違いでしょうか？
変数とはfirstとかsecondの事です。

[jaljal]

classの使い方は、塊をcss時に指定するために絶対必要だと思うのですが複数あったらダメなんですか？
どうやって塊を区別するのでしょうか？

[softya（ソフト屋)]

すいません独自用語やら独自解釈が多すぎます。他人には通じませんよ。

>classは型だと思うんですが間違いでしょうか？
はい。譲歩しても定数定義が最大譲歩です。

>変数とはfirstとかsecondの事です。

少なくとも定数とは言えても書き換えれない物を変数とは呼べません。
正しくはクラス名です。なので他人に正しく伝えるならクラス名と呼ぶべきです。
英語で言えば、 class nameです。
こんな所で独自解釈を導入してもご自身が混乱するだけです。
なので、ちゃんとした資料を読んでくださいと再三書いているわけです。

>classの使い方は、塊をcss時に指定するために絶対必要だと思うのですが複数あったらダメなんですか？
>どうやって塊を区別するのでしょうか？

塊の意味が良く分かりません。
具体例を書いてみてください。
この時一般用語を用いて、独自用語は使わないように意識して下さい。

[jaljal]

cssでは範囲を指定してフォントや色などスタイルを変えるから、classでここからここはsecond
ここからここまではfirstといったふうにブロック化する必要がありませんか？

[softya（ソフト屋)]

cssで範囲を指定するって意味が良く分かりません。
セレクタは日本語で言えば選別です。フィルタリングとかソッチの言葉のほうが意味が近いです。
なんか間違った独自なイメージを形成されているのかな？と思うんですが。

【補足】
cssのセレクタで影響範囲を指定すると解釈するとして、ブロック化と言うのはhtmlの階層構造の事を言われているのか？とも思えましたが、どうなでしょう。
やはり、具体例を書いて貰わないと伝わらない気がしてきました。

[nullptr]

一応、最新規格のCSSに変数は存在します。が、おそらくjaljalさんの言っている変数とは別物です。

とりあえず用語の説明をしてみますね。

･要素
aタグやliタグなどの事です。これは入れ子にすることができ、文書の階層構造を表現することが出来ます。

･属性
要素に与える属性の事です。<a href="test">なら、href属性と、属性の値testと言います。

･id属性
属性にはたくさん種類がありますが、中でもid属性は｢文書内で一意な値｣である必要があります。

･class属性
例えば、｢この要素は記事の本文｣の意味としたい場合、記事がページ内に複数あるなら、idは使えません。しかしどれも同じ記事の本文なので、同じスタイルを与えたいとします。
そうなった場合に、クラス名を付けます。例えばArticleなどと付けます。これでこの要素はArticleという意味を持った要素になります。
そもそもクラスもidも、CSSの為に存在しているわけじゃありません。文書の要素に意味を持たせる為のものです。


これ以外の用語は不要です。型も関数も存在しないのです。HTMLはプログラミング言語ではありませんから。


>何故ならsecondのリンクは赤色、second2のリンクは黄色にしたいので
まぁそういう意図なのはともかく、リンクの色を変えたいならa要素にクラスを指定するべきではないですか？どうでしょう。

また、FirstやSecondなどとクラス付けするのも、redやyellowとつけるのも、よろしいことではありません。
HTML内でスタイルを指定するような事はあってはならないのです。ul要素にtitleListなどといったidを付け、セレクタを使ってスタイルを指定すべきです。:nth-child(n)擬似要素を使いましょう。

[jaljal]

ちょっとcss難しすぎるかもしれません、やばいです、理解力が無いのか俺。
ホームページビルダー持ってるので暫くそれ使う事にします。
idとclassの説明聞いても違いとか分からなくて…

[softya（ソフト屋)]

> redやyellowとつけるのも、よろしいことではありません。

失礼しました。確かに悪い例でした。cssのコンセプトに反しますね。

> ホームページビルダー持ってるので暫くそれ使う事にします。

C++やJavaに比べれば全然難しくないですよ。
cssを使わないのも、個人のホームページでやる分には全然良いのですが、cssを使えば手間が減る所があるし機能も増えるので知らないのは損かもしれません。
そもそも、ちゃんとしたｃｓｓの入門を読んでないですよね？　それで難しいと仰っているなら、やり方が間違っていますとしか言えません。
あとjavascriptやjQueryなどを使うなら理解しなくては行けない事でもあります。

> ちょっとcss難しすぎるかもしれません、やばいです、理解力が無いのか俺。

C++やJavaでも感じましたが独自の解釈やご自身に都合の良い理解が正しい理解を妨げています。

[css]

画像の位置をピクセルレベルで調整するのが難しくて、無理だと思いました。
例えば画像を文章の間に置くみたいな、事でも10分くらいかかるので…
ホームページビルダーなら効率的にサイトが作れるという事で頼る事にします。

[jaljal]

画像の位置をピクセルレベルで調整するのが難しくて、無理だと思いました。
例えば画像を文章の間に置くみたいな、事でも10分くらいかかるので…
ホームページビルダーなら効率的にサイトが作れるという事で頼る事にします。

[softya（ソフト屋)]

なんか予想外の答えが。結局、css入門をちゃんと勉強しなかったんですね。

[jaljal]

勉強したけど分かりませんでした。諦めます。

[softya（ソフト屋)]

勉強したけど分かりませんでした。諦めます。

いや、ちゃんとやったら練習とか復習で半日やら一日で終わるわけないじゃないですか。
書籍を買うなら、その時間もかかりますし。

[jaljal]

サイトより本のほうがいいんですか？

[softya（ソフト屋)]

サイトより本のほうがいいんですか？

サイトでちゃんと勉強できないなら本を買うしか無いのでは無いでしょうか？
jaljalさんに必要なのは、ちゃんとした用語説明と順序だった説明なのだと思います。
それとも十分実用的なサイトは見つけられていますか？　勉強したサイトを教えて下さい。

[jaljal]

http://www.tohoho-web.com/css/basic.htm
http://www.htmq.com/style/

この二つです。

[milfeulle]

もちろん、書籍の方がお金がかかるだけあって情報がまとまっています。有名な言語を勉強されるのでしたら、書籍の方がいいと思います。私は、プログラミング等が専門ではないので小学生の頃から独学で「遊んで」いましたが、初めはWebサイトを作っていました。

HTMLが書けるようになると、次に色を変えたり配置を換えたり見栄えを良くしたいと思うようになりますよね。そこでCSSで「遊ぶ」ようになりました。自分の思うようなデザインに近づけるためにいじっては表示していじっては表示しての繰り返しでした。

私のお勧めは、はじめてのWebドキュメントづくりです。HTMLと本当に基本的なCSSについて1から丁寧に解説して下さっています。ちまたに《あふれていた》下手な解説サイトではなく、HTMLやCSSについて基礎を与えてくれると思います。

HTMLやCSSに慣れてきたら正しい知識を得たい人の爲のCSS2リファレンスなどを見て必要に思ったところを詳しく呼んで実践していけばいいと思います。

注意すべきは、分からないことは放置しないで、何が分かっていないのか、どうして分からないのか考えることです。書籍でもWebサイトでも解説している文章を眺めるだけではいけません。ましてや勝手に読み飛ばしたりしてはいけません。コピペするだけで動いて分かったつもりになってはいけません。ゆっくりとやっていけばいいのです。1ページ読むのに1日かかっても大丈夫です。是非いろいろ試して遊んでみて下さい♪

[softya（ソフト屋)]

この２つで時間を掛けて理解しようとして、ちゃんと内容を読み取れていないなら、やり方が大変悪いです。
短い時間でやったらなら、jaljalさんによく有る誤解満載の斜め読みだと思います。
自分が分かりやすく、じっくりと勉強できるサイトや本を見つけて、ちゃんと勉強される必要があります。
※ CSSの事だけ言っているのではなくて、C++も同様です。

CSSは必要ないと言われるのなら、それはそれで構わないですが全般的に同じような誤解傾向があるので、どこかで改めないとどの言語でも学習に大変支障があります。

[jaljal]

アドバイスありがとうございます

[jaljal]

皆さんアドバイスありがとうございます。かなり細かい部分は飛ばしてるんですが、大事な部分も同時に見落としていたようです。