便利なツールの話パソコンの話リファレンスInkscapeの使い方FreePlaneの使い方このブログについてブログ特集お問い合わせサイトマップダウンロードinkscape・GIMPを使ったデザインお勉強ブログ。WordPressなどのウェブ関連のお勉強もしています。menuホームウェブコーディング意外と重要なCSSのidとclassを使い分けウェブコーディング2016.01.14意外と重要なCSSのidとclassを使い分けWordPressテーマを作ったり、ホームページを作ったりするとき、間違いなく登場するのはCSS(カスケードスタイルシート)です。CSSはホームページやブログのデザインを設定しますが、IDでもclassでもCSS上は全く同じようにビジュアルを設定できてしまいます。この2つには明確に違いがあるので、正しく使い分ける必要があります。idとclassの使い分けはこうするCSSでidとclassを使う方法まずはidとclassの使い方をおさらいしてみます。idを使う場合、HTMLタグではこのように書きます。id="tomato">この部分はtomatoの設定に従います<span>CSSではidを指定するときは#(シャープ)を使って、次のように記載します。48px;}では次にclassを使用したパターンです。HTMLではidの部分をclassに変えるだけです。class="water">この部分はwaterに従います<span>CSSは.(ドット)を使って書きます。48px;}idとclassの違う点HTMLでもCSSでも、記載上はほとんど変わりませんが、idとclassには重要な違いがあります。idはリンクとしても機能するが、classは機能しないCSSではclassよりもidが優先される詳しく見ていきます。idはリンクとしても機能するが、classは機能しないこのブログの記事ページヘのリンクはhttps://nahcew.com/web-production/use-id-class-in-css/ですが、HTMLでidが設定されているときに限って、記事内のidを指定してリンクを貼ることができます。(「idclass」というidが設定されている)このリンクをクリックすると、指定のidの箇所へ自動でスクロールされたページが開きます。この機能はclassにはありません。CSS的にはidもclassも大差ないのですが、HTML的には大きな違いです。これが理由で、1つのHTMLファイル内で同じidは1回しか使えません。逆に、1つのHTMLファイル内でclassは何度でも使えます。CSSではclassよりもidが優先される2つ目のこの違いは有名ですね。1つのHTMLタグにidとclassの両方が設定されていて、スタイル設定が重複している場合はidの設定が優先されるということです。class="water">このテキストは赤で表示されます<span>これに次のCSSを設定します。blue;}この場合、1つのspanタグにidとclassが設定されているので、「#tomato」のスタイルが優先されます。スタイルとしてはフォントサイズが48pxで赤いテキストが表示されることになります。idとclassの使い分けはこうするよく使われている方法に、ページのヘッダー・フッター・メインカラム・サイドバーなどのレイアウト関連のdivタグにidを設定する方法があります。この方法では、それ以外のスタイルはすべてclassを設定します。<p>サイトの名前や画像を配置したり、グローバルメニューを設置します。style=""><p>ここはヘッダーです</p><p>サイトの名前や画像を配置したり、グローバルメニューを設置します。3em;}...etcヘッダーなどのレイアウト関連のdivは1ページに1度しか表示されないので、この方法は理にかなっています。それ以外では、CSSはすべてclassで記載するという方法もあります。この方法ではidをHTMLのマークアップ専用に利用するので、CSSの設定とHTMLのマークアップが完全に分離できます。<p>サイトの名前や画像を配置したり、グローバルメニューを設置します。style=""><p>ここはヘッダーです</p><p>サイトの名前や画像を配置したり、グローバルメニューを設置します。80px;}HTMLタグのうち、ページに1つしか設置しないものにはidをつけ、それ以外にはidをつけないようにします。classは必要なタグに全て挿入します。1つのタグ内にidとclassを設定することになりますが、CSSではclassだけを使うので比較的わかりやすい記述になります。おすすめは2つ目に紹介したCSSをclassのみで構成するパターンです。後になって、idの書き方を変えたいと思ったときにHTMLだけを編集すればいいので、メンテナンスが比較的簡単です。JavaScriptなどのカスタムをしようとしたときに、idをすべて書きなおすはめになったら泣きたくなりますから。普段、あまりCSSに馴染みのない人だったら、はじめはいろいろ試してみるというのもありです。CSSの記述方法や優先度は、実際に設定してみないと理解できない部分も多いので。"いいね!"Facebookで更新情報をお届け。absolute】を最短で理解するための2つのポ...positionを使うとfloatやmarginを駆使してレイアウト...ウェブコーディングAdSenseのモバイル向けページ単位の広告をWordPressに設置する方法AdSenseにモバイル用のページ単位の広告という機能が追加されてしば...ウェブコーディングWordPressでも簡単に使えるってほんと?会話風吹き出しのCSSテンプレート会話風吹き出しのテンプレートとして使えるCSSを作ってみました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL上に表示された文字を入力してください。スポンサードリンクスポンサードリンク記事を検索するプロフィールtipLogInkscapeやGIMP、WordPressなどの記事、ブログ運営についての記事をメインに書いています。2019年6月17日にInkscapeの本を出しました。シェイプピックアップ記事2016.06.14inkscapeの使い方を集めたスキルアップのため...2015.09.4GIMPで秋の行楽・旅行バナーを作りました。PluginClose。