CSS(Cascading Style Sheet)において、スタイルの適用対象を表すもの。
CSSの核心！セレクタを使いこなしデザインを自在に操る方法 CSSの書き方の基本を学んだところで、次はいよいよCSSの「核心」であるセレクタについて学びます。 セレクタとは、簡単に言えば「どの要素にスタイルを適用するか」を指定するための「狙い撃ち」のルールです。これを使いこなせば、「記事の最初の段落だけ」「サイドバーのリスト項目だけ」といった、細かいデザイン指定が自由自在になります。 🎯 まずは覚えたい！基本のセレクタ3兄弟 まずは、最も頻繁に使用される基本的な3種類のセレクタをマスターしましょう。 1. 要素セレクタ (タグセレクタ) HTMLタグ名（h1, p, a など）をそのまま使う、…
１ 基本を頭に叩き込みたい ２ CSSとは ３ CSS記述の形、書き方 ４ セレクタの種類 ■ 要素セレクタ（タイプセレクタ） ■ classセレクタ ■ idセレクタ ■ 親子セレクタ（子孫セレクタ） ■ 複数セレクタ ５ 余談 １ 基本を頭に叩き込みたい はてなブログでは、ブログページのデザインをカスタマイズするのに、CSSコードを記述できます。前に利用していたgooブログでは、これができなかったので、大変便利な機能に感じられます。 デザイン設定画面のカスタマイズタブ内に『デザインCSS』という、テキストエディタみたいなツールが用意されています。そのデザインCSSウィンドウを開いて、そこに…
複数の種類のエンティティを指定してコマンドを実行する 今回は、複数の種類のエンティティを対象にしてコマンドを実行する方法について書いていきます。 目次 複数の種類のエンティティを指定してコマンドを実行する 目次 セレクタのtype引数は一度に複数回使えない...... どうやって複数のエンティティを対象にするか 最も簡単な解決策 何度も同じ対象を呼び出す場合 1コマンドで対象を指定する方法 entity_typesを利用する方法 まとめ セレクタのtype引数は一度に複数回使えない...... 複数の種類のエンティティを対象として実行しようとすると、まずは以下のようなコマンドが思い浮かぶと思い…
セレクタの使い分け データパックを作る際に度々使用することになるセレクタ。今回はその中でも@aと@eの違いについて説明していきます。 目次 セレクタの使い分け 目次 @aセレクタ @eセレクタ @aと@e[type=player] @aと@eの大きな違い セレクタの違いによって引き起こされるバグ なぜバグが起きるか @eセレクタが有用になる場面 他のセレクタについて まとめ @aセレクタ @aセレクタはワールド内の全てのプレイヤを対象とするセレクタです。 プレイヤのみに対してコマンドを実行したい場合には大抵こちらのセレクタを使うと思います。 @eセレクタ @eセレクタはワールド内のすべてのエン…
色や線などの属性をスタイルと呼びます。SVGのスタイルは、CSSとして記述することができます。スタイルの記述は、SVG文書から分離して別ファイルにすることができます。スタイルの記述と別ファイルの読み込みについて見ていきます。 CSSファイルの読み込み SVGファイル内にスタイルを記述する スタイルのルール 主要なプロパティ まとめ CSSファイルの読み込み スタイルをCSSファイルに記述し、別ファイルとして読み込む。 <!-- CSSファイルの読み込み --> <?xml-stylesheet type="text/css" href="sample.css"?> <svg width="30…
Selector. セレクター
※過去ブログの転記 普段は適当なclass名をつけて 親 子or孫 {...} 形式でばかり書いているので属性セレクタの種類についてまとめてみた セレクタ 対象 E[attr] 指定された属性を持つ要素 E[attr="val"] 属性の値が一致する要素 E[attr*="val"] 指定した値の部分一致(アスタリスク) E[attr^="val"] 指定した値の前方一致(キャレット) E[attr$="val"] 指定した値の後方一致(ドル) E[attr~="val"] 複数区切りの中に指定した値が含まれている要素に対して適用(チルダ)(ex. class="aaa bbb) E[attr…
※過去ブログの転記 擬似要素 擬似クラス 補足 いつもどっちがどっちかわからなくなるし、いまいち把握できていないのでmemo擬似要素と擬似クラスの違いをまとめてみました 擬似要素 指定したセレクタの一部に対して適用 セレクタ 対象 ::before 要素の前 ::after 要素の後 ::first-line 要素の最初の1行 ::first-letter 要素の最初の1文字 ::selection 選択した要素*1 CSS3から擬似クラスとの判別がしやすいように セレクタ: ではなく セレクタ:: をつける セレクタ: でも動くし、IE8以下は セレクタ:: を解釈しないらしい inputや…
weboook.blog22.fc2.com
weboook.blog22.fc2.com
webtech-walker.com
tech.nitoyon.com
webliker.info
hyper-text.org
coliss.com
coliss.com
webdesignrecipes.com
