こんにちは朱夏です。
今回はWebサイトの模写をやっていきたいと思います。
Twitterでこんな呟きを見つけました。
これはスキルアップと案件獲得両方を目指せるコスパの良い学習方法だと思ったので、早速試してみました。
今回はHTML部分の模写を実施してみました。
思ったよりコードが長かったので、HTMLとCSS、JavaScriptで分けてやっていきたいと思います。
今回、模写するサイトはこちらの依頼の参考ページ1つ目になります。
https://www.lancers.jp/work/detail/2769519
見た感じ、1ページのみで複雑なエフェクトもかかっておらず、追従する「トップへ戻る」ボタンにJavaScriptが使われている程度かなと思って手を付け始めたのですが、書き写すだけがこんなに難しいと思いませんでした。
未知のコードをただ書き写しても意味がないので、どんなものなのか調べながらやっていきました。
今後の参考に書き留めておきます。
OGP
SNSへ受け渡す情報を指定する事が出来ます。
指定していなくてもSNS側が自動でサイトの情報からリンクカードを生成してくれるのですが、自分が使ってほしいタイトルや文章、サムネイルなどがあるのであれば、指定しておくと良いと思います。
設定方法はこちらを参考にしてみてください。
Google Tag Manager
タグマネージメントツールというものだそうです。
GoogleアナリティクスなどのタグをHTMLに直接書くのではなく、別ファイルで一元管理できるものだそうです。
これにより、サイトの各ページに書いていたコードを、管理ファイルのみに書けば良くなり、修正、更新も管理ファイルだけで済みます。
記述していたすべてのページを修正するような手間もなくなるのでとても便利なツールですね。
導入する方はこちらの公式サイトからどうぞ。
href=”javascript:void(0)”
これは、<a>タグ内に書くものになります。
通常のリンク先URLの代わりにこれを指定すると、クリックしても「何も起こらなくなります」。
詳しい仕組みは割愛しますが、この記述によりリンクが無効化されるみたいです。
正直、個人的には使い道が思いつかないのですが、このサイトではどんな使い方がされているのでしょうか・・・。
<picture>タグ
こちらは、先に参考URL見てもらった方が解りやすいかと思います。
画面サイズなどの条件で読み込み画像を入れ替えたりするときに使用するタグの様ですね。
レスポンシブ対応で画像切替は必要になってきますね。
私はBootstrap4で実現できますが、HTMLでもこんな方法があったと初めて知りました。
<dl>、<dt>タグ
リストタグの一種で、説明リストと呼ばれているものです。
本来は<dd>タグも含めて使用するものの様ですね。
こんな感じに使います。
<dl>
<dt>
りんご
</dt>
<dd>
赤い果物。カレーに入れると美味しくなる。亜種に青りんごがある。
</dd>
</dl>
<dt>タグと<dd>タグは入れ子にならず、2個1セットで使用するのが通常の使い方の様ですね。
<dt>タグに説明する言葉を、<dd>タグに言葉の説明を書きます。
今回模写しているサイトでは<dd>タグは出てきませんし、なぜわざわざこのタグを使っているのかは理解できませんでした・・・。
主なものはこんなところでしょうか。
まだCSSやJavaScriptと関係していて謎が解けていない部分もあるので、また解り次第書いていきたいと思います。
というわけでHTMLの模写をやってみました。
他の方のサイトの模写なので、勝手にここにコードを張り付けたりは出来ないのですが、自分以外の人が書いたコードを読むのって勉強になりますね。
さて、次回はCSSをやっていこうと思っているのですが、少し確認した限りだととんでもない量のスタイルを指定しているみたいです。
3ファイルあって、合計すると行にしてざっと1000行ほどありました・・・。
私が経験ないので知らないだけで、これが普通なのでしょうか？
サイトを見た感じだけだと、ここまでスタイルを指定しなくても作れそうな気がしていたのですが・・・次回やってみればわかる事ですね。
今回はここまでです。
次回もよろしくお願いします。
