![]() |
|||
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
Style Sheet
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
実際にスタイルシートを使ってみよう!(基本のページ)
ファイルの保存方法
まず、HPを作る前にファイルの保存について説明します。(知っている方は次の「スタイルシートの基本」へ)
メモ帳でHTMLファイルを作成し、ファイルを保存するには、 注意!ファイル名に「日本語」「空白」は使用しないようにしてください。 HPを作成するときの決まりとして、トップには必ず「index.html」もしくは「index.htm」のファイル名をつけてください。 ファイル名には、スペースを含まないように気をつけてください。 ケーキの画像はリンクの上、もしくは画像をクリックして表示させた後、画像の上で右クリックをし スタイルシートの基本
まず、スタイルシートのタグの基本は、以下の通りです。
<例題1>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>タイトル</title> </head> <body> 本文 </body>
これが、基本のタグです。
このタグはHTMLを表示するために必ず必要なタグです。 まず、一番初めの
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
は、DOCTYPE(文書型宣言)と言って、HTMLのバージョンを宣言する文章です。
定型文のようなものです。(詳しい説明は省きます) スタイルシートを使う場合は必ず書くようにしましょう。
<html lang="ja-JP"> 〜 </html>
は、<html lang="ja-JP">からHTMLが始まって、</html>までがHTMLですよという宣言です。
「 lang="ja-JP"」は日本語を使いますという宣言のようなものです。できるだけ書くようにしましょう。
<head> 〜 </head>
この間はヘッダ部分になります。
主にタイトルや次のような「metaタグ」を記述します。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
このmetaタグは「シフトJISを使っています」「テキストデータですよ」という意味です。
日本語のタイトルをつける場合は、必ずこのmetaタグの後にタイトルを書いてください。
<title>タイトル</title>
<title> と </title> の間にHPのタイトルを書きます。
この部分に書いてある文字が、ブラウザのタイトルバーに表示されます。
<body> 本文 </body>
<body> と </body>の間にHPの本文を書きます。
この部分がHPの内容として表示されます。 HTMLタグは大文字、小文字に関係なく動作しますが、大文字、小文字の混在は避けましょう。 スタイルシートはすべて小文字で記述します。
ファイルの保存
では、これから実際に作っていきましょう!(ファイルの保存がわかる方は次へ)
まず始めに、<例題1>のHTMLタグの基本をメモ帳にコピーペーストしてください。 次に、ファイル名を「index.html」とつけて適当な場所に保存してください。 では、保存したファイルのあるフォルダを開いて、index.htmlファイルをダブルクリックしてください。 このようにブラウザが起動しましたか? うまく出来ていれば、タイトルバーに「タイトル」、内容の部分には「本文」と表示されているはずです。 では、先ほど作ったファイルを開いて編集してみましょう! ファイルのあるフォルダを開き、ファイルの上で右クリックして、サブメニューから わからない場合は下の図のように、開いたメモ帳にファイルをドラッグアンドドロップをしてもファイルを開けます。 ![]()
Tips
ダブルクリックが苦手な人っていませんか? そういう時には、ダブルクリックではなく、クリック(シングルクリック)でファイルを選択し、 ファイルが青くなったらそのままキーボードで「ENTER」キーを押しましょう。
どうですか? |