このWikiHowでは、Windowsのメモ帳アプリを使って、HTMLとCSSで書かれたWebページの情報を保存する方法を説明します。HTMLはウェブページを作成するために使用されるプログラミング言語であり、CSSはウェブページ上のHTML要素のスタイル-色、フォントなどを決定する言語です。
パート1
HTMLページの作成
-
メモ帳を開きます。スタート」 を開き、「メモ帳」と入力して、スタート・ウィンドウの上部にある青いメモ帳アプリをクリックします。
-
ドキュメントタイプを指定します。メモ帳に <!DOCTYPE html> と入力し、↵ Enterキーを押して改行します。
-
HTMLタグを追加する。<html>と入力し、↵Enterキーを押します。
-
BODYタグを入力する。<body>と入力し、↵Enterキーを押します。これで、ウェブページの情報を入力し始めることができます。
-
ヘッダーを追加します。<h1>TEXT</h1>と入力し、"TEXT "をお好みのページ見出しに置き換えて、↵Enterキーを押します。
- 例えば、「ようこそ！」というページヘッダーを作るには、メモ帳に<h1>Welcome!</h1>と入力します。
-
ヘッダーの下にテキストを追加します。<p1>TEXT</p1>と入力し、"TEXT "をお好みのメッセージに置き換えて、↵Enterキーを押します。
- 例えば、「私はイグアナです」というテキストを追加するには、メモ帳に<p1>I am an iguana</p1>と入力します。
-
さらにヘッダーと段落を追加する。例えば、2つ目のヘッダーには<h2></h2>タグを、2つ目の段落には<p2></p2>タグを付けます。
- コードの各行の後に↵Enterを押し続けていることを確認してください。
-
BODYタグとHTMLタグを閉じます。コードの最後の行を入力したら、</body>をその行に入力し、↵ Enterを押して、</html>を入力します。これで、CSSでスタイルを設定する準備ができました。
パート2
CSSを追加する
-
CSSの仕組みを理解しましょう。CSSを使用して、HTML要素（段落など）の外観を変更します。CSSは通常、次のような行単位で記述します：
- 要素タグ { (例えば、p {)
- 修飾子：プロパティ；（例えば、font-size: 20px;)
- 修飾子：プロパティ；（例：color: black;)
- }
-
<html>タグと<body>タグの間にはスペースを入れる。これらはページの上部付近にあるべきです。
-
HEADタグを入力します。<head>と入力して↵Enterキーを押します。
-
STYLEタグを追加します。<style>と入力し、↵Enterキーを押します。
-
ウェブページの背景色を変更します。そのためには
- body {と入力し、↵ Enterキーを押します。
- background-color: lightblue; と入力し、↵ Enterキーを押します。
- light」または「dark」の修飾子だけでなく、ここでサポートされている任意の色を使用できます。
- と入力し、↵ Enterキーを押します。
-
最初のヘッダーにスタイルを設定します。h1 {と入力して↵ Enterキーを押し、修飾子を追加して↵ Enterキーを押し、}と入力して↵ Enterキーを押します。それぞれの修飾子が独立した行であれば、1つの要素に複数の修飾子を追加できます。一般的な修飾子には次のようなものがあります：
- テキストサイズ - font-size: 30px;と入力すると、テキストが30ポイントのフォントに設定されます。任意の数値を代入してください。
- テキストの色 - color: black; と入力すると、テキストが黒くなります。お好きな色を代入してください。
- テキストの配置 - text-align: center; と入力すると、テキストが中央に配置されます。また、leftまたはrightと入力すると、テキストを適切に配置することができます。
- 使用フォント - font-family: times new roman;と入力すると、フォントをTimes New Romanに設定できます。verdanaやgeorgiaなどのフォントも使用できます。
-
最初の段落にスタイルを設定します。p1 {と入力して↵Enterキーを押し、修飾子を追加して↵Enterキーを押し、}と入力して↵Enterキーを押します。
- ここで使用できる修飾子は、ヘッダーに使用したものと同じです。
-
ドキュメントの残りの部分にスタイルを設定します。タグ・テキストを参照し、中括弧（{）を開き、修飾子を追加し、中括弧（}）を閉じることで、どの要素にもスタイルを設定できます。
-
STYLEタグとHEADタグを閉じます。最後のスタイリング・テキストの下の新しい行に、</style>と入力して↵ Enterキーを押し、</head>と入力して↵ Enterキーを押します。これでCSSシートは完成です。
パート3
ドキュメントの保存
-
CSSスタイルシートを見直しましょう。あなたのCSSドキュメントは若干異なりますが、以下のようになるはずです：
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- ボディ
- background-color: lightblue；
- }
- h1 {
- font-size: 45px；
- }
- p1 {
- color: black；
- }
- </style>
- </head>
- <body>
- <h1>こんにちは</h1>
- <p1>私はイグアナ</p1>です。
- </body>
- </html
-
ファイル」をクリックする。メモ帳ウィンドウの左上にあります。ドロップダウンメニューが表示されます。
-
名前を付けて保存...」をクリックします。ドロップダウンメニューの一番下にあります。クリックするとウィンドウが開きます。
-
保存場所を選択します。ウィンドウの左側にあるフォルダ（例：デスクトップ）をクリックします。
-
Save as type "ドロップダウンボックスをクリックします。ドロップダウンメニューが表示されます。
-
すべてのファイル」をクリックします。ドロップダウンメニューの中にある
-
拡張子を「.html」としてファイル名を付けます。ファイル名」のテキストフィールドに、お好みのドキュメント名（例：「My CSS」）の後に「.html」と入力します。
- 例えば、ファイル名を「My CSS」とした場合、my css.htmlと入力します。
- .css "ファイルを実行できるプログラムを使用している場合は、ここで.htmlの代わりに.cssを使用できます。
-
保存をクリックします。名前を付けて保存」ウィンドウの右下にあります。これで、CSSシートが実行可能な形式で保存されます。つまり、メモ帳ではなく、お好みのブラウザやHTMLエディタで開くことができます。
コメント
最新を表示する
NG表示方式
NGID一覧