記事の詳細
【はじめてのHTMLとCSS】最初に作るHTML 入門編② ~コピペできるテンプレート付
こんにちは!
前回は入門編Ⅰとして、HTMLとCSSの簡単な意味と使い方をご紹介しました。
HTMLは文字を入力、CSSはHTMLを装飾するファイルと覚えると楽かもしれません。
コピー&ペーストで作成したので、すこし物足りない方向けに、
今回は少し頭を使う「階層」をマスターして画像を表示する方法を解説します!
今回のブログの見出しはコチラです!
CSSの読み込み方って?
前回の内容を見て少し不思議に思ったところはありませんか?
style.cssとlesson_001.htmlの2つのファイルを作成しました。
なぜlesson_001.htmlにstyle.cssの装飾が読み込まれるのでしょうか。
すぐにわかった方は素晴らしいです!
よく「読み込んで」いただいたようですね!
画像のように<head></head>のなかに、下記の記載があります。
1 |
<link href="style.css" rel="stylesheet" type="text/css"> |
この記述がない場合は読み込まれず、lesson_001.htmlの内容だけ表示されます。
ではここで問題です。階層初級編!
cssフォルダを新たに作成します。そこへstyle.cssを入れると。。読み込まれなくなりました。
htmlファイルににstyle.cssを再度読み込ませる方法を考えてください!
—–
ここから解答です
答えは、「cssフォルダの中にあるstyle.css」という表記に変更する、です。
①lesson_001フォルダをコピーしてlesson_002とし、htmlを書き換えていきましょう!
②lesson_002.htmlとリネーム後、cssフォルダを作成しstyle.cssを入れる。
③つづいてlesson_002.htmlの<link href=””>部分を
1 |
<link href="css/style.css" rel="stylesheet" type="text/css"> |
もしくは
1 |
<link href="./css/style.css" rel="stylesheet" type="text/css"> |
に上書き。これでOK!
もう一つ問題です。階層上級編!
lesson_001のフォルダと同じ場所(階層)にstyle.cssを移動した場合に、
再度読み込ませる方法を考えてください。
—–
ここから解答です
答えは、階層表記を付け加える、です。
今回の場合、階層がひとつ上になるという考え方をします。
そのため、表記は「../」を追加しますので、下記のようになります。
1 |
<link href="../style.css" rel="stylesheet" type="text/css"> |
下の階層は「./ファイル名」もしくは「ファイル名」。上の階層は「../ファイル名」。
2階層上なら「../../ファイル名」となりますし、フォルダ内のファイルなら「./フォルダ名/ファイル名」と指定します。
またこの表記を相対パスと呼びますので、ぜひ覚えてください!
新しいHTML、imgが登場
それではお待ちかね、画像(img)の表示です!
トップページといえば、目を引く素敵な画像がありますよね。
webサイトに近づけるにはやっぱり画像を置きたい。。ので、さっそく入れていきましょう!
これまでの階層の内容を思い出してくださいね!
①階層初級編のつづきで、lesson_002フォルダ内にimgフォルダを作成。
②imgフォルダ内に使いたい画像を入れる。
今回は1920×600サイズを使用し、img_0516とつけます。
③lesson_001.htmlの<body></body>のなかに<img src=””>と記載。さて表記は。。
1 |
<img src="img/img_0516.jpg"> |
※表示されない場合は拡張子をチェックしてください。
フォルダの表示タブにある「ファイル名拡張子」にチェックをつけると簡単に確認できます。
④完成!!
⑤コードをまとめましたので、こちらを使ってくださいね!
【HTML】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>レッスン2|htmlとcss</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <p>さっそくはじめていきましょう!</p> <img src="img/img_0516.jpg"> </body> </html> |
【CSS】
1 2 3 4 5 6 7 8 9 10 |
@charset "utf-8"; body{ background-color: #adff2f; } p{ color: #000000; font-family: 'Yu Gothic'; font-size: 20px; } |
以上です!お疲れさまでした。
階層の考え方はFTPソフトを使ったりWordpressのサイト制作にも必要となる部分なので、
実際に手を動かして覚えていってくださいね!では!