きょうは CSS について学びます。
ブログやホームページを見ると、タイトルや画像などが装飾されて表示されますね。
それが CSS です。このブログの h1 の背景は灰色ですが、さまざまな色をつけることができます。
なぜ、これらの色がつくのか不思議ですね。どうしてでしょうか？
きょうはあなたと、その CSS について学習します。
HTML と CSS は切っても切れないというか、たとえば恋人同士、夫婦のような関係があります。私は過去15年で1000記事以上書いてきました。現在は CMS で高性能のサイトが作れるようになりとまどっている三重県津市在住のそこそこ年取っている男性です。
１．CSS の概要
私が CSS に興味を持ったのは、HTML を始めた頃と同じです。
１．CSS と HTML はセットのようなもの
最初は、HTML の中に書いていましたが、ある要素のスタイルをちょっと変更したい時に便利でも、コードが複雑になり汚くなってしまうのでやめました。
head 要素内に style 要素を置き、その中に CSS を記述していく方法も試してみました。これは文書単位でスタイルを適用できますが、別ページに同じスタイルを適用したいと思う時使えません。
最後に落ち着いたのが CSS を外部ファイル化し、それを HTML から参照してスタイルを適用する方法です。
ファイル名に拡張子「.CSS」をつけて保存すればリンクにそって適用されるものです。どちらもテキストファイルだから可能なのです。
HTML の中に直接 CSS を書くこともできます。
<link rel="stylesheet" href="test.css">
<h1>これは見出しです</h1>
<p>こんにちは！</p>
この方法はほとんどの Web 制作で採用されている
１つの CSS ファイルをサイト内すべての HTMLに適用させたり、スタイルだけを変更したりできます。効率よくサイトが作れたり、メンテナンスが楽で、重宝したものです。
CSS ファイルは、それ自体で動作を確認することはできません。かならず HTML ファイルが必要です。なのでCSS を実際にHTML にあてはめてみて動作を確認します。
#container h2{
font-size: 26px;
background: #eaf3ff;
/*背景の色*/
border-top: dotted 2px #b3d4ff;
/*点線 線の色*/
border-bottom: dotted 2px #b3d4ff;
/*点線 線の色*/
}
h2 の背景が緑から薄青に変わりました。でも、元の色がいいので削除します。つぎにサイドバーの h3 をカスタマイズします。h2 と同系統の色がふさわしいので緑にします。
緑色に変わりました。「子テーマ」＝child を使うのは、せっかくこの画面で書きかえても、テーマの更新があると、上書きされて元にもどってしまうからです。現在は更に進化して、CMS では自動でできるようになっています。あまり楽すぎて当時の達成感のようなものを失った気がします。
これらの記述は必要に迫られない限り書くこともないのですが、スタイル定義を記述する場合、必ず半角にします。HTML5 では、コンテンツをセンタリングする<center>や、フォントの色、大きさ、種類を表す<font>などの装飾タグが廃止されました。いくらでも CSS で制御できるようになっています。
HTML では文書構造のみを定義して、スタイルは CSS で定義するようにします。
2．CSS のセレクタ、プロパティ、値
「h1」をセレクタ、どのスタイルについての記述が示す部分を「プリパティ名」、スタイルをどうするかを示す部分を「プロパティ値」と呼びます。
h1{
color:red;
font-size:16px;
border-bottm:1px solid blue;
margin: auto 30px;
}
「h1」要素のテキストの文字色を赤にして、フォントサイズを16px、「h1」のテキストの下に1px の直線を引いて、「h1」要素の左右に 30px のマージン領域を設定する、という４つの要素を指定しています。auto は、ブラウザ側で適切な余白を自動で決めてくれる値です。
「ｐ要素の文字色を青」。これを CSS で記述すると「p{color:blue;}」になります。」「どこ｛何を：どうする；）」の書式で表します。
- 「どこ」は「セレクタ」
- 「何を」は「プロパティ」
- 「どうする」を「値」といいます。
最後はセミコロンです。すべて半角スペースです。
プロパティの種類
- フォント関連文字のサイズ（font-size）
- 太さ（font-weight）
- スタイル（font-style）
- 種類（font-family）
- 行の高さ（line-height）
- 行揃い（text-align）
- 装飾（text-decoration）など。
色や背景
- 文字の色（color）
- 背景色（background-color）
- 背景画像（background-image）
テキスト
- 配置（左揃え、中央揃え、右揃え :text-align）
- 行の高さ（line-height）
リスト
- マーカーの種類（list-style-type）
- 表示位置（list-style-position）
テーブル
- セルのボーダーの表示（border-collapse）
- セルのボーダー間隔（border-spacing）
ボックス
- 要素の内容とボーダーの間隔（padding）
- 要素間の間隔（margin）
- ボーダー（border）
表示と配置
- 左右への回り込み（float）
- 配置方法（position）
※CSSでは、「/*」と「*/」で囲まれた範囲がコメントになって、メモ代わりに使えます。
なお、CSS には、後で書かれたものが優先されます。
3．CSS で自分好みのリンクボタンを作ってみる
ボタンに割り当てるクラスを決めて HTML に書いてみます。リンク先は一応「＃」としておきます。
html の方には
<a href="#" class="btn1">
リンクボタン
</a>
CSS の方には
a.btn1 {
display:block;
background: #d32a57;
color:white;
font-size:16px;
padding:15px 30px;
maragin:30px auto;
text-aligin:center;
width:-webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 150px;
}
２．CSS を HTML に適用するには３種類ではない
CSS を HTML に適用する方法は3つではありません。
１．HTML に CSS を適用する方法は1つだけ
さまざまな方法でそれを実現
インラインスタイル
HTMLタグ内に直接スタイル属性を記述して、スタイルを適用する方法です。例：css <p style=”color: red;”>赤いテキスト</p>
内部スタイルシート
<style>タグを使用して、HTMLファイル内にスタイルシートを記述する方法です。
例：php<!DOCTYPE html> <html> <head> <title>内部スタイルシートの例</title> <style> p { color: red; } </style> </head> <body> <p>赤いテキスト</p> </body> </html>
外部スタイルシート
別のCSSファイルを作成し、<link>タグを使用してHTMLファイルにリンクする方法です。例：php<!DOCTYPE html> <html> <head> <title>外部スタイルシートの例</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <p>赤いテキスト</p> </body> </html>
これらの方法はすべて有効な方法であり、どの方法を使用するかはプロジェクトの要件や好みによって異なります。
- HTML のタグの中に直接、style 属性を記述する方法です。便利ではありますが、スタイルを検証する程度にしておいた方がいいです。
- head 要素内に記述していく方法です。文書単位でスタイルを適用できますが、別のページには関係ないので、これも使い分けが必要です。
- CSS を外部ファイル化する方法です。
外部スタイルシートも HTML と同じテキスト・ファイルなので、拡張子「.css」を付けて保存します。<link rel=”stylesheet” href=”style.css”>と、href 属性で読み込む外部ファイルのパスを指定します。
外部ファイル化することで、１つの CSS ファイルをサイト内すべての HTML に適用させたり、スタイルだけを変更させたりできるのでとても便利です。
CSS ファイルを外へ出して一本化したほうがスッキリするわね。
３．CSS のセレクタの種類
CSSのセレクタにはいくつかの種類があります。
これらは一般的なCSSのセレクタの種類の一部ですが、他にも様々なセレクタがあります。セレクタを組み合わせることでより複雑な選択条件を指定することも可能です。
１．セレクタとは、CSSで要素を選択するために使用される構文
代表的なセレクタの種類
タイプセレクタ（Type Selector）
HTML要素名で選択するセレクタです。例えば、h1、p、divなどがあります。
クラスセレクタ（Class Selector）
「.」を付けてクラス名で選択するセレクタです。例えば、.header、.containerなどがあります。
IDセレクタ（ID Selector）
「#」を付けてID名で選択するセレクタです。例えば、#header、#contentなどがあります。
属性セレクタ（Attribute Selector）
属性名で選択するセレクタです。例えば、[type=”text”]、[href^=”https://”]などがあります。
子孫セレクタ（Descendant Selector）
スペースで区切って要素を選択するセレクタです。例えば、div p、ul liなどがあります。
直接子セレクタ（Child Selector）
「>」を使って直接の子要素を選択するセレクタです。例えば、ul > liなどがあります。
兄弟セレクタ（Sibling Selector）
「+」を使って同じ階層の直後の兄弟要素を選択するセレクタです。例えば、h1 + pなどがあります。
疑似クラスセレクタ（Pseudo-Class Selector）
要素の状態に応じて選択するセレクタです。例えば、:hover、:active、:first-childなどがあります。
疑似要素セレクタ（Pseudo-Element Selector）
要素の一部分を選択するセレクタです。例えば、::before、::afterなどがあります。
なお、これら以外にもさまざまなセレクタがありますが、上記のセレクタは代表的なものです。
タイプセレクタ
p {color:blue;} すべての p 要素がスタイルの適用範囲となり、文字色が青になります。
ID セレクタ
「ID 属性で指定した ID 名を持つ要素」に対してスタイルを適用させます。書式は「#（シャープ）+ ID 名」です。複数ある要素の中から特定の1要素だけにスタイルを適用させたい時に指定します。
例えば、<p id=”red”>と ID をつけておけば、「#red」という ID セレクタを使ってスタイルを適用できます。
<p color:blue;>
#red{color:red;}
<p id=”red”>おはよう</p>
<p>おはよう</p>
すると、ブラウザに次のように表示されます。
おはよう
おはよう
クラスセレクタ
書式は「.（ピリオド）+クラス名」です。ID 名と違って複数の要素に指定できるので、同じクラス名を付けて要素をグループ化することができます。
p {color:blue;}
#red {color:red;}
.highlight {background-color:yellow;}
<p ID=”red” class=”highlight”
>
おはよう</p>
<p
class=”highlight”>おはよう
</p>
<p>おはよう
</p>
ブラウザで表示すると
おはよう
おはよう
おはよう
クラスセレクタ
.blue {color:blue;}
.highlight {background-color:yellow;}
class 属性に複数の値を指定
<p class=”blue”>文字色が青です</p>
<p class=”highlight”>背景色が黄色です</p>
<p class=”blue highlight”>文字色が青で背景色が黄色です</p>
ブラウザで表示すると
文字色が青です
背景色が黄色です
文字色が青で背景色が黄色です
子セレクタ
「section>p」と大なり記号 > で区切って指定します。
section>p{color:blue;}
section の子の p 要素
lt;section>
<h1>見出し</h1>
<p>sectionの子のp 要素</p>
<div>
<p>section の孫の p 要素</p>
</div>
</section>
<p>sectionの兄弟のp 要素</p>
４．CSS のスタイルの継承と競合
CSSは、HTMLやXMLなどのマークアップ言語で書かれた文書の見た目やレイアウトを指定するためのスタイルシート言語です。
CSS（Cascading Style Sheets）は、Webページの要素（テキスト、画像、ボタンなど）の色、サイズ、位置、フォントなどの外見を指定することができます。
つまり要素とスタイルの間の関連付けを行います。HTML文書内の要素に対して、CSSスタイルを適用するためには、要素に一意の識別子（ID）、クラス名、または要素名を使用して、CSSルールを指定します。CSSルールは、セレクタ（要素を選択するための指定方法）と宣言（要素に適用されるスタイルのプロパティと値のペア）から構成されます。
例えば、次のCSSルールは、HTMLのヘッダ要素（<h1>）に赤い色（color: red;）と太字（font-weight: bold;）のスタイルを適用するものです。
このようにCSSを使用することで、Webページのスタイルやデザインを一元管理することができ、見た目の統一感や柔軟性を向上させることができます。
１．スタイルの継承と競合には
継承（Inheritance）
スタイルが親要素から子要素に継承される場合、親要素で指定されたスタイルが子要素にも適用されます。これにより、スタイルの再利用性が高まり、コードの記述量を減らすことができます。
上書き（Overriding）
同じプロパティを持つスタイルが複数存在する場合、後に指定されたスタイルが優先されます。これは、同じ要素に対して異なるスタイルを適用するために利用されます。
一元化（Specificity）
スタイルを適用する際に、CSSの詳細度（Specificity）が競合することがあります。詳細度が高いスタイルが優先されます。詳細度は、セレクタの種類、IDセレクタ、クラス・属性・疑似クラスセレクタ、およびインラインスタイルの順に優先度が高くなります。
カスケード（Cascade）
複数のスタイルが同じ要素に適用される場合、カスケードルールに従って優先度が決定されます。カスケードルールは、スタイルの指定順序、詳細度、および重要度によって優先度を付けます。
これらの要素は、CSSでスタイルを指定する際に考慮する必要があります。特に、詳細度とカスケードルールは、スタイルの競合を回避するために注意深く制御する必要があります。
親要素に指定したプロパティ値が子要素へと引き継がれる仕組みのことです。
例えば、body 要素に文字色青を適用すると、子要素の h1 要素や p 要素にもそのスタイルが適用されて青文字になります。
body{ color:blue; }
<body>
<h1>スタイルの継承</h1>
<p>color プロパティは子要素に継承されます</p>
</body>
２．スタイルの継承
color プロパティは子要素に継承されます
h1、p にそれぞれ記述しなくても同じスタイルが適用されます。
読んでいるだけでは、なかなか頭に入ってこないかもしれません。コードを一つひとつ確認しながら習得していってください。
例えば、余白や文字サイズなどはいくらでも CSS で調整できます。むやみに<br/>を多用したり、<h1>などの文字を小さくするために<p>を使うなどはやめましょう。
「プログラミングを早く習得したい！」「独学ではだらけてしまう・・・」という方には、オンラインで学べるスクールという考え方もあります。
無料で試すことができるのでおすすめします。
３．Google Chrom を右クリックでデベロッパーツール
なお、Chrom を右クリック「検証」を押すと、その要素を選択した状態でデベロッパーツールを開いてくれます。
Chromのデベロッパーツールは、Google Chromeブラウザ内に統合された開発者向けのツールセットです。これは、Web開発者がWebサイトやWebアプリケーションの開発、デバッグ、および最適化を支援するために使用できます。
デベロッパーツールの機能
Elementsパネル
HTMLおよびCSSを視覚的に表示し、DOMツリーの操作、スタイルの編集、およびデバッグを行うための機能を提供します。
Consoleパネル
JavaScriptコードの実行、エラーのデバッグ、およびWeb APIのテストに使用できます。
Networkパネル
ネットワークリクエストの監視、レスポンス時間の測定、およびリソースの最適化に使用できます。
Sourcesパネル
JavaScript、CSS、およびHTMLのデバッグ、およびデバッグ用のブレークポイントの設定に使用できます。
Performanceパネル
WebサイトやWebアプリケーションのパフォーマンスを評価し、ボトルネックを特定するための機能を提供します。
デベロッパーツールは、Web開発者にとって非常に役立つツールであり、WebサイトやWebアプリケーションの開発、デバッグ、および最適化を容易にします。
CSS（Cascading Style Sheets）でページのデザインを一括管理
CSSはHTML文書にスタイルやレイアウトの情報を追加するためのスタイルシート言語です。
Webサイト内の複数のページで共有するスタイルやレイアウトを一箇所で管理できる。
スタイルシートを別ファイルとして作成し、HTMLページにリンクすることで、全てのページで同じスタイルが適用されます。これにより、スタイルの変更や修正が簡単になり、一貫性のあるデザインを保つことができます。
セレクタとスタイルルールの組み合わせによって、要素や要素のグループにスタイルを適用
セレクタはHTML要素やクラス、IDなどを指定し、ルールはそのセレクタに適用するスタイルの定義です。この仕組みを活用することで、特定の要素や要素のグループに対して一括でスタイルを適用することができます。
「カスケード」と「継承」の概念により、より柔軟なスタイルの適用が可能
カスケードでは、複数のスタイルルールが競合した場合に優先順位に従って適用されます。また、継承では親要素のスタイルが子要素にも継承されるため、効率的にスタイルを適用できます。
スタイルをクラスやIDに割り当てることができる
これにより、同じスタイルを複数の要素で再利用したり、特定の要素に特定のスタイルを適用したりすることができます。また、スタイルの変更や修正が必要な場合も、スタイルシート内の該当箇所を修正するだけで済むため、メンテナンスが容易です。
以上のような特徴を持つCSSを使用することで、Webサイトのデザインを一元管理し、一貫性のあるスタイルを実現することができます。
CSS を使うとサイトのデザインを一元管理できるのね。
４．CSSでページのデザインをまとめて管理する
HTMLファイル内の <link> 要素を使用して外部スタイルシートを読み込むことができます。
- 外部スタイルシートの使用: デザインに関するCSSコードを外部のスタイルシートファイルにまとめ、各HTMLファイルから参照します。これにより、デザインの変更が必要な場合にはスタイルシートファイルのみを編集すればよくなります。
- スタイルセクションの使用: HTMLファイル内に<style>タグを使用してCSSコードを直接記述する方法です。この方法では、各HTMLファイルごとにスタイルセクションを追加することができます。ただし、スタイルの再利用性や管理性は外部スタイルシートほど高くありません。
- CSSプリプロセッサの使用: CSSプリプロセッサ（例: Sass、Less、Stylus）を使用すると、変数、ミックスイン、ネストなどの機能を使用してCSSを効率的に管理できます。プリプロセッサを使用すると、より柔軟でメンテナンス性の高いCSSを作成できます。プリプロセッサの文法に従ってCSSコードを記述し、コンパイルして純粋なCSSファイルを生成します。
これらの方法を使用することで、CSSの管理とメンテナンスが容易になります。どの方法が最適かは、プロジェクトの要件や規模によって異なる場合があります。
外部スタイルシートがいいわね。
あとがき
CSS は文字サイズや背景色など Web ページのデザインを設定するときに記述するスタイルシート言語の１つです。CSS を記述すると、Web サイト内のページのデザインをまとめて管理できます。サイト内のデザインを統一することができ、デザインの変更も簡単です。
CSS について、悩みや疑問がありましたらご自由にコメント欄に投稿してください。（コメント欄はこの記事の最下部です）。いただいたコメントはすべて拝見し、真剣に回答させていただきます。
コメント