【HTML,CSSの基礎】⑥要素のサイズを文字のサイズと同じにする方法

こんにちは、Mac大好きです！Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

プログラミングは楽しんでやることが大切です！

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

要素（pタグ）の幅を文字と同じサイズに変える

通常、p要素やdiv要素などのブロック要素の幅は、画面の幅いっぱいのサイズになります。ピンク色の部分のことです。

「文章がそこまで長くないのに、なんでこんなに幅を取るんだろう？」と思った人もいるのではないでしょうか。

そこで今日は「要素の幅を文字の長さに合わせるCSS」をご紹介します。

黄色の部分のようになります。見てのとおり、文字の長さと要素の幅が同じになっていると思います。どんな長さの文字でも自動的に対応する優れものです。

CSS

「要素の幅を文字の長さと同じにする」ためには「fit-content」という命令を使います。

width: fit-content;

・「要素」の

・「幅を」（width）

・「コンテンツにフィットさせる」（fit-content）

ということですね。

これだけでOKです。めっちゃ簡単ですね。

今日はここまでです。

これからも「プログラミング初心者向け」に簡単なコードをご紹介していきます。「Progateの復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう！よろしくお願いします。