ｳｪﾌﾞｻｲﾄのﾃﾞｻﾞｲﾝを担当するのがCSSというｻｲﾄのﾃﾞｻﾞｲﾝを設定するため言語です。ITへの扉(入門編)No.9とNo.12で説明したときは、このCSSをｳｪﾌﾞｻｲﾄのｿｰｽﾌｧｲﾙであるHTMLﾌｧｲﾙに直接書き込んでいましたが、この場合にはHTMLの行数が多くなりｿｰｽﾌｧｲﾙが読みにくくなるため、通常は別途CSS用のﾌｧｲﾙを作り、HTMLﾌｧｲﾙからCSSﾌｧｲﾙを読み込みます。
今回も簡単なﾃﾞﾓｻｲﾄを作りましたので下記URLにｱｸｾｽしてください。このtest3.htmlは前回のtest2.htmlをCSS読込ﾀｲﾌﾟに修正しただけなので、ﾌﾞﾗｳｻﾞに表示される内容はまったく同じです。
https://railroad-model.jp/yamarin/test3.html
ﾌﾞﾗｳｻﾞでｿｰｽｺｰﾄﾞを開けて、両者のｺｰﾄﾞを見比べてください。test3.htmlの方が大分ｼﾝﾌﾟﾙになっていますね。
ﾘｽﾄ1はtest3.htmlのｿｰｽｺｰﾄﾞです。ﾘｽﾄ1の6行目にある下記の部分がCSSﾌｧｲﾙを読み込んでいる部分です。CSSﾌｧｲﾙはstyle.cssでcssﾌｫﾙﾀﾞの中に置かれています。
| <link rel=”stylesheet” type=”text/css” href=”css/style.css”> |
| <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>ねじの山崎</title> <link rel=”stylesheet” type=”text/css” href=”css/style.css”> </head> <body> <h1>CSSによるデザイン</h1> <p class=”p1″>やまりん新聞をよろしくお願いします。</p> </body> </html> |
| ﾘｽﾄ1 test3.htmlのｿｰｽｺｰﾄﾞ |
通常、CSS読込部はｿｰｽﾌｧｲﾙのﾍｯﾀﾞｰ部(※1)に置かれますので、ｿｰｽｺｰﾄﾞの最初の方に記述されていることが多いです。
このように一般的にﾌﾟﾛｸﾞﾗﾐﾝｸﾞ関連では、ｿｰｽｺｰﾄﾞの役割毎にﾌｧｲﾙを分割して、ｿｰｽｺｰﾄﾞの視認性を高めています。今回の場合にはHTMLが文書の構造、CSSがﾃﾞｻﾞｲﾝの設定をそれぞれ担当するため、別のﾌｧｲﾙとしています。