CSSとは何か？
CSSとは、Cascading Style Sheetsの略で、文字の大きさや字体(フォント)、画像の大きさなどの見た目を制御するプログラムです。CSSコードではページのレイアウトや色、フォントなど、ページのスタイル(デザイン)を指定します。HTML はページの基礎であり、CSS はその美的な指定と考えてください。
CSSの指定方法
CSS は HTML 要素と相互作用することで、ウェブページのデザインを制御します。要素とはHTMLにおける文書の概念です。HTML要素は下記の６つがよくつかわれます。
<archive> １Pに含まれるコンテンツ全体
<p> 段落
<div> 文字画像等を入れる箱
<span> 意味はない段落の中の文字の一定部分を区切る入れ物
<h1>～<h6> 見出し
<img>画像です
下記のようにタグでコンテンツを囲います。
<p>これが段落です!</p>
この段落を、ウェブブラウザでウェブページを見ている人にピンク色と太字で表示させたい場合は、次のような CSS コードを使用します。
p { color:pink; font-weight:bold; }
この場合、「p」（段落）はCSSにおける「セレクタ」と呼ばれ、どの HTML 要素に CSS スタイリングを適用するかを指定する 部分です。
中括弧の間の情報は宣言と呼ばれ、セレクタに適用されるスタイルの種別と値が含まれています。
種別とはフォントサイズ、色、余白などのことで、値とは設定内容です。
上の例では、”color” と “font-weight” は両方とも種別で、”pink” と “bold” は値です。
文字色を赤にする事もできます。
p { color:red; }
※HTMLの色は＃ｘｘｘｘという16進数での特殊な指定方法も可能です。
クラスとID
CSSスタイルを指定する際に、クラスかIDを選択する場合が多いかと思います。
クラスは下記のように指定され、ページの中に同じ名称のクラスが複数あってもかまいません。
<p class="myparagraph"></p>
IDは下記のように指定され、ページの中に同じ名称のIDは一つだけにするのが正しい書式です。
<p id="myparagraph"></p>
上記要素に文字色を指定するには下記のようなCSSになります。
※クラスの場合
.myparagraph{ color:red; }
※IDの場合
#myparagraph{ color:red; }
外部CSS、内部CSS、インラインCSS
CSSの指定方法は外部CSS、内部CSS、インラインCSSの３つがございます。
・外部にCSSを置いておいて読み込まれる場合は下記のようにします。
<head> <link rel="stylesheet" type="text/css" href="外部スタイルシートのURL.css">。 </head> </head>
・内部スタイルシートとは、特定の .html ページのヘッダーに直接記述された CSSのことです。内部スタイルシートは次のようになります。
<head>
<style>
Body { background-color:black; }
P { font-size:20px; color:red; }
</style>
</head>
このhtml ページには、黒い背景色と、20 ポイントの赤のフォントを使用した段落が適用されます。
・インラインスタイルは、HTMLコードに直接記述されたCSSの部品です。例えば、以下のようになります。
<h1 style="font-size:40px;color:violet;">この見出しにスタイルが直接適応されます！</h1>
一般的に、ウェブサイトにCSSを実装するには、外部スタイルシートが最も効率的な方法ですが、個別にスタイルを変更する必要がある場合は、内部スタイルシートとインラインスタイルをケースバイケースで使用することができます。
\ 他社の制作したワードプレスサイトもOK ! /
ワードプレスの制作・復旧・修正・カスタマイズのご相談・ご依頼はこちらから
コメントを投稿する