第7回ホームページ作成講習会

準備

注意事項

CSSの呼び出し方法

今までは、style要素をhead要素内に挿入することによってCSSを使ってきました。

しかしながら、その手法だと問題点がいくつかあり、同じデザインの複数のHTML文書を作成する際すべての文書にstyle要素を追加して一々CSSを書かなければならない点、そもそも、style要素をコメントアウトすること自体が(慣習化はしているものの)規約上は誤りである点が代表的なものとして挙げられます。

ではでは、ここで新しい手法を2つ学習します。

CSSの呼び出し方法

style属性を使用する手法

style属性(style要素じゃないよ)を使うことで、各々の要素にプロパティを割り振ることが出来ます。

荒巻大輔
複数のプロパティも指定可能

style属性内では、プロパティと値(今更ですが、これらをまとめて「宣言」と呼びます)のみを記述し、セレクタは記述しません。要素自体の属性値でスタイルシートを定義しているのだから、態々セレクタを書く必要はないですもんね。

この方法は、サイト内の他の箇所では絶対に使わない装飾(デザイン)だから、一々クラスとかid割り振るのは無駄だなぁ、って時に使います。

CSSの呼び出し方法

外部CSSファイルを適用する手法

第三の方法を使うために、ここで新しいお約束を使おうと思います。

CSSの呼び出し方法

外部CSSファイルを適用する手法

このお約束では、style要素が削除され、代わりに8行目でlink要素を追加しています。

このlink要素は属性によって様々な働きをするのですが、ここでは外部ファイルに記述されたCSSを読み込んでいます

では、外部CSSファイルを作成してみましょう。メモ帳でもCrescent Eveでもなんでもいいので、「style.css」という名前のファイルを作成し、次のスライドのような形式でCSSを書き込んでみましょう。(Crescent Eveでは右上の∨をクリックしてモードをCSSにしておくこと。)

CSSの呼び出し方法

外部CSSファイルを適用する手法

style.css

1行目に変なのがありますが、2行目以降は前回前々回のstyle要素で扱ったCSSのコメントアウトのない版です。

@charset外部スタイルシートファイルの文字コードを指定する。普通、HTMLと同じ文字コードにする。当然ながらファイル自体の文字コードもこれに合わせること。
記述しなくてもおkだが、まあ文字化け防止って意味では記述した方が安全。

なお、例では1行目の記述は省略します。

CSSの呼び出し方法

外部CSSファイルを適用する手法

ファイルを置く場所についてですが、別にどこでもいいのですが、一般的にはhtmlファイルのあるディレクトリに「css」とか「style」とかいうディレクトリを作成して、その中にファイルをぶっ込むのが一般的です。本講習会では、cssというディレクトリの中にぶち込むことにします。link要素の中のhref属性名の属性値にはそれに合わせてパス(絶対でも相対でもおkですが、普通は相対パスを使う)を記述します。パスがよく分からない人はこの辺見て思い出して下さい。今回は「href="css/style.css"」ですね。

ちなみに、ファイル名の命名規則はHTMLと同じで、半角英数字(大文字も使えるがややこしいので原則使用しない)で記述します。複数のHTML文書から呼び出す共通CSSファイルを作成したい場合、ファイル名は「style.css」とか「layout.css」とか「default.css」とかするのが一般的です。

.html
┣「css」
┗「img」

CSSの呼び出し方法

外部CSSファイルを適用する手法

外部CSSファイルが正常に読み込まれているか、適当にCSSと本文を書いて調べてみてください。

以上3つのCSSの適用方法を学習しましたが、この外部ファイルを呼び出す手法が最も製作者の間では好まれ、なおかつ規約的に誤りのない手法になります。(CSS非対応のブラウザはlinkタグをガン無視するのでstyle要素と違って変な表示はありません。)

もちろん、特定のHTML文書でのみ適用したいスタイルがある場合はstyle要素、ページ内の一箇所で局所的にスタイルを適用したい場合はstyle属性を使用してスタイルを適用します。まあ、要は臨機応変にやれってことです。

