どう作る！？NEWタブ・商品を並べたレイアウト
記事IT・テクノロジー
html, CSSを使っての作成のポイントを前回の記事を元にかいつまんでご紹介いたします。制作の参考になれば幸いです🌷
▼完成見本はこちら
今回は、こちらをどのような手順で作っていったかを説明していきます。
余計なCSSをリセットする
まず下記をhtmlファイルのbodyタグの中に書きました。また、htmlと同じ階層にimgフォルダを作って、その中にitem01.jpgなどを入れておきます。
html
<section>
<div class="item-container">
<h2>Recommended Items</h2>
<ul>
<li>
<a href="#"><img src="img/item01.jpg" alt="" />Tシャツ001</a>
</li>
<li>
<a href="#"><img src="img/item02.jpg" alt="" />Tシャツ002</a>
</li>
<li>
<a href="#"><img src="img/item03.jpg" alt="" />Tシャツ003</a>
</li>
</ul>
</div>
</section>
CSS
CSSはおすすめは外部ファイルにして書くこと。今回はとりあえずhtml内に書きました。html内に書くときはstyleタグで囲みます。
<style>
.item-container {
width: calc(100% - 8rem);
max-width: 900px;
border: solid 10px yellowgreen;
text-align: center;
padding: 3rem;
}
</style>
ここまで出来たら一回ブラウザ（今回はGoogle Chrome）で見てみます。
▼こんな感じになりました。
次に右クリック→検証で、検証ツールを見てみます。
▼bodyタグのところを見てみると、margin（余白）が入っています。
これはGoogle Chromeのデフォルトで入っています。（user agent stylesheetというところ）
⭐️ちなみに楽天市場のRMSはリセットCSSと言ってブラウザがつけてるCSSをリセットするCSSがあらかじめついていて、リセットが必要なかったりします。
リセットしたい場合は下記をCSSに追加します。
body { margin: 0; }
▼ulタグのところもmarginとpaddingと、リストの黒丸が入っているのがわかります。
取りたい時は、下記のようにCSSを追加します。
⭐️下記は、item-containerというクラス名が付いたタグの中のulに下記のスタイルを当てるという意味になります。
.item-container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
▼余計な余白が取れました
⭐️aタグ（リンク）のアンダーラインも取りたいので、下記を追加します。
.item-container ul li a {
text-decoration: none;
}
⭐️緑の枠の部分全体を画面幅中央揃えにしたいので、下記を追加します。上下は1rem空けて、左右はautoという設定。
.item-container { margin: 1rem auto; }
▼aタグのアンダーラインが取れて、画面幅に対して中央揃えになりました。
Gridを使って横並びにする
次に商品一つ一つを囲っている、liを横並びにしたいので、
ulにgridを設定します。
.item-container ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem 1rem;
}
▼このようになりました。
⭐️画像も伸縮させたいので、下記CSSも足します。
.item-container ul li img {
max-width: 100%;
}
▼画像も収まりました！
::afterを使って"NEW"を表示
liにnewというクラス名がついている商品にはNEWというタブがつくようにしたいと思います。
▼まず、liタグのどれかにclass="new"をつけます。
<li class="new">
<a href="#"><img src="img/item01.jpg" alt="" />Tシャツ001</a>
</li>
▼CSSは下記を追加します。
.item-container ul li.new a::after {
content: 'NEW';
font-size: 8px;
font-weight: bold;
background: purple;
color: #fff;
}
▼ブラウザーで確認
Tシャツ001の後にNEWと付きました。
⭐️aタグの左上につけたいので、下記を追加します。
.item-container ul li a {
position: relative;
display: block;
}
.item-container ul li.new a::after {
position: absolute;
top: 0;
left: 0;
}
▼左上に付きました！
⭐️斜めにするため下記を追加します。
.item-container ul li.new a::after {
transform: rotate(-45deg);
}
▼斜めになりました。
⭐️はみ出てるところを非表示にしたいので下記を追加します。
.item-container ul li {
overflow: hidden;
}
▼このようになりました。
⭐️塗り部分を増やしたり位置を整えたりします。paddingを追加してtopとleftを下記のように変更しました。
.item-container ul li.new a::after {
top: -0.5rem;
left: -2.175rem;
padding: 1rem 2rem 0.25rem;
}
▼完成！
このような感じで作っていきます。
最終的なコードは前回の記事をご参照いただければ幸いです🌷
最後までご覧いただきありがとうございます。☺️
🌟参考サイト：このタグの中にこのタグ入れていいんだっけ！？と迷った時はこちらが重宝します。
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
https:// webliker.info/html/46840/
