これで一通り。

本日、ボタンを下で揃える、HTMLとCSSの解説ページを作りました。

ボタンを下揃えするー浪人のサムライ

以前、この場で紹介した可能性がありますが、まぁ、これにていったん終了かな。もっと、基本的な内容を追加して良いのかもしれない。

たとえば、文字サイズを変えるCSSとか。もっとも基本で、多分、HTMLコーディング初心者だったら、まずはするべき点ではないでしょうか。

今回は、おそらく、中級者くらいになるのかな。詳しくは上のページを見て頂くとして、HTMLとSCSSを載せておきます。

<div class="wrapper">

<div class="wrapper__box">
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
<p><a href="#">ボタン</a></p>
</div>

<div class="wrapper__box">
<p>テキストテキストテキスト</p>
<p><a href="#">ボタン</a></p>
</div>

</div>

.wrapper{
width: 50%;
display: flex;
gap: 1rem;
&__box{
position: relative;
padding-bottom: 5rem;
width: calc(48% - 1%);
}

a{
background: #0067bb;
text-align: center;
color: #fff;
width: 100%;
position: absolute;
bottom: 0;
padding: 2rem;
box-sizing: border-box;
text-decoration: none;
}
}

$md:768px;

@media (max-width: ($md)) {

.wrapper{

width: 100%;
}
}

文章量が変わっても、ボタンの位置が同じっていうパターンです。結構、最初は苦労しましたが、今は使いこなせるようになりました。

簡単に言えば、親要素にposition: relative;、子要素に、position: absolute;をする。

そんな感じで、一旦、解説ページは終わり。思い付いたら、また記事にしたい。そんな感じで思っています。