Programing beginner by koala

【TechAcademy】CSS学習動画7-2について反映されない原因と対処法【コピペOK】

TechAcademyが提供してくださっているCSS学習動画の「7-2背景の指定の応用」において、

同じようにソースコードを書いても、うまく反映されなかった!!という方、いらっしゃるのではないでしょうか?

私も一文字づづ何度も何度も確認して、コードが動画通りだったのにも関わらず、同じように反映されなかったため、その原因と対処法を調べてみました。

もしかしたら、他にも方法があるのかもしれませんが、とりあえず動画を進めたいという方は、参考にしていただければと思います!

Contents

同じように反映されない原因は?

TechAcademyが提供してくださる動画内のhtmlファイルにて、下記のようなコードがありましたね!

<link rel=”stylesheet” href=”page-styles.css”>(写真参照)

このソースコードの意味は、

※詳細は下記の動画を参考にしてください。
【HTML】5-2:ファイルの読み込み
【CSS】1-5:外部ファイルによるスタイル適用

というわけで、動画で紹介されている「style.css」の他にも、背景やサイズなどを指定するスタイルシートがあるのでは?と思います。

動画のように反映させるための対処法

残念ながら、「page-styles.css」のソースコードは紹介されていないので、動画内で使用する「style.css」のソースコードに追記する形で対応しました!

とりあえず、この回では「背景の指定」を一緒にやって、体感することが目的ですので、これでいいかなと思います(-_-)

box指定への追加ソースコード

黄マーカーの部分を追記してください。サイズは写真の大きさに合わせて変えてください。

CSSで指定するhtmlの「box」にサイズを指定しただけです。画像の位置を指定するフィールドを用意した感じですね。

scroll、fixed、localへの追加ソースコード

これに関しては、このままコピペして、style.cssの一番下に貼り付けてください。

ここで何を指定しているかと言うと、box同様、<div>全体に背景画像とサイズを指定しているのと、サイズから溢れた分は「overflow」でスクロール表示させるようにしています。

※詳細は下記の動画をご覧ください。
【CSS】5-4:boxサイズの考え方(CSSのボックスモデル)

これで、動画通りに反映すると思います。

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら