記事の詳細

こんにちは!
前回は入門編Ⅰとして、HTMLとCSSの簡単な意味と使い方をご紹介しました。
HTMLは文字を入力、CSSはHTMLを装飾するファイルと覚えると楽かもしれません。

【はじめてのHTMLとCSS】最初に作るHTML 入門編①~コピペできるテンプレート付
こんにちは!今回はHTMLとCSSで知っておきたい記述方法やタグの意味など、基礎知識について書いていきます!はじめての方も改めて基本を学びたい方も必見です!環境構築...

コピー&ペーストで作成したので、すこし物足りない方向けに、
今回は少し頭を使う「階層」をマスターして画像を表示する方法を解説します!

CSSの読み込み方って?

前回の内容を見て少し不思議に思ったところはありませんか?
style.cssとlesson_001.htmlの2つのファイルを作成しました。
なぜlesson_001.htmlにstyle.cssの装飾が読み込まれるのでしょうか。

すぐにわかった方は素晴らしいです!
よく「読み込んで」いただいたようですね!

画像のように<head></head>のなかに、下記の記載があります。

この記述がない場合は読み込まれず、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=””>部分を

もしくは

に上書き。これでOK!

もう一つ問題です。階層上級編!

lesson_001のフォルダと同じ場所(階層)にstyle.cssを移動した場合に、
再度読み込ませる方法を考えてください。

—–
ここから解答です
答えは、階層表記を付け加える、です。

今回の場合、階層がひとつ上になるという考え方をします。
そのため、表記は「../」を追加しますので、下記のようになります。

下の階層は「./ファイル名」もしくは「ファイル名」。上の階層は「../ファイル名」。
2階層上なら「../../ファイル名」となりますし、フォルダ内のファイルなら「./フォルダ名/ファイル名」と指定します。
またこの表記を相対パスと呼びますので、ぜひ覚えてください!

新しいHTML、imgが登場

それではお待ちかね、画像(img)の表示です!
トップページといえば、目を引く素敵な画像がありますよね。
webサイトに近づけるにはやっぱり画像を置きたい。。ので、さっそく入れていきましょう!
これまでの階層の内容を思い出してくださいね!

①階層初級編のつづきで、lesson_002フォルダ内にimgフォルダを作成。


②imgフォルダ内に使いたい画像を入れる。
今回は1920×600サイズを使用し、img_0516とつけます。


③lesson_001.htmlの<body></body>のなかに<img src=””>と記載。さて表記は。。

※表示されない場合は拡張子をチェックしてください。
フォルダの表示タブにある「ファイル名拡張子」にチェックをつけると簡単に確認できます。

④完成!!

⑤コードをまとめましたので、こちらを使ってくださいね!

【HTML】

【CSS】

以上です!お疲れさまでした。
階層の考え方はFTPソフトを使ったりWordpressのサイト制作にも必要となる部分なので、
実際に手を動かして覚えていってくださいね!では!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

光回線受付センター
ページ上部へ戻る