ｳｪﾌﾞｻｲﾄのｿｰｽｺｰﾄﾞはHTMLやCSS等で記述され、このうちﾃﾞｻﾞｲﾝをCSSが担当することを前回お話しました。今回は、興味を持っていただくために、ｻﾝﾌﾟﾙとして下記のﾍﾟｰｼﾞを用意しましたので、ﾌﾞﾗｳｻﾞで閲覧してみてください。
https://railroad-model.jp/yamarin/test1.html
図3のような画面になったと思います。このﾍﾟｰｼﾞのｿｰｽｺｰﾄﾞは図4です。ｲﾝﾀｰﾈｯﾄｴｷｽﾌﾟﾛｰﾗｰであれば右ｸﾘｯｸ→ｿｰｽ表示で見られると思います。
 |
| 図3 test1.html画面表示 |
| <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>ねじの山崎</title> <style type=”text/css”> p.p1{ float:left; width:280px; margin:0px; background:#ff0000; } </style> </head> <body> <h1>CSSによるデザイン</h1> <p class=”p1″>やまりん新聞をよろしくお願いします。</p> </body> </html> |
| 図4 test1.htmlのｿｰｽｺｰﾄﾞ |
ｿｰｽｺｰﾄﾞは<と>で囲まれたHTMLのﾀｸﾞと呼ばれる記号を組み合わせて作っていきます。
図4のHTMLﾌｧｲﾙでは、最初の1行目はHTMLのﾊﾞｰｼﾞｮﾝ表示で、2行目の<html>から、最終行の</html>の間にﾍﾟｰｼﾞの内容を記述していきます。
3行目の<head>から14行目の</head>がﾍｯﾀﾞｰ部で、この部分にﾍﾟｰｼﾞに関するｷｰﾜｰﾄﾞやCSS等を記述します。6行目から13行目の<style…>～</style>で囲まれた部分は、CSSの記述です。今回はCSSをこの部分に直接記述していますが、通常は別途CSSﾌｧｲﾙを用意して、この部分には、そのﾌｧｲﾙを読み込むためのﾀｸﾞを記述します。
ﾍｯﾀﾞｰ部の<title></title>で囲まれた文字列は、ﾍﾟｰｼﾞのﾀｲﾄﾙで、ﾌﾞﾗｳｻﾞのﾀﾌﾞに表示される文字になります。
ｻｲﾄのｺﾝﾃﾝﾂ(ｳｪﾌﾞｻｲﾄで閲覧する部分)はﾎﾞﾃﾞｨｰ部に記述します。ﾎﾞﾃﾞｨｰ部は15行目の<body>から18行目の</body>までです。<h1></h1>ﾀｸﾞはこのﾍﾟｰｼﾞの最上位の見出しで、SEO(検索ｴﾝｼﾞﾝ最適化)対策において非常に重要なﾀｸﾞといわれています。ﾈｯﾄ検索で「SEO h1」で検索すると色々検索結果が出てくると思います。
この他にもﾀｸﾞの種類はたくさんあります。興味を持たれた方は、書籍、ﾈｯﾄ等を参照してください。