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を書くのを避けています。

ま、それでも書いてしまう訳ですが(笑)。

さて、またデザインカンプを作ってホームページを制作しようかな。そんな感じです。

いいなと思ったら応援しよう!