CSSによる背景指定

前々回、前回共に基礎ばかりでいい加減飽きてしまいそうなので、そろそろ新しいプロパティをやっていこうと思います。(ちなみに、これだけ長々説明してもまだCSSの基礎を網羅してません……。CSSって難しいですね)

前々回ぐらいに、background-colorプロパティで背景色を指定しました。CSSでは、背景色だけでなく背景画像を使って背景を指定することが出来ます。

background-image背景画像を指定する。値にはnone(表示しない、初期値)と画像を表示する際に使うurl関数を用いた値がある。

CSSによる背景指定

url()関数

CSSでURL(URI)を指定するにはurl()関数を使う。
※urlのあとの「()」は、某巨大掲示板()で使われてる(笑)的な意味ではないです。勘違いしないように

例えば、abc.jpgを示すには、

と、HTMLの属性値と同じようにいくつかの方法があり、一番上のダブルクオーテーションで括る書き方が一般的ですし見やすいです。このurl関数の中身は相対パスでも絶対パスでもおk。

ただし、このurl関数内のパスに相対パスを使う際はHTML文書自体からの相対パスではなく、CSSファイル自体からの相対パスを記述すること。(次スライド)

CSSによる背景指定

background-imageプロパティ

.html
┣「css」
┃ ┗style.css
┗「img」
  ┗test.jpg

上スライドのようなファイル構成でtest.jpgを全体の背景に指定したいならば、

と書いて下さい。画像を適当に用意すれば、次のスライドのような感じになるはずです。

※なお、本講習会からは、必要な場合を除きHTML本文は記述しません。CSSの例に合わせHTMLは自分で考えて下さい。

CSSによる背景指定

background-imageプロパティ

 

CSSによる背景指定

backgroundプロパティ

