スタイルシートを使おう

::無料でホームページ作り＞スタイルシートを使おう

BACK[もどる]

スタイルシートを使おう

CSSファイルを作ろう

スタイルシートはホームページのデザインを変更できるものです。スクロールバーの色を変えたり、ページ全体のスタイルを簡単に統一できます。スタイルシートのなかのCSS（カスケーディングスタイルシート）を使うとホームページを楽に管理できるようになります。

まず、ＣＳＳファイルを作ろう。「スタート」→「プログラム」→「アクセサリ」→「メモ帳」を開いてください。下のソースをコピーしてメモ帳に貼り付けます。

/*基本デザイン*/ body,td{font-size: 文字サイズ ; color : 基本文字色;} /*リンク*/ a:link {text-decoration : none; color: リンクの色 ; } a:visited {text-decoration : none; color: 訪問済みリンクの色 ; } a:active {text-decoration : none; color: アクティブの色 ; } a:hover {text-decoration :underline; color: マウスがのったときの色 ; }

メモ帳のメニューから「ファイル」→「名前を付けて保存」をクリックしよう。保存する場所はホームページのファイルがある場所、同じフォルダにしよう。

そして、ファイル名に半角英数で「style.css」と入力。ファイルの種類をクリックして「すべてのファイル」を選びます。「保存」ボタンをクリック。メモ帳は開いたままだよ。

CSSファイルをホームページに組み込む

ＣＳＳファイルを編集していくときは色と文字サイズを指定してね。色と文字サイズについてはトップページからいろんな色のパレットを参照してね。

よく分からないって人は試しに下のものをCSSファイルに上書きしてみよう。

/*基本デザイン*/ body,td{font-size: 100%; color : #000000;} /*リンク*/ a:link {text-decoration : none; color: #0000ff ; } a:visited {text-decoration : none; color: #0000ff ; } a:active {text-decoration : none; color: #0000ff ; } a:hover {text-decoration :underline; color: #0000ff ; }

重要！！ＣＳＳファイルを呼び出さないとホームページにスタイルシートの設定が反映されません。下のものをすべてのページに貼り付ければ、すべてのページにスタイルシートの設定の効果を与えられます。

<head>～</head>部分に貼り付けよう。

<link rel="stylesheet" type="text/css" href="ＣＳＳファイル名">

CSSファイルはindex.htmlがあるフォルダの中にいれてね。そうすれば、スタイルシートの設定がページに反映されるよ。

BACK[もどる]

::無料でホームページ作り＞スタイルシートを使おう

::Copyright © hiromichi.M