最近でもデザインに苦労している人が多いので、CSSでカラムを作る3つの方法を紹介します。flex、grid、そして昔ながらのCSSの違いを見てみましょう。Flexはブロックの整列に向いており、一方でGridはテーブルのような構造に適しています。どちらを使うべきかは明確なルールがあるわけではありません。重要なのは、自分の思い通りの見た目にすることと、最低限の整理整頓ができていることです。
今日は、CSSを上達させるためのヒントをいくつか紹介します。
方法は一つではない
思い通りのデザインができない？発想を変えてみましょう。例えば、画像を中に入れた円を作りたい場合、backgroundとborder-radiusを使えば簡単に中央寄せができます。しかし、その画像がバックエンドから送られてくる場合はどうでしょう？インラインCSSでHTMLを汚さないために、<img>タグを使う方が良いです。ただし、border-radiusだけを指定すると、正方形でない画像は歪んでしまいます。その場合、overflow: hiddenを使ったラッパーを作れば、はみ出した部分を隠せます。難しそう？もっとモダンな解決方法として、object-fitを使う方法があります。
<img src="{url}" />
img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}簡単ですね？
自由時間に練習しよう
先ほどの例では、object-fitを使えば簡単でしたが、他の方法も練習しておきましょう。例えば、画像の中にキーワードを表示するような変更を頼まれるかもしれません。
これでは先ほどの解決策が使えませんが、ラッパーの方法を覚えていますか？そのアプローチの方が今回のケースに合っているかもしれません。ぜひ練習として試して、私たちと共有してみてください。
Webサイトやモバイルアプリを分析しよう
Webサイトにアクセスしたときは、ソースコードを見ずに分析してみましょう。例えば「新しい」Twitterのレイアウトを見ると、左にメニュー、中央に投稿、右に検索・トレンド（赤枠で表示）がある3つの主要なブロックに分かれています。これらは冒頭で紹介したどの方法でも作ることができますが、Twitterの場合は少し複雑です。なぜなら、左右のカラムは固定で、中央だけがスクロールする仕組みだからです。つまり、左右のカラムにposition: fixedを指定するか、逆に中央のブロックにheight: 100vhとoverflow-yを指定する形です。経験を積むと、こうした違いを細かい部分から見分けられるようになります。例えば、後者の方法ならスクロールは中央のブロック内にありますが、実際はブラウザの右側にあることに気づくでしょう。
これらはすべてソースコードを見ずに私が観察した結果です。実際、何か面白いものを見つけたとき、最初に「どうやって作れるか」を考え、その後で試したり調べたりしています。
タイトルの「モバイルアプリ」の部分に注目した方もいるかもしれません。一見CSSで作られているかわかりませんが、それは関係ありません。もしFlutterのウィジェットでできるなら、CSSでも同じことができます。
この記事は、Lean Mindのブログでスペイン語で公開された記事「Tips de CSS que podrían ayudarte」の翻訳です。本バージョンはAIによって翻訳されたものですので、文章の一貫性が損なわれていたり、不自然な箇所があった場合はご了承ください。ご理解いただき、ありがとうございます。