実は、この模写コーディング、最初は完全に課題の意味を履き違えていて、こんなことをしていた。
何から始める？
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のウェブ表示が、きれいになった。
ただ、問題が２点。
- トップの MyWork の部分が、文字の上部は半分見えないし、ロゴ画像だろうか、表示されていない
- メインの画像が左に長い…やたら長い。
問題を解決する！
まずは、一点目の問題。
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さんに質問して、画像を幅に対して真ん中寄せできる方法を聞いた。
回答を見て、あ、これは知ってた…と思った
もちろん、言わずとしれた（！）
#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でデプロイを試みた。Githubと連携で、とても簡単だ。
無料だし。
ということで、黒歴史も保存して、後々戒めに使いたい私は、これも残しておくことにした、という話。