スタイルシート | ホームページビルダー・グレート初心者講座

　スタイルシートについて

スタイルシートの簡単な説明です。

スタイルシートって何？各要素の修飾をどのようにするか記述するもので、ページ内に直接書く方法のほか、外部のスタイルシートに修飾部のみをまとめる事もできます。外部スタイルシートを利用すると、複数のページで同じ修飾を行なう事ができます。　スタイルシートの記述場所外部スタイルシート htmlページとは別にスタイルシートだけを保存する方法です。～.css のファイルとして保存され、複数のページで使いまわす事ができます。ビルダーからは　　を押して「外部スタイルシートの追加」から追加します。既にスタイルシートが追加されている場合は一覧に表示されます。 htmlファイルのヘッダで指定スタイルシートマネージャーでスタイルを追加するとヘッダで定義されます。 classなどで指定しておくとページ内で使いまわす事ができます。外部スタイルシートの定義と重複した場合はこちらのが優先されます。タグに直接指定右クリックから「スタイルの設定」でスタイルを指定すると、選択した要素のみ設定されます。タグに直接style属性が記述されるため使いまわしはできませんが、適用の優先度が最も高いので外部スタイルシートなどで指定されたスタイルを打ち消したりできます。　設定できる範囲スタイルの適用範囲です。タグ全体ページ内の同じタグ全てに適用されます。どのタグを指定しているかは、文字や表をマウスで左クリックすると、右上に「font」や「td」などと表示され、その状態でスタイルを設定すればそのタグに設定されます。現在のタグ選択しているタグのみにスタイルを適用します。例えばある部分のセルのみ適用したい場合などはこちらでスタイルを適用します。これ以外のスタイル指定方法の場合、ソース上部にスタイルが記述されますが、現在のタグのみ～で適用すると、その部分に直接スタイルが記述されます。ＩＤページ内で1つの要素だけに指定できます。ソースでは #sample と # に続けid名で指定されます。クラス複数箇所に同じ修飾を行ないたい場合に使用します。同じ装飾を行ないたい要素に同じクラスを指定します。 1つの要素に複数のクラスを指定する事も可能です。ソースでは .sample と . に続けclass名で指定されます。　スタイルが適用される優先順位順番が上スタイルが最も優先され、重複している場合は優先順位が高いものが適用されます。優先順位高↑ 1.　要素に直接 style="" で記述したスタイル 2.　HTMLファイルのヘッダに記述したスタイル 3.　外部ファイルで「リンク」に設定したスタイル 4.　外部ファイルで「インポート」に設定したスタイル 5.　ブラウザ設定のスタイルシート優先順位低↓ 　ブロックレベル要素とインライン要素ページ内には画像や表など様々な要素を配置できますが、これらにはブロック要素とインライン要素があります。スタイルは要素によって適用できるものと、できないものがあります。ブロックレベル要素は1行を占有するもので、表やレイアウトコンテナ（div）などです。まとまった塊として扱われ、前後が改行されるほか、positionを指定すると自由な位置に配置できます。改行せず並べて配置するには回り込み（float）を指定する必要があります。ブロックレベル要素の配置は相対的な位置のコンテナに画像などを重ねるなどをご参照下さい。インライン要素は並べて配置できる要素です。例えば画像やリンクなどがこの要素で、改行されず同じ行に配置されます。スタイルを指定したのに反映されない場合は、そのスタイルを適用できる要素なのか確認します。　設定してみる外部ファイルの簡単なスタイルを適用してみます。クラスを使い文字の色を設定する手順を説明します。１．　スタイルシートマネージャを立ち上げるスタイルシートを設定する時は　　を押すと、スタイルシートマネージャが出てきますので押してください。 2．スタイルシートの新規作成新規で外部スタイルシートを作る時は、「リンク」の右隣の下矢印を押して、「外部スタイル新規作成」を押し、作るスタイルシートの名前を決めます。そのままファイル名を決めて「OK」すると、意図しないフォルダに作成される場合がありますが、、「参照」からスタイルシートのファイルを保存したい場所に移動して、ファイル名を入力し、「開く」を押せば、指定したフォルダに作成されます。　ここではとりあえず「monmon」としておきます。また、挿入のタイプはデフォルトで「リンク」になっていますので、そのままにしておきましょう。「インポート」は優先順位が低く、また一部サポートされていないブラウザもあるので、「リンク」にするようにしましょう。これで「OK」を押せば新たにウィンドウが開き、外部スタイルシートの画面が開きます。 3. クラスを作る新しく開いたウィンドウの「追加」を押し、その中の「クラスのスタイルを設定」を選択、下に表示される .CLASS の「CLASS」の部分を消し、設定したい名前を付けます。　このとき . を消さないようにして下さい。ここではとりあえず「.mozi」としておきます。手順の説明としてクラスのスタイルで進めていますが、idやタグでも構いません。適用範囲は本ページの適用できる範囲でご確認下さい。 4. スタイルを指定する「カラーと背景」を選んで、その中の「前景色」を水色にしてみます。　この前景色が文字自体の色です。　ちなみに「背景色」は文字に設定すると、文字の書いてある背景だけに色が付き、表のセルに設定すると、セルの背景色を設定する事ができます。前景色に水色を設定したら「OK」をクリックします。これでスタイルシート「monmon」にクラス「mozi」が定義され、、クラス「mozi」のスタイルに「前景色水色」が設定されました。クラスは複数の要素に適用する事ができるため、上記のように定義したら、他の要素を右クリックし、定義済みスタイルで適用するクラスを選択するとその要素にも反映されます。備考：ソースを直接編集する場合は以下のようにします。対象要素にidやclassを付ける例えば <p> 要素であれば <p class="sample1"> などとします。 cssにスタイルを書くクラスに指定する場合は .sample1{ font-size:1.5em; color:#666666; } などと指定します。なお、ここでの .sample1 の部分は、対象要素を示すもので「セレクタ」と呼ばれます。クラスは複数の要素に適用させる事ができますが、特定のタグのクラスにだけ適用する場合は、以下のように絞り込む事ができます。 div.sample1{ color:#666666; } td.sample1{ color:#ffffff; } 上記の場合、divのsample1は文字色が #666666で、tdのsample1は文字色が #ffffff という具合です。上記はソースを直接編集する場合です。　同じスタイルを適用する先ほど作成したクラス「mozi」は使い回すことができます。他に設定したい部分があれば、同じようにその部分を選択し、スタイルの設定を選び、クラスに「mozi」を設定すれば同じスタイルになります。スタイルシートをクラスで指定する事の利点は、このように同じスタイルを適用したい部分に設定したクラスを指定するだけで、同じスタイルを適用する事ができるところです。これによりソースがスッキリし、ページのサイズも抑える事ができます。また、idやクラスを細かく振っておく事で、外部スタイルシートを編集するだけで全てのページに修正を適用するという事もできます。例：タイトル画像をコンテナの背景画像としておき、修正時は外部スタイルシートを編集するだけで全てのページのタイトル画像を変更できるなど。　指定が正しく反映されない場合は？適用できる要素か確認ブロックレベル要素、インライン要素、どちらかにしか適用できないスタイルもあります。例えば文字横方向の位置を決めるにはtext-align のプロパティで指定しますが、インライン要素にはこれらのプロパティは反映されません。文字列の配置を決めるには、ブロック要素（divなど）でその要素を囲い、ブロック要素で配置を指定します。スタイルが重複していないか確認複数の指定が重複している場合、スタイルが適用される優先順位のように優先度により上書きされたりします。外部スタイルシート側を編集したとしても、その要素に直接記述されている場合、そちらが優先されますので、外部スタイルシート側の設定は反映されません。重複して記述していないか確認してみましょう。 doctypeによる表示の違い HTMLソースのタブからソースの最上部を見ると以下のような行があります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> これによってブラウザは解釈の仕方を決定しますが、大きく分けで「互換モード」と「標準モード」があります。 ※ この「モード」はビルダーの編集モードの事ではありません。上記のdoctypeが標準だと思いますが、ブラウザは「互換モード」で表示します。互換モードは旧来の書き方や、若干間違った書き方でもそれなりに表示してくれるモードです。ビルダーで選択できるdoctypeとして以下のものがあります。旧来の書き方なども許容しながら「標準モード」で表示されるため自由度が高いです。ビルダー標準のモードから変更する際の注意点として、継承（囲んだ要素のプロパティが内部にも反映される）が正しく行なわれるため、中央揃えのデザインにしていた場合に内部の文字列などまで中央揃えになります。この場合は囲う要素か、その中の要素で左揃えを指定します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> もう一つ選択できるのが以下のdoctypeです。これは非常に厳密なdoctypeで旧来の書き方など、このdoctypeの定義に従っていない要素は一切使えないため、自由度の高いページ作成には適していません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd"> ビルダーでは「ツール」→「オプション」→「ファイル」からdoctypeを変更できますので、自分の作成したページに適したdoctypeを指定すると良いです。注意点として、ここでdoctypeを指定すると、次回別のファイルを開いた場合、そのファイルも設定したdoctypeに変更されます。全て同じdoctypeで作成していれば問題ありませんが、途中で変更した場合などは、編集時にプレビューで正しく表示されているか確認しておきましょう。