2020.01.19スポンサーリンク属性クラスタです。「ある属性が入っている要素だけスタイルを適用」というやつです。わたしはあんまり使わないけどたまに使う...的なやつです。まとめHTMLの「要素」と「属性」と「属性値」をおさらいはじめにやっとけって感じはありますがおさらい。「要素」と「属性」と「属性値」です。pが要素、classが属性、noteが属性値です。この要素にnoteというクラスをつけます、という意味になりますね。「なにに(要素)」、「なにを(属性)」、「どうする(属性値)」って感じです。これだと「ここに画像、その画像は「image.png」、代替テキストは「サンプル画像」、横幅は「100px」、高さは「100px」で表示」ってことになってます。これは「これリンク、アドレスは「http://www.nullllog.com」、フレームは別ウィンドウでね」ってことになります。ついでにCSSのセレクタもおさらいCSSは「セレクタ{プロパティ:値;}」です。これは「p、色は赤ね!」と言っています。【初心者CSS】属性クラスタの書き方X[属性]ある属性を持つ要素Xに対してスタイルを指定。こんなhtmlがあるとして。class="sample">テキストテキストテキスト</p><p>テキストテキストテキスト</p>こんなふうにCSSを書くと。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト「class」が付いているところにスタイルが適用されました。あ、属性とカッコの間はスペースナシで書いて下さいね。X[属性名=”属性値”]指定の属性が指定の値を持つ場合の要素Xにスタイルを指定。}これと疑似要素を応用すると、外部リンクのときはアイコンをつける、みたいなやつができますね。ぐるトップにもどるCSSはこんなかんじですね。inline-block;margin-left:3px;}X[属性名~=”属性値”]複数のクラスを指定している場合など、属性値が2つ以上ある場合はX[属性名~=”属性値”]で書いて下さいね。イコールの前に「~」をつければOK。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストX[属性名^=”文字列”]指定文字列から始まる要素にスタイルを適用。これけっこう便利なんですよ。クラスに連番ふるときとかありますからね。属性値が「sample」で始まる場合にスタイルをあててみます。}X[属性名$=”文字列”]指定文字列で終わる要素にスタイルを適用。属性値が「02」で終わる場合にスタイルをあててみます。}X[属性名*=”文字列”]指定文字列を含む要素にスタイルを適用。属性値に「ampl」を含む場合にスタイルをあててみます。まとめ複数のクラスに同じスタイルを指定する場合にカンマ区切りで書きがちなんですが、属性クラスタ使えるようになるとその手間が要らなくなるんですよね。コピーnullllをフォローするnullllnullllog関連記事WEB【初心者CSS】間接セレクタ・隣接セレクタ・直下セレクタまとめCSSの間接セレクタ・隣接セレクタ・直下セレクタとはなにか、使い方などをサンプル付きでまとめておきます。Generator」の使い方をサンプル付きでわかりやすく説明します。WEBセンスのいい写真でサイトを彩る!おすすめ無料写真素材サイトセンスのいい写真でサイトを彩る!アイキャッチなどに使えるおすすめ無料写真素材サイトです。Webグランプリ」受賞サイトを調べてみました。Webグランプリ」は企業サイトのみが参加できる、WEBサイトAWORDです。WEBおしゃれ!かわいい!便利!!商用にも使える無料素材サイトおしゃれでかわいいくて便利な、商用にも使える無料素材サイトを3つご紹介します。すべてベクターデータでダウンロードできる素材サイトです。Creator」を紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月おすすめサーバこのサイトでも使用しています。まとめAUTHOR書いた人nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。nullll14人気記事Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編2019.10.152020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編2019.11.262020.01.14Cocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編2019.12.122020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編2019.10.162020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編2019.10.182020.01.09nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。Reserved.検索メニューWEBWORDPRESSWORKSいろいろプロフィールタイトルとURLをコピーしました。