今回は、前回作った下記ｻﾝﾌﾟﾙｻｲﾄのｿｰｽｺｰﾄﾞを使って遊んでみます(※1)。
※1 ある程度ﾊﾟｿｺﾝに慣れた方で、HTML,CSSに興味のある方に向いた作業です。作業は自己責任で行ってください。
https://railroad-model.jp/yamarin/test1.html
まずｳｪﾌﾞﾍﾟｰｼﾞのｿｰｽｺｰﾄﾞをﾊﾟｿｺﾝに保存してください。ﾌｧｲﾙの拡張子は必ず.html(あるいは.htm)にしてください。ここではｿｰｽｺｰﾄﾞがﾊﾟｿｺﾝに保存されていることを前提とします。やり方はﾌﾞﾗｳｻﾞにより異なりますので、分からない方はﾈｯﾄで「html ｿｰｽﾌｧｲﾙ 保存」等で検索するか、ﾊﾟｿｺﾝのことをよくご存知の方に聞いて見てください。
保存したｿｰｽｺｰﾄﾞをﾒﾓ帳で開き図2のｺｰﾄﾞが表示されればOKです。そして、保存したﾌｧｲﾙのｱｲｺﾝをﾀﾞﾌﾞﾙｸﾘｯｸしてﾌﾞﾗｳｻﾞｰを起動すると、図1のように表示されると思います。通常はﾌﾞﾗｳｻﾞからｳｪﾌﾞｻｰﾊﾞｰにｱｸｾｽしてﾍﾟｰｼﾞを表示するのですが、今回はﾛｰｶﾙのﾌｧｲﾙをﾌﾞﾗｳｻﾞで見ているので、本来のﾌﾞﾗｳｻﾞの使い方とは違いますが、ｿｰｽｺｰﾄﾞがHTMLやCSSのみで構成されている場合にはﾌﾞﾗｳｻﾞで閲覧できます(※2)。
※2 Javascript等を利用している場合には正常に見ることができません。
 |
| 図1 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> |
| 図2 test1.htmlのｿｰｽｺｰﾄﾞ |
次に、ﾒﾓ帳(※3)で開いている図2のｿｰｽｺｰﾄﾞの「background:#ff0000;」という部分の「#ff0000」を「#00ff00」に変更してください。変更したﾌｧｲﾙを上書き保存します。
※3 WORDなどのﾜｰﾌﾟﾛｿﾌﾄは使えません。
そして、ﾌﾞﾗｳｻﾞで最新の情報に更新するか、ｱｲｺﾝをﾀﾞﾌﾞﾙｸﾘｯｸしてﾌﾞﾗｳｻﾞを起動すると、「やまりん新聞を…」という部分のﾊﾞｯｸの色が赤から緑になりました。
変更前のbackground:#ff0000は「ﾊﾞｯｸを赤にする」というCSSの設定です。#ff0000は、光の三原色であるR(Red)、G(Green)、B(Blue)の調合割合を8bitでRed:ff、Green:00、Blue:00(赤:100%、緑:0%、青:0%)と3つ並べて表現したｶﾗｰｺｰﾄﾞです。ffというのは16進数の数値で、10進数では255(8bitで表現できる最大値)です。
R、G、Bの数値を色々変えて試してください。また、8bit、16進数については別途解説予定です。興味があるかたはﾈｯﾄで調べてください。