だれでもWEBマスター

だれでもHTML＊スタイルシート編

□HTMLで作るホームページ・続編です。
□スタイルシートを知っておこう

準 備
■スタイルシートって？
■ソースコードを見てみよう
■スタイルシートを見てみよう
■スタイルシートを書こう
制 作
■HEADに書くCSS
■HTMLタグに書くCSS
■別ファイルに書くCSS
■ブラウザでチェックしよう
活 用
■余白のCSS
■
HTMLタグで作るホームページ
だれでもHTML/スタイルシート編




■スタイルシートってなんだろう？

スタイルシート、CSS（Cascading Style Sheets)、いわゆるWEBページの「スタイル」、ブラウザに表示されるHTMLページに、レイアウトなどデザインについて記述することができます。
複数のスタイルシートを一括して、ファイルにすることもできます。
拡張子は　.css でファイル保存します。
スタイルシートで、ページ全体のレイアウト設定を決めることも、部分的に(1文字、1行、段落ごと）でも異なる装飾をすることもできます。 スタイルを設定したいHTMLタグの要素に対して、スタイルシートのコードをまとめて記述しておきます。スタイルは、気分で都度追加変更することもできますし、あとで消すこともできます。
Microsoft Wordの「スタイル」メニューの機能のように、フォントとサイズ、文字色などの書式設定をセットにして好みのスタイルのパターンを選んだり、作成したりできますが、スタイルシートも同じように、テキストの様々な書式をいっぺんに設定したり、ページレイアウトや背景色などを自在に記述することができます。ですが、 書式設定やレイアウトなら、HTMLの中でFONTタグや配置のALIGNタグ、背景色のBGCOLORなどもありました。わざわざスタイルシートで書かなくても充分ではないかと思われると思います。 WORDやEXCELにもツールバーの様々な書式設定ボタンで、基本的な書式設定やレイアウトは大概完成します。シンプルな書式はビジネス文書でもWEBでもとても効果的です。ですが、WEBページなど1箇所に複数の設定ができるなら、まとめたり組み合わせたり、また別のページと同じスタイルを共有したり、また正確なサイズや配置を数値で設定できたりして、スタイルシートの記述の方が簡潔になる場合も出てきます。スタイルシートがメリットとなるデザインになると、スタイルシートが優先されるようになってくると思います。

ＢＡＣＫ


■ソースコードを見てみよう

ブラウザでソースコードを見る方法です。ブラウザの画面上で右クリック ＞「ページのソースを表示」
どんなWEBページでも、HTMLタグが読めます。 気になる部分や気に入ったソースコードをコピーして、各自のHTMLに使用することもできます。 ブラウザで表示されるソースは、ページ全体で、コンテンツの部分がところどころで読めるという程、ソースコードがたくさん書かれています。文字が細かすぎるので、画面を拡大すると読みやすくなります。(元のページに戻ると、とても大きな文字になっているかもしれません）
ブラウザの「検索」機能で、 本文のキーワードやHTMLタグを検索すると、普通に見ているページがどの辺りで、どのように書かれているのか、見当がつくと思います。
カッコいいデザインのページや、見やすいレイアウトをお手本に真似してみたいお気に入りページを探して、どのようなスタイルシートが設定されているのか、ソースコードから参照することができます。
ページの見出しや本文の文中に見栄えの良い気になる部分があったら、マウスで範囲選択、コピーして、さきほどの「ページのソースを表示」のタブ内を検索します。どのような装飾がされているか、スタイルシートの記述が見られるかもしれません。HTMLタグなら、
HEAD　BODY　
H1　H2　
P　ALIGN
FONT
HR
IMG SRC
A HREF
などのタグを検索することができると思います。また
OL LI(リストタグ）
TABLE TR TD （テーブルタグ）
なども、よく使われます。これらの各タグが、スタイルシートでは「セレクタ」と呼ばれ、スタイルを設定する要素の部分に当たります。スタイルシートについて手掛かりとなるキーワードは、.css
style
id
class
などが挙げられると思います。それから、
リンクの a もセレクタの種類です。
a: link（リンク先未訪問） と　a: visit(訪問済み）の文字色をスタイルシートで同じ色にすることも、 a: hover （文字の上にマウスをのせた時）スタイルシートで文字色を変えたり、HTMLでリンク設定すると出る下線をスタイルシートで消したり、マウスをのせた時に文字色が変わって下線が出る、などという動的で視覚的な効果のある設定ができます。例えばテキスト（文字）に書式を設定する場合、タグと同様のfontを使います。HTMLタグでは大文字(FONT）小文字(font）いずれでも区別されませんが、スタイルシートの属性（プロパティ）で記述する場合は、小文字(font)になります。 font-size
font-familiy
font-style
font-weight
color
文字色は、HTMLではFONT COLOR　ですが、スタイルシートではプロパティが　color で記述してあれば文字色のことです。text
list
line
width
height

ＢＡＣＫ



■ スタイルシートを見てみよう

スタイルシートの記述のやり方は色々あります。よく見かけるのは｛波括弧｝で記述されていたり、あるいはHTMLに直接 style=” ” などと部分的に記述してあったりします。
それから、タグ内で　id=” ” class=” “ などと見られるのもスタイルシートです。 各部分に凝った書式設定などを何行も記述して、各スタイルシートに名前を付けておいて、スタイルの範囲に id名、class名 で設定します。ただし、設定したい各スタイルが被ってしまうと、思い通りに表示されなかったりします。
ＢＡＣＫ


■ スタイルシートを書こう

それでは、HTMLの見出し を目立たせるスタイルシートを書いてみます。
たとえば、見出し にインパクトをつけて目立たせる。
<H1> CSS見出し1　</H1>

H1 { color: blue; background-color:skyblue;}

見出し１の 文字色は 青；　背景色は 空色；　です。　


<H2> CSS見出し2 </H2>
このように記述すると、どこかで見たことがあるかもしれません。

H2 { color: blue;
background-color:skyblue;
}

見出し２の 文字色は オレンジ色；　背景色は 黄色；　です。　

色の種類を変更すると、文字色、背景色を変えることができます。
RGBカラーコード(#000000; 黒、#ffffff; 白　など）を使えば、様々な色を表現することができます。｛波括弧｝ でページ内に記述されるスタイルシートは、<HEAD>　</HEAD> の部分に書かれていることが多いですが、WEBシステムなどで、BODYの上部に追加で書かれているのを見ることがあります。ブラウザで表示や動作していれば問題ないと思います。<p> は段落のタグですが　H1,H2 のような見出しのタグと同様に、<p> に直接スタイルシートを設定することができます。<p></p> で囲まれていれば、すべて同じスタイルにすることができます。 ですが、各段落に異なるスタイルを設定したい場合は、クラス名でスタイルシートを記述して、 <p> に各設定をします。
<p   class=” “> </p><div> なども<p> と同様です。
<div   class=” “> </div>
<span   class=” “> </span>
HTMLタグに直接スタイルシートを記述することもできます。<H1 style=”color: blue; background-color:skyblue;” >はじめてのホームぺージ</H1><H2 style=”color: blue;” >日記2022</H2><H2 style=”color: blue;” >プロフィール</H2>はじめてのホームページ日記2022プロフィール

ＢＡＣＫ


■ HEADに書くスタイルシート

<HEAD> </HEAD> の中にスタイルシートを記述する場合です。スタイルシートは、 <style> </style> で囲みます。<HEAD>

<style>

H1{ color: blue;
       background-color:skyblue;
}

p { font-family: sans-serif;
      font-size: 1em;
}

.test { font-size: large ;
          color: red ;
}

</style>
</HEAD>などです。
かつては<HEAD> </HEAD>に、 <style type=”text/css”>　</style> と記述しなければなりませんでしたが、こちらが正規とか正式、略式という流儀などではなく、HTML5が通用するブラウザなら、シンプルに、styleタグと呼ばれる記述　<style> </style> がスタイルシートです。セレクタ｛　プロパティ：　プロパティの値；　｝波括弧　｛　｝の中は　：（コロン）で区切り、スタイルごとの文末は；（セミコロン）で区切ります。
改行して、次のスタイルを並べて記述します。
波括弧を1行で書くこともできますが、スタイルを追加・削除したい場合に、行を追加・削除するだけなので、波括弧を改行しているのだと思います。設定中のスタイルも一覧で見やすい記述になっていると思います。
スタイルシートの記述は、セレクタと波括弧、プロパティ、コロンやセミコロンの記号は、半角スペースが何文字分か間隔が空いていても問題ないことが多いです。ただし、スタイルシートの記号などが抜けていると、スタイルを設定したい範囲が崩れてしまうことがあります。スタイルシートの文末のセミコロン記号が漏れていないか、など確認が必要です。セレクタがHTMLタグで要素をあらわす場合、タイプセレクタ（要素セレクタ）と呼ばれます。セレクタの1文字目　 .(ドット）は、クラスの記述で、クラスセレクタ とです。
.(ドット）のあとに クラス名を付けます。　
スタイルに適当に好きな名前を付けておきます。タグとまったく同じ文字列は使用しないようにします。
それから、<BODY>に書かれたタグに、設定したいスタイルを記述します。 .test は クラス名が test で、タグ内で class に対応します。 たとえば、<div>　</div> で囲まれた部分に文字の書式を設定したい場合、
<div class=”test”> のように記述すると、.test のスタイルが適用されています。

ＢＡＣＫ


■ HTMLに書くスタイルシート

先ほどのサンプル例を再掲して説明します。
<H1 style=”color: blue; background-color:skyblue;”>はじめてのホームページ</H1> セレクタが要素なので、H1タグに　style=” ” とタグに追記します。 スタイルは複数、並列して記述して構いません。ですが、style= のあとに囲む“”（ダブルクォーテーション）、スタイル記述の：（コロン）や：（セミコロン）など、記号1文字でも入力が漏れると、スタイルシートが適用されないばかりか、設定した範囲が崩れてしまうことがあります。プレビューして思い通りのスタイルになっていない場合は、細かい部分までスタイルシートの入力を確認する必要があります。メインで、HEAD 部分にスタイルシートを記述してあっても、追加でタグに style= と書いても大丈夫です。

p や div などでは、段落や囲まれた部分によって１つのデザインでおさまるとは限りません。HEAD にまとめて記述したスタイルに、箇所によって都度、スタイルを追加するのも効果的です。また、クラスセレクタを作成して、クラス名ごとの設定で部分的にデザインを変えて、印象的なWEBページにすることも可能です。通常のテキストを太字や下線付きに設定して、思い通りにならない場合は、最初に設定したスタイルと、あとから追加したスタイルのどちらか優先される方が適用されると思います。どちらも表示されなかった場合は、スタイルシートを見直さなければなりません。部分的に追加したデザインの影響で、全体的に見栄えが変わってしまうこともあるかもしれません。
ただし、H1　はトップ見出しなので１ページに1箇所のみ、またH2 H3 はWEBサイトを通じてデザインを固定しておく方が見栄えが整って上手に見えると思います。

ＢＡＣＫ

■ 別ファイルに書くスタイルシート

スタイルシートに馴れてきて、設定したい箇所が増えてくると、HEAD 内に記述が長くなってしまいます。
スタイルシートをメモ帳エディタにまとめて記述して .css で保存します。
.htmlファイルからリンクすることで、記述した各スタイルを設定できます。
<head></head> で囲んだ範囲に、以下のように書きます。
<title></title> の下側の方が適当だと思います。
(ファイル名は　 style_1.css とします。)
<link rel=”stylesheet” href=”style_1.css”>

あるいは
<link  href=”style_1.css”　rel=”stylesheet” >
これでもよいみたいです。各ページから style_1.css にリンクすれば、どのページにも同様のスタイルを設定できるし、 同じHEAD のところに、 <link rel=”stylesheet” href=”style_2.css”>
<link rel=”stylesheet” href=”style_3.css”>

別ファイルに記述したスタイルシートも追加できます。
ページごとに、どの CSSファイルをリンクしても(しなくても）問題ありません。

また、たとえば class名で書いたスタイルシートは、BODY 内のタグに class=”クラス名”を記述しなければなりませんので、CSSファイルに書かれたのすべてのスタイルを設定しなければならない、ということもありません。
事前にスタイルを書いてあっても、実際は設定されないスタイルがあっても構いません。
また、同じクラス名のスタイルを設定を変更したり、あとからクラス名を追加して別のスタイルを作成しても全く問題ありません。
ここで、前述の「セレクタ」について追記しなければなりません。
H1 などタグにスタイルシートを適用するセレクタと、
先頭に .(ドット）を付けてクラス名で書くクラス・セレクタを説明しました。

さらに、先頭に #(ハッシュマーク/ シャープ記号）とID名を付ける、IDセレクタ があります。

#sample { color: #000; }

クラス・セレクタと同様に、BODY の中のタグに
id=”sample” のように書きます。

class=”クラス名”　はページの中で何度でも設定できます。
<p> や　<div> <span> などに、同じクラス名のスタイルを各部分に書いて、同じスタイルを設定することができます。
id=”ID名”　のIDセレクタは、１ページの中で1度しか使えません。ページ全体のスタイルにしたい場合に、ID名を付けるとよいと思います。
これは、body や table tr td h1 h2 などセレクタ要素に記述するスタイルシートの役割と同様だと思います。1ページに書かれたスタイルで、ページ全体のセレクタ要素を設定しますので、追加などはできますが、複数のスタイルが設定されていると、どちらか一方が表示される場合や、いずれのスタイルシートも効かない場合があります。

ＢＡＣＫ


■ブラウザでチェックしてみよう

上書き保存したHTMLファイルは、作成中でもブラウザで随時チェックをするようにします。
いつも使っているブラウザだけでなく、一般によく使われているMicrosoftEdgeやGoogleChome、Safari、FireFoxなど、PCにインストールされている別のブラウザからも閲覧を試してみるとよいと思います。 ファイルの場所がOneDriveやGoogleドライブなどクラウド上なら、スマホやタブレット端末からもファイルを確認することができると思います。Android端末、iPhoneなど手持ちがあれば色々なブラウザ環境から確認してみましょう。

ＢＡＣＫ


■ 余白のCSS

なぜスタイルシートを学んだ方がよいのか、
それは、タグに記述する書式設定だけでは、おおまかなページ作成ができますが、自在なページレイアウト・デザインに及びません。スタイルシートを用いないと、実現できない部分があるからです。 その一例が、余白の設定です。たとえば、alignタグで見出しや本文の各段落を左揃え、中央揃え、右揃えに配置しますが、左端の位置は左端に固定されます。
スタイルシートでは、margin や padding などを設定することで見出しや本文の書き出し位置、インデントのような字下げの位置を、デザインすることができます。

ＢＡＣＫ