HMTLとCSSとJavaScriptで商品一覧ページを作る➀

Javascriptの復習をしようと、以前買った教本から再びチャレンジです。

まずはHTMLとCSSでここまで出来ました。

次はJavaScriptです。進捗を次回、掲載していきます。

HTMLとCSSで静的なページを作成する

HTML

<!– 検索欄 –>

検索結果<span class=”count”>6件</span>

</div>

<label><input type=”checkbox”>セール対象</label>

</div>

<option value=”2″>価格が安い順</option>

</select>

</div>

</div><!–search–>

<!– ここから商品一覧 –>

<!– アイテム１ –>

<figcaption>Michael<br>スマホケース</figcaption>

</figure>

</div>

</div><!–item–>

<!– アイテム２ –>

<figcaption>Raphael<br>スマホケース</figcaption>

</figure>

</div>

</div><!–item–>

<!– アイテム３ –>

<figcaption>Gabriel<br>スマホケース</figcaption>

</figure>

</div>

</div><!–item–>

<!– アイテム４ –>

<figcaption>Uriel<br>スマホケース</figcaption>

</figure>

</div>

</div><!–item–>

<!– アイテム５ –>

<figcaption>Ariel<br>スマホケース</figcaption>

</figure>

</div>

</div><!–item–>

<!– アイテム６ –>

<figcaption>Azreal<br>スマホケース</figcaption>

</figure>

</div>

</div><!–item–>

</div><!–list–>

</div><!–container–>

</div><!–app–>

CSS

CSS body {
background: #000;
color: #fff;
}
.container {
width: 960px;
margin:0 auto;
}
.pageTitle {
font-weight: normal;
border-bottom: 2px solid;
}
.search {
display: flex;
justify-content: space-between;
}
.search .target {
display: inline-block;
}
.search .target label {
margin-right: 15px;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list::after {
content: “”;
display: block;
width: 250px;
}
.item {
flex: 0 1 250px;
margin-bottom: 30px;
}
.item .image {
position: relative;
text-align: center;
}
.item .image img {
width: 100%;
height: auto;
}
.item .status {
position: absolute;
border-radius: 50%;
width: 4em;
height: 4em;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #bf0000;
color: #fff;
}
.item .detail {
text-align: center;
}
.item .price {
display: inline-block;
}
.item .price span {
font-size: 180%;
}
.item .shipping-fee {
display: inline-block;
background: #f7cd12;
color: #000;
}
.item .shipping-fee.none {
background: #bf0000;
color:#fff
}

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。