記事の詳細
【はじめての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のサイト制作にも必要となる部分なので、
実際に手を動かして覚えていってくださいね！では！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