まどかちゃn(ry

用意した画像の大きさが小さければより分かりやすいのですが、画像が一面に繰り返されたと思います。でもこれだけだと表現力に欠けますね。CSSには背景関連の様々なプロパティが用意されています。例は次スライドにあります。

background-repeat画像の繰り返し方法。
repeat-x(横方向のみリピート)、repeat-y(縦方向のみ)、repeat(リピート、初期値)、no-repeat(リピートしない)、space(リピートするが、画像サイズが表示領域の整数倍でない場合は、画像間にスペースを入れて調整)、round(リピートするが、画像サイズが表示領域の整数倍でない場合は、画像を縮小して調整)
background-attachment画像のスクロール方法。
scroll(初期値、背景画像はスクロールする)、fixed(スクロールしない)、inherit(継承)
background-position画像の表示開始位置。
詳細は次々スライド参照

CSSによる背景指定

backgroundプロパティ

background-attachmentの例その1
scroll指定、というか初期値なので何も指定してない。

background-attachmentの例その2
fixed指定。ついでにdiv要素で作成したボックスではinheritの指定もしてます。

CSSによる背景指定

background-positionプロパティ

center、left、right、top、bottom、パーセンテージ(表示領域に対する割合)、数値(上端、左端からの距離)の値を横方向、縦方向の順で2つ組み合わせて使う。片方を省略すると、centerが勝手に補われる。

まあ実際試せばすぐ分かる。
http://www.webword.jp/cssguide/ref-back/sample5.html

CSSによる背景指定

backgroundプロパティ

まだまだ背景関連のプロパティはありますが、前述の奴に比べて次のやつは使用頻度低めなんで覚えなくておk。いずれも、CSS3.0で追加されたプロパティです。

background-size画像のサイズ指定。
auto(自動、初期値)、数値、パーセンテージ、cover(一つの画像を表示領域が埋め尽くされるまで拡大)、contain(一つの画像を最大の大きさに見え、なおかつ欠けのない状態まで拡大)
「数値 数値」(数値はautoでも可)で横縦それぞれの大きさを指定することも可能。
http://www.allinthemind.biz/sample/background-size/
background-origin画像を表示する際の基準位置。
border-box(ボーダーの右上を基準位置とする。)、padding-box(パディングの右上を基準位置とする。)、content-box(コンテンツの右上を基準位置とする。)
ボーダーやパッディングに関しては本日後半。
background-clip画像の表示領域。originとセットで使うが、origin使ってても省略可能
border-box(背景の描画領域を、ボーダーの外側の端までとする、初期値)padding-box(背景の描画領域をパディング・ボックスの外側の端までとする)、content-box(背景の描画領域をコンテント・ボックスの外側の端までとする)

CSSによる背景指定

backgroundプロパティ

前スライドのように使用頻度低めの奴はいつも説明端折るんですが、今日は次のプロパティ説明したかったので敢えて説明しました。

さてさて、背景画像を指定した上で、一々前のスライドのbackground-repeatとかbackground-originプロパティとか指定するのは面倒ですね。CSSでは、こういう関連したプロパティは大抵は一括指定することが可能です。背景画像の場合、backgroundプロパティを使えば一発でいけます。

background背景。
background: background-color background-image background-repeat background-attachment background-position background-origin background-clip;(順不同、それぞれの箇所に値が入る)と、複数のプロパティを半角スペースで区切って記述する。ただしbackground-sizeはbackground-position/background-sizeとbackground-positionの後に半角スラッシュを入れて記述する。
また、background: inherit(継承)も指定可能。この場合親要素の背景色や背景画像が継承される。

まあ、次スライドの例見てもらったほうがいいわよね。

CSSによる背景指定

backgroundプロパティ

例では、#menu領域のbackground-color、background-image、background-repeat、background-positionのみを指定しました。このように、backgroundプロパティでは指定する値を自由に選べます

色と画像を同時に指定したのは、余白の色も指定するためです。

CSSによる背景指定

backgroundプロパティ

例では、#menuの四隅に画像を配置しています。これを応用すれば、例えば丸い角なんかも出来ますね。スライドの角はCSS3.0のプロパティ使ってますが。

CSSによる背景指定

あ、確か第4回でやりましたが、背景が使えるようになったからって調子に乗って緑色の背景に黄色字とか使わないでくださいね。見にくいです。あくまでユーザ配慮で。(そういう意味では、今回出した例は典型的な悪例ですね)

ボックスモデル

ところでCSSでは、全ての要素はその周囲を取り囲む長方形のボックスを持つと考え、その枠や余白に様々なプロパティを与えていろいろなスタイルを実現する。ボックスは、文字などのcontent(中身)領域、border(枠)、contentとborderの間にあるpadding、枠と隣接するボックスの境界までの余白であるmarginという概念で構成される。

ボックスモデル

ボックスモデル

魔法少女リリカルなのはは神アニメです

※この例ではスライドとのCSSの兼ね合いの関係で色々ズレまくってるんで、実際にHTMLファイル作って表示調べてみて下さい。(各々のプロパティの説明は後述)

ボックスモデル

余白

marginマージン。
数値、パーセンテージ、auto(自動計算、初期値)の値を取れる。
例で使った一括指定の他にも指定方法がある。(下記)
margin-top、margin-bottom、margin-left、margin-rightプロパティで上下左右それぞれ指定することも可能。(次スライド)
paddingパッディング。
使い方はmarginと同じだが、値にautoは取れない。(初期値は0)

こんな感じで、1つだけ指定すると四方が同じに、2つ指定すると上下と左右それぞれ、3つ(ry

ボックスモデル

余白

この四方の指定方法はmarginだろうとpaddingだろうとborderだろうと同じです。

ボックスモデル

border-width枠の太さ。
数値の他、thin(細線)、medium(中程度)、thick(太線)を取れる。
border-style枠のスタイル。
none(非表示)、hidden(非表示だがtable中などで他の線と重なった時にこっちが前側に出る、つまり重なった部分が非表示になる)、dotted(点線)、dashed(破線)、solid(実線)、double(二重線)、groove(谷)、ridge(尾根)、inset(凹)、outset(凸)
border-color枠の色。
borderボーダー。
border: border-width border-style border-color;としてまとめて使う。
四方それぞれを指定することも可能。

ボックスモデル

border-style

border-style

ボックスモデル

この4つの概念、CSSを使う上では非常に重要な考え方なのでしっかり覚えて下さい。

ちなみに、で使ったbackground-colorプロパティはcontent+paddingに対して有効で、widthやheightはcontent領域の幅と高さを指し、paddingやborderやmarginは含みません。(ただしIE7以下ではこのwidthとpaddingの解釈に重大な不具合があり、content領域だけでなくpaddingも含んでしまいます)

ボックスモデル

補足

どうでもいいけど、例で使ったwidth、margin、padding、border、background系のプロパティは親要素を継承しません。前に継承やった時に説明するよーとか言いつつ全く触れてなかったので触れときます。

background系の背景関連プロパティは初期値transparent(透明)なので、親要素の背景色継承してんじゃん!って見えて実は継承してないです。
もし背景とか指定した時に親要素を継承してしまったら、要素定める度に親要素の背景がそのボックスに新たに出てしてしまい大変なことになりますよね。

補足

透過画像

こっからは補足。本編と全然関係ないのですが、透過GIFとか透過PNGってご存知でしょうか。
画像の一部分が透明になってる画像のことです。

この透過画像、HTMLやCSSでも利用することが出来ます。

補足

透過画像

透過GIF
img要素で画像指定

imgの一部が透け、背景色が見えている。

補足

透過画像

backgroundで画像指定

背景画像の一部が透け、背景色が見えている。

補足

透過画像

透過画像は、上手に使えばウェブデザインを行う上で非常に役に立ちます。

ちなみに、透過画像はWindowsに標準付属しているユーティリティソフトであるペイントでは作成できません。作成可能ソフトは色々ありますが、個人的にはお手軽に作成できるIrfanView(http://www8.plala.or.jp/kusutaku/iview/)がオススメです。軽いですし対応拡張子多いですし。

補足

透過GIF

GIFはGraphic Interchange Formatの略で、JPEGが苦手なイラストやアイコンなどの保存や透過画像の作成に向いている。

しかしながらGIFは256色しか扱えず、フルカラーの画像を保存しようとすると画質が劣化する上、可逆フォーマットなのでJPEGなどに比べサイズが大きくなる。

また一時期GIFに関連した技術の特許持ってる会社がGIFの作成ソフト作った奴は金払えとか言い出してgdgdになったが、その件については特許が切れて解決済み。

補足

透過PNG

PNGはPortable Network Graphicsの略で、GIFが権利問題で揉めてた際に代替フォーマットとして開発されました。
PNGは複数の種類があり、その一つであるPNG-8はGIFと同様256色しか扱えないもののファイルサイズが小さくなり半透明も使うことが出来る、ウェブサイト上で使用するには実に理想的な形式です。
PNG-24という(ファイルサイズはでかくなりますが)フルカラーを扱える形式もあります。

しかしながら、PNGは一部携帯端末では表示そのものが出来ず、透過PNGの場合Internet Explorer 6では透過されないので使用には注意が必要です。

ウェブサイトを作る際、写真はJPEG形式、イラストはPNG形式を用いるのが一般的ですが、上述の理由でPNGを避けたい場合はGIF形式も用いられます。

補足

スタイルシートを実感しよう

このスライドをIEで開き、「ALT」+「V」(表示)→スタイル→スタイルなしを選んでみてください。
するとあらあら不思議、ページがシンプルなものになります。

それはこのスライドが装飾にCSSを用いているからであって、HTML自体は見出しと段落の連続という、極めてシンプルなものだからです。

復習の時とかに、目的の項目が見つからない場合なんかはこのスタイルシートの無効化を用いると探しやすくていいかと思います。

Yahoo! JAPANとかFacebookとか、色んなサイトでどんな表示になるのか試してみてください。

演習問題

演習問題