模写コーディングに初挑戦 (3) 悪しきコピペサイト制作


実は、[この模写コーディング](https://qiita.com/zosanmama/items/708bbdd4f4653ec4d12f)、最初は完全に課題の意味を履き違えていて、こんなことをしていた。

### 何から始める？

#### htmlの元を htmlの素で準備
「メモ帳でHTMLコーディング」の時代にHTMLを独学している私は、コピペは罪、と以前から思っていたけれど、昨年通ったスクールで「あるものは活用して、自分の改善を加えることで進化させていく」ことがこの世界の基本概念だと認識した。

なので、サンプルサイト上で
`表示＞開発/管理＞ソースを表示`
として、現れたHTMLコードをまるまるコピー。
↓
VSコード上で新規ファイル「index.html」を作って、まるまるペースト。
↓
VSコードの拡張機能「Liveserver」を有効にして、この「index.html」がリアルタイムでウェブ表示されるようにした。

並行して、サイト上の画像を右クリックして「名前をつけて画像を保存」で一旦保存。それを、VSコードに今度は「img」フォルダーを作成してドラック/ドロップで入れてしまう。もちろん、名前は変更していない。きっと、コードの中にも出てくるだろうし、そのままのほうがいいに決まっている。

Liveserverで表示している画面は、もちろんまだ、乱雑でおもちゃ箱状態。

#### cssファイルを書いていく

ここから、CSSを書いていけばいいのかな、と考える。VSコードで「css」フォルダーを作成し、中に「style.css」を作る。CSSファイルをマルコピしたことがなかったので `表示＞開発/管理＞デベロッパーツール` で表示された画面から、CSSの部分をクリックしたところ、上部メニューの「ソース」に飛んでくれて、CSSファイルの内容もまるっとコピペできそうなことが判明。

そこで、マルコピの罪悪感を再び心の奥底で感じながら、css部分もコピペさせていただいた。（私には、このシンプルなサイトを作成した後、もっとやりたいことがあるので、失敬…心で呟いて）
Liveserverのウェブ表示が、きれいになった。

ただ、問題が２点。
1. トップの MyWork の部分が、文字の上部は半分見えないし、ロゴ画像だろうか、表示されていない
1. メインの画像が左に長い…やたら長い。

#### 問題を解決する！

まずは、一点目の問題。

`index.html`を眺める。
`<body>` の`<header>` に 
```
 <h1 class="site-title"><a href="index.html"><img src="../img/logo.svg" alt="My Work"></a></h1>
```
とある。どうやら、ここでは「My Work」という文字を指定していない？代わりに、画像 `<img src="../img/logo.svg" alt="My Work">` が入ってる？？？

ということで、オリジナルのサンプルサイトに戻って、該当箇所で右クリックすると画像 `logo.svg` を保存することができた。それをVSコード上の imgフォルダーへ格納し、無事Liveserver表示がうまく行った。

「な〜んだ」と少しだけ拍子抜けして、次へと進む。

二点目の問題。

再度、`index.html`を眺める。問題は、ここにあるはず。
```
      <div id="mainvisual">
        <picture>
          <source media="(max-width: 600px)" srcset="../img/mainvisual-sp.jpg">
          <img src="../img/mainvisual-pc.jpg" alt="テキストテキストテキスト">
        </picture>
      </div>
```
どうやら、このメインビジュアルに入る画像は２つ準備してあるらしい。
`mainvisual-sp.jpg` と `mainvisual-pc.jpg`だ。勉強不足、もしくは学習内容をまるで忘れてしまう私は、`source media="(max-width: 600px)"` こんなコードを自分で書け、と言われても泣き寝入りだが、幸運なことに英語はわかるので、コードの意味はなんとなくわかる。

`source media="(max-width: 600px)"` = `最大幅600pxまでのメディア（デバイス？）の場合`

であろう。

私が現在勝手にダウンロードしている画像群を見てみると、VSコードにあるのは、`mainvisual-pc.jpg` だ。サンプルサイトに戻って、ブラウザ幅をこれでもか、と細くして再度画像を保存したら、ちゃんと `mainvisual-sp.jpg`になった。このファイルをVSコードの imgフォルダーの仲間に加えた。

想像はしていたけれど、これではただレスポンシブ対応しただけで、Liveserverの表示は何も変わらない。きっと左に長く延びているメインビジュアル画像は、CSSのせいだろう。

ということで、今度は `style.css`を眺める。

一般として設定されている
```
img {
  max-width: 100%;
}
```
も目についたが、まず、メインビジュアルの設定を見てみる。
```
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  margin-bottom: 80px;
}
#mainvisual img {
  width: 100%;
  max-width: 1920px;
  height: 420px;
  object-fit: cover;
}
```
`width: 100%;` と `object-fit: cover;` が、気になる。
が、再び、勉強不足のため、`object-fit: cover;` がよくわからない（学習してたらごめんなさい）
chatGPTさんによると
|メディア要素に対して、要素の縦横比を維持しながら、親要素に合わせてコンテンツをトリミングするためのCSSプロパティ|
|:-|

とのこと。では、親要素で仕切るべきなのか。
う〜ん。

再度、サンプルサイトへ戻る。自分が作っている Liveserverの表示と見比べる。
どちらも、画像は同じに見えていて、トリミングは見当たらない。
が、実は、サンプルサイトは、デベロッパーツールなどを表示させて、小さい文字が見づらかったので拡大していた。つまり、Liveserver表示では、ブラウザ幅に対して画像幅が短く、おそらく左寄せになっている（もしくはデフォルトだと左に寄るのか）ため、問題に見えただけだった。

問題２点目も、な〜んだ、だった。

一応、模写は完了していたことはわかっていたので、ここからはアレンジを加える、という意味で、まずはこれまでのVSコードでの作業は、一旦 `コミット＋プッシュ` を済ませています。

よく知らないのですが、こうしておくと、今後このサイトへいろいろアレンジを加えていく際に「あ、なんか、しまった？」と思ったときに、Github上で、この状態へ戻せるのかな、という認識です。

### アレンジ

#### メインビジュアルを真ん中に寄せたい

『メインビジュアルが左に寄ってる』という事実を無視できず、またまた chatGPTさんに質問して、画像を幅に対して真ん中寄せできる方法を聞いた。
回答を見て、あ、これは知ってた…と思った:joy_cat:

もちろん、言わずとしれた（！）
```
#mainvisual {
  margin-bottom: 80px;
}
```
ここに、下記を加える、ということ。
```
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
```
Liveserverで確認したら、幅広のわたしのブラウザでも、画像が幅に対して真ん中に配置されていて、いい感じでした。

小さな変更だけど、一応ここでまた`コミット＋プッシュ` を済ませています。

#### ヘッダーの高さを変えたい

これは、簡単すぎる。
`style.css` の `height` を 270から150pxへ変更。
```
#header {
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  margin: 0 auto;
  padding: 0 4%;
}
```
即時に Liveserverの表示も変わって、私好みに。


#### デプロイ

このあたりで、講師の方と共有のため、[Netlify](https://www.netlify.com/)でデプロイを試みた。Githubと連携で、とても簡単だ。
無料だし。

ということで、黒歴史も保存して、後々戒めに使いたい私は、これも残しておくことにした、という話。