コピー2021.12.12今回は基本に立ち返り、よく使う、基本的なセレクタ・擬似要素・擬似クラスのおさらいをしてみようかと思います。擬似クラスまとめCSSセレクタって何?例えばCSSで「段落の文字色を赤にする」ときに「~の」、要するにこの場合「段落の」の部分がセレクタになります。上記の赤文字の部分がセレクタです。そのセレクタにも様々な使い方があり、セレクタを使いこなすとCSSコーディングは楽しくなります。CodePen.このようにセレクタをアスタリスク(*)にすると全ての要素に同じスタイルを設定できます。と全てにスタイルが設定されます。以前にreset.cssに使ってましたが、個人的に例外が設定しにくい理由で使っていません。Doctorなどありますがボクのオススメは自分で書くです。CodePen.このように同じp要素でも「hoge」というclassが付いているほうだけスタイルの適用ができます。クラスの特徴は同一ページで何度でも使え、実際のクラス名は自由に決めることができます。CodePen.クラス同様、#hogeを指定したものだけスタイルの適用ができます。IDの特徴は同一ページ内で1度しか使えず、ID名は自由に決めることができます。ID名とclass名は自由に決められるが・・・ID名とclass名は自由に決められると書きましたが、一応制限や知っておいた方が良いことはたくさんあります。半角英数字、一部の記号のみ(記号は「-」と「_」のみ)スペースは使えませんID名、class名の1文字目はアルファベット(数字から始めない)以上が制限です。その他、ネーミングルールをしっかり決めておかないと、サイト更新の利便性や最悪CSS破綻に陥ることもあります。ネーミングルールにはBEMやSMACSS、OOCSSなどがあり、html構造を明確にしたものやオブジェクト指向に基づいたもの、良いとこ取りをしたものなどがあります。※詳しくは記事にしたいと思います。CodePen.セレクタを半角スペースで区切ると子孫要素、id、classにスタイルを適用することができます。CodePen.セレクタを「>」括弧で区切ると子要素にだけスタイルを適用することができます。サンプル「anchor03」を見ていただければ分かるように直下だけにスタイルが適用されると勘違いされがちですが、子要素が正解です。CodePen.セレクタとセレクタの間に「+」を追加すると、その要素だけにスタイルを適用することができます。CodePen.セレクタhoge1とセレクタhoge2の間に「~」を追加するとセレクタhoge1より後のセレクタhoge2にスタイルを適用することができます。サンプルを見ていただいて分かるようにh2以降のpには全てスタイルが適用されます。CodePen.2つのアンカーがありそれぞれのhref属性は「#」と「A」になっています。content:"配置したいコンテンツ";}上記のようにセレクタに続けて「:before」「:after」で指定し、contentプロパティで配置したいコンテンツを記述します。「::before」「::after」は擬似要素と呼ばれCSS3ではコロンを2つで記述しますが、コロン1つでもエラーにはなりません。CodePen.セレクタの1番目の要素だけにスタイルを適用することができます。CodePen.セレクタの最後の要素だけにスタイルを適用することができます。CodePen.n番目のセレクタにスタイルを適用することができます。CodePen.最後からn番目のセレクタにスタイルを適用することができます。CodePen.親セレクタ(要素)内に子セレクタ(要素)が1つの場合のみスタイルを適用することができます。サンプルは「.hoge」が3つあり、それぞれ「p」が2つ、1つ、3つ入っています。この場合、2つ目の「.hoge」内の1つかしない「p」にのみスタイルが適用されます。擬似クラス「:first-child」「:last-child]」「:nth-child(n)」「:nth-last-child(n)」「:only-child」は擬似クラスと呼ばれ、コロンな1つで記述します。まとめ今回はよく使われそうな、代表的なセレクラの紹介をしていきましたが、他に様々な擬似要素、擬似クラスがあります。Blog擬似要素はダブルコロン、擬似クラスはシングルコロンで記述しよう。Webマーケ...https://irotoridorino.sakura.ne.jp/webm/css3-pseudo-elements/CSS3からafterやbeforeなどの擬似要素(Pseudo-elements)の記述は、ダブルコロン(::)になりました。...セレクタを制するものはCSSを制すとよく言うかどうかは知りませんが、楽しくなるのは間違いありません。Ver2.1.1関連記事css[CSS]背景にビデオを配置して全画面で表示するよ!珍しくビデオネタです。言ってもCSSネタなんですけど。いう訳で、ビデオを背景に配置して全画面で表示するみたいな案件が来そうなので作ってみた。正確に言うと背景としてではなく普通に配置してposition:fixedしだ...Instagram[SnapWidget,Instagram]インスタグラムのタイムライン、ハッシュタグをWEBサイトに表示するInstagram、人気ですよね。女子とかに人気ですよねっ。ユーザーの6割は女子ですって。そんなInstagramをWEBサイトに表示していれば・・・そんな淡い期待を抱きながら、チョチョイのチョイでやってみようと思います。Snap...css[CSS]:after擬似要素を使ってCSSだけで吹き出しを作る吹き出しといえば「笑う」みたいな変な固定観念を持ちあわせています下山です。今回は笑いながら記事を書きます。:after擬似要素を使って吹き出しの作り方をまとめたンゴ。Bootstrap最近マイブームのフレームワークのご紹介。マイブームって・・・死語。Bootstrapが使いやすかった。...css[CSS]そろそろFlexboxをまとめてみるIE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。この辺、クライアントにも依存するところはありましてね、柵やらなんやらね。Numbers」を使っている方も少なくないはず。実際に使ってみると便利ですよね。invert]hover時に画像の色を白くする2021.03.012021.12.11[CSS]「※」を行頭に使った文章で2行目以降を1文字分空ける2013.05.112021.11.25[CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。(14)タイトルとURLをコピーしました。