シニア世代に突入した時に脱サラ。フリーランス生活を綴ります。

Kamiyaブログ/シニアからのフリーランス生活

プログラミング

テックアカデミーさんの「はじめてのCSS入門講座」の『7-2 背景の指定の応用』を補足してみた。

2020年6月17日

プログラミング

シニア世代なのに、プログラミング学習始めました!

その最初の教材として、テックアカデミーの

を選ぶことに。

結構、順調に学習していたのですが、『7-2 背景の指定の応用』で躓きました。

 

最初は、とりあえず動画を見て疑問はスルーしてしまったのですが、どうも後味が悪い。

そこで、「はじめてのCSS入門講座」が終了した後のリベンジマッチ。

リベンジマッチによって、90%くらいは、完成しました。

 

同じところで突っかかる方も多いと思うので、ご参考でにとブログ記事にした次第です。

神谷純
この記事だけを読んでも『7-2 背景の指定の応用』の学習はできません。「はじめてのCSS入門講座」『7-2 背景の指定の応用』の補足資料だと思ってください。

「はじめてのCSS入門講座」『7-2 背景の指定の応用』の概要

 

内容を簡単に言うと。

・小さな画像を並べたり、左右上下に位置を動かしたりする。

background-repeat、background-position

・文字の背景を固定したり、ウインドウと一緒に動かしたりする。

background-attachment

といったことを学習できます。

 

background-repeat、background-positionの学習(小さな画像を並べたり、左右上下に位置を動かしたりする学習)

background-repeatの学習

background-repeatの学習の完成形画面

 

background-positionの学習の1例

background-positionの学習の画面

『background-repeatの学習の画面』は、

「黒いブラウザの背景に、グレーの背景を重ねて、小さめの画像を並べて表示する。」という画面を自作したのをキャプチャーしました。

『background-positionの学習の画面』は、

「黒いブラウザの背景に、グレーの背景を重ねて、小さめの画像を色々なところに配置する(画像下の方に表示している)」という画面を自作したのをキャプチャーしました。

 

上記の画面以外にも、

・小さい画像を縦に並べる。

・小さい画像を右に配置する

などの操作も学びます。

background-repeat、background-positionの学習のコード

動画で紹介されたHTMLファイルとCSSファイルを使って表示してみると、何も表示されません。

真っ白です。

おかしい。

コーディングは、サンプルコードと全く同じなのに・・・。

background-repeat、background-positionのHTML

background-repeatの学習のindex.htmlのコード

そこで、index.htmlのコードをよく見てみると、page-style.cssというファイルをリンクしている。

 

どうやら、style.css以外にもpage-style.cssを読み込んでいる。

 

というわけで最終的な画面を参考に、page-style.cssを自分で作ることにしました。

 

page-style.css

background-repeat、background-positionの学習のpage-stylecss

background-repeat、background-positionの学習のpage-style.css

まず、サンプルでは、一番奥の背景が黒いので、それを定義しました。

一番、奥の背景なので、bodyに定義。

body{

background-color: black;

}

そして、灰色のbox部分は

・エリア(class="box"の部分にエリアを作る)

・box色(灰色)

・box位置(真ん中)

になるような定義をします。

.box{

width: 700px; ←横の大きさの指定

height: 500px; ←縦の大きさの指定

margin: auto; ←boxの位置

}

 

このコードを書いた、page-style.cssを作って、あとは動画の通りの操作をすれば、background-repeat、background-positionの学習は、上手くいくはずです。

 

background-attachmentの学習(文字の背景を固定したり、ウインドウと一緒に動かしたりする学習)

background-attachmentの学習の完成例

background-attachmentの学習の完成例(7-2 背景の指定の応用(CSSの背景)から引用)

私の作成したbackground-attachmentの学習の最終画面

私の作成したbackground-attachmentの学習の最終画面

どんな画面か説明すると、

・一番後ろの背景が黒。

・その中に3つのboxがある。それぞれのboxの間には余白がある。

・それぞれのboxには、背景が張り付けられている。

・boxの文字はスクロールして見ることができる。

・それぞれのboxにポインタを持っていくと、スクロールバーが現れる。

という感じです。

background-attachmentの学習の最初のコード例の画面

background-attachmentの学習の最初のコード例の画面

background-attachmentの学習の最初のコード例の画面

動画で紹介されたHTMLファイルとCSSファイルを使って表示してみました。

ただ、HTMLファイルを出力したというだけです。

何も修飾されていません。

ということで、page-style.cssを作り上げていきます。

一番後ろの背景を黒にする

一番、奥の背景なので、bodyに定義。

これは、background-repeat、background-positionの学習と同じです。

body{

background-color: black;

}

 

3つのボックスを定義

HTMLファイルで<div>タグに定義したboxのクラスは3つ(scroll,fixed,local)

でも、index.htmlでは、全部divタグを使って一塊にしてあるので、divのタイプセレクタを使います。

div{

width: 50%; ← 横幅

height:400px; ← 縦幅

margin: 10px auto; ←ウインドウん真ん中に持ってきて、他のboxとは10pxの距離をとる。

background-image:url('img/0002.jpg');

background-size: cover;

background-repeat: repeat;

overflow: auto;

}

それぞれのboxには、背景が張り付けられている。

div{

width: 50%;

height:400px;

margin: 10px auto;

background-image:url('xxx/xxxx.jpg'); ←画像ファイルを定義

background-size: cover;←boxいっぱいを使って、画像を表示

background-repeat: repeat;←画面をスクロールしてもFixedボックスで背景画像が途切れないように、画像をリピートする。

overflow: hidden;

}

boxの文字はbox内に文字を収める

scroll,.fixed,.local {

width: 50%;

height:400px;

margin: 10px auto;

background-image:url('xxx/xxxx.jpg');

background-size: cover;

overflow: hidden; ←文字をboxに収めているよう見見せるために、はみ出した部分は表示しない。

}

 

カーソルがboxの上に来た時に、スクロールを表示する

div:hover{

overflow: auto;

}

マウスカーソルが上にある状態のときに表示をする疑似クラス:hoverを使いました。

マウスカーソルがboxの上にくると、縦スクロールが表示されます。

 

page-style.css

background-attachmentの練習のpage-style.css

background-attachmentの練習のpage-style.css

こんな感じになりました。

上記のコードの上の方に

body{

background-color: black;

}

が書いてあります。

これでほぼ、学習内容が要求しているコードが書けるでしょう。

 

最後に

目的とする画面から、cssを想像して、作ってみました。

ということで、テックアカデミーのものとは全く違う可能性は大ですね。

 

プログラミング学習を始めるにあたって、テックアカデミーさんの「はじめてのCSS入門講座」を学習する方が多いんじゃないかと思います。

 

今回の記事は、「他の方も私と同じところで悩んで、手が止まってしまうのではないか。」と思い、その方たちが先に進めるよう書いたつもりです。

 

神谷純
プログラミング学習の役に立てたら嬉しいでね。Web系のプログラムは初めてなので、言葉遣いに難点があるかもしれませんが、ご勘弁のほどを。

-プログラミング

Copyright© Kamiyaブログ/シニアからのフリーランス生活 , 2020 All Rights Reserved.