見出し画像

Webデザイン・マーケティング課 授業10日目

いしかわ

1〜3時間目 HTML5・CSS演習

使用テキスト

■1時間目

主にパスの話。
オリジナル教材で説明。

※もしこのnoteを見てくれた型で、HTMLの初心者で、パスに関して苦手意識がある方は、やってみてください。

解答すると、practice1〜practice6まで、練習ファイルが入っています。

・practice1

practice1
┗practice1.html
┗inu.jpg
┗neko.jpg
┗sora.jpg

こんなファイル構成になっています。このpractice1.htmlから、inu.jpg、neko.jpg、sora.jpgのどれかをimgタグで表示させます。コードは、以下の感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>パスの練習1</title>
</head>
<body>
   <h1>パスの練習1</h1>
   <img src="neko.jpg" alt="猫">
</body>
</html>

図で書くと、こんな感じ。

画像1

同じフォルダにある画像を表示するのは、ファイル名だけ書けばOKです。

<img src="neko.jpg" alt="猫">


・practice2

practice2
┗practice2.html
┗img
    ┗inu.jpg
    ┗neko.jpg
    ┗sora.jpg

今度は、こんな感じです。図で見ると、以下の様な感じ。

画像2

htmlと同じ場所にある、imgフォルダの中に画像があります。この場合、コードは以下の様になります。(alt属性は省略)

<img src="img/inu.jpg" alt="">


・practice3

practice3
┗practice3.html
┗common
    ┗img
        ┗inu.jpg
        ┗neko.jpg
        ┗sora.jpg

今度は、フォルダを二つ下る感じです。

画像3

htmlと同じ場所にある、commonフォルダの中の、imgフォルダの中に画像があります。

<img src="common/img/sora.jpg" alt="">

こんな感じになります。


・practice4

practice4
┗html
    ┗practice4.html
┗inu.jpg
┗neko.jpg
┗sora.jpg

今度は、こんな感じです。

画像4

htmlから見て、画像の位置は、一個上にフォルダを上がった場所にあります。

その場合、「../」を使うと、「一個上のフォルダ」という意味になります。

<img src="../neko.jpg" alt="">

こんな感じになります。


・practice5

practice5
┗html
    ┗file
        ┗practice5.html
┗inu.jpg
┗neko.jpg
┗sora.jpg

今度は、htmlから見て2個上にフォルダを上がったところに画像があります。

画像5

この場合は、「../」を2個書けばOKです。

<img src="../../inu.jpg" alt="">

こんな感じになります。


・practice6

practice6
┗html
    ┗practice6.html
┗img
    ┗inu.jpg
    ┗neko.jpg
    ┗sora.jpg

最後は、今までの応用です。

htmlから見て、「一個上のフォルダ」の中の、「imgフォルダ」の中に画像があります。

画像6

この場合、以下の様になります。

<img src="../img/sora.jpg" alt="">


相対パスの考え方は、自分から見て相手がどこにいるかです。
htmlから見て、画像がどこにあるかを考えていくのがパスの考え方です。

以下が、完成ファイルです。


■2時間目

p75下-p84ただし、p78-p80（フロートの項目）は省略

min-widthやmax-widthについて、口頭で説明。

メディアクエリとブレイクポイントについても口頭で説明。

p84の上部のコードを書く。ただし、一気に書くと何が何だかわからなくなるので、少しづつ書く。

<a href="#">テキストリンク</a>
<a href="#">ボタンリンク</a>
<a href="#">ボタンリンク2</a>

まずこれを書いて、各々のaタグに別のスタイルを適用させるために必要な、class属性の存在意義を説明した。


■3時間目

p84のみ

a{
    background-color:好きな色///ここは、後で消す
    display:block;
    width:200px;
    margin:40px auto;
    padding:1em;
    text-align:center;
}

aタグに対して、background-colorを入れて、大きさを確認したのち、widthプロパティを先に書き、aタグはインラインなので、widthが適用されないことを説明。

その後、display:blockを書き、適用されることを確認。
ボタンの中央にテキストが来る様に、text-align:centerを説明。

ここで、要素を真ん中にする方法を説明するため別ファイルを用意。

center.html（body内だけ表示）

<div>  
    <p>要素を中央寄せするには、</p>
    <p>1.要素に横幅を指定する</p>
    <p>2.要素の左右のmarginに、autoを指定</p>
</div>

center.css（center.htmlから読み込んでいる）

div{
   background-color: aqua;
   width: 500px;
   margin-left: auto;
   margin-right: auto;
}

要素を中央にするには、
1.横幅を指定する
2.marginの左右にauto
が、必要と説明。

このファイルを作ったのちに、先ほどのファルに戻り、

margin:40px auto;を記述、上下に40px、左右にautoが設定されていることを強調。さらに、前の工程で、width:200pxを入れていたことにより、要素を中央にする条件の1、2が両方とも書かれたことにより、ボタン（この時点ではボタンっぽくないが）が中央に来ることを説明。

さらに、ボタンを少し太くするために、padding:1emを記述。

これでとりあえずp84終了。


■まとめ

HTMLが3時間になると、説明することが一気に多くなる。
明日以降も、同じことを何度も確認しつつ進めよう。

この記事が気に入ったらサポートをしてみませんか？