はじめに
こんにちは！
年末まで毎日webサイトを作っている者です。
以前、Ap●leの公式サイトのコンテンツ部分を真似しようと試みました。
微妙な仕上がりです。
同じように再現するのって難しいなぁ・・・。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は19日目。(2019/11/6)
よろしくお願いします。
やったこと
今日は、要素の配置を思い通りの場所に置こう！ということで他サイトの完コピを目指しました。全然完コピではない点はご了承ください。まずはgifでどうぞ（本家サイトと自分が作ったのを切り替えながら比較しています。最初に映るのは完璧にコピーできたわけではなくただの本家サイトです）↓
構成は非常にシンプルです。
<div class="content_page">
<h2 id="content_page_title">Ephene 50000 Pro</h2>
<h3 id="content_page_description">カメラも、ディスプレイも、性能も、Pro。</h3>
<div>
<a class="icon_bector" href="/">さらに詳しく</a><a class="icon_bector" href="/">購入</a>
</div>
</div>
class="content_pag"のところでが背景の画像を指定しています。
background-size: coverで全体的に画像がフィットするようにしています。↓
.content_page {
...
background-image: url("iphone.jpg");
background-size: cover;
}
あとは画面サイズが小さくなったらメディアクエリで大きさを調整します。↓
@media screen and (max-width: 735px) and (min-width: 0px){
.content_page {
height: 350px;
}
#content_page_title {
font-size: 30px;
}
.icon_bector {
font-size: 11px;
}
#content_page_description {
font-size: 14px;
}
}
ただこれだけでは画像がややフィットぐらいのフィット感だったので、もしかして画像サイズからこだわらないといけないのかな？という疑念が湧いています。
画像はwebサイトで重要な役割を果たすので思いのママに操れるようになっておきたい・・・。というわけで調査して判明したらまた画像についてはご報告します。
あとついでに、擬似クラスも今日勉強したので載せておきます。
.icon_bector::after{
padding-left: .3em;
content: ">";
font-size: .4em;
}
.icon_bector:hover {
text-decoration: underline;
}
::afterは.icon_bectorクラスを指定している要素のすぐ後に何か表示したいときに使います。
cnotentプロパティで表示したいものを指定しています。
:hoverの方はクラスの上にカーソルが乗ったらスタイルを当ててくれる便利機能です。
これらを利用してJavaScriptをスタイル変更のためだけに多用することは防いで行きたいですね。
感想
やってみて分かることって多いですね。自分はもっとできると根拠もなしに思ってましたが、今日の内容だけでも2時間半ぐらいかかってしまいました。自信がなくなる〜。年末になる頃にはweb制作の仕事を取れるようにするぞ！
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願いします。
参考
ぱくたそさん画像をお借りしました。ありがとうございます！