HTMLとCSSの解説をしました。
最近、ちょこちょこと解説記事を書いています。最新版はこやつ。
自作のホームページなのですが、とても満足しています。今日は、文字と画像を交互に置く感じで。HTMLは、こんな感じで。
<section class="twoBox">
<div class="twoBox__box">
<figure><img src="images/samurai.png" alt="" /></figure>
<p>
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
</p>
</div>
<div class="twoBox__box">
<figure><img src="images/samurai.png" alt="" /></figure>
<p>
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
</p>
</div>
<div class="twoBox__box">
<figure><img src="images/samurai.png" alt="" /></figure>
<p>
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
</p>
</div>
</section>
SCSS
img{
width: 100%;
}
.twoBox{
&__box{
display: flex;
gap: 1rem;
&:nth-child(even){
flex-direction: row-reverse;
}
}
}
$sm: 480px;
@media (max-width: ($sm)) {
.twoBox{
&__box{
display: block;
}
}
figure{
margin: 0;
}
}
CSS
img {
width: 100%;
}
.twoBox__box {
display: flex;
gap: 1rem;
}
.twoBox__box:nth-child(even) {
flex-direction: row-reverse;
}
@media (max-width: 480px) {
.twoBox__box {
display: block;
}
figure {
margin: 0;
}
}
1時間くらいかかりました。
普段、デモサイトを作っているときは、ブラウザが持つCSSを消すのですが、解説サイトは、できるだけ、余分なCSSを書くのを避けています。
ま、それでも書いてしまう訳ですが(笑)。
さて、またデザインカンプを作ってホームページを制作しようかな。そんな感じです。