見出し画像

Webデザインの基本　境界半径編

SynergySolo

イントロダクション

Webデザインにおいて、要素の角を丸くする「ボーダーラディウス」は、デザイン全体に遊び心や楽しさを加えるための効果的な手法です。角を丸くすることで、堅苦しさを和らげ、訪問者に対して親しみやすさを感じさせることができます。本記事では、フォントとのバランスを考慮したボーダーラディウスの設定方法や、ボタン、画像、アイコンなどさまざまな要素への適用例について詳しく解説します。デザインに統一感を持たせ、視覚的に心地よい印象を与えるためのポイントを見ていきましょう。

前提

この記事はWebデザインの基本を説明していくシリーズの第6話です。
過去の記事を読んでいただくとよりわかりやすくなります。

過去記事一覧

  1. Webデザインの基本　全体像編

  2. Webデザインの基本　タイポグラフィ編

  3. Webデザインの基本　カラー編

  4. Webデザインの基本　写真とイラスト編

  5. Webデザインの基本　シャドー編

Webデザインにおけるボーダーラディウスの活用法

1. デザインの楽しさを増すためにボーダーラディウスを活用する

Webデザインにおいて、要素の角を丸くするボーダーラディウスは、デザイン全体に遊び心や楽しさを加えるための効果的な手法です。角を丸くすることで、堅苦しさを和らげ、訪問者に対して親しみやすさを感じさせることができます。特に若いユーザー層やカジュアルなコンテンツを提供する場合に有効です。

2. フォントの丸みとボーダーラディウスを統一する

デザインの一貫性を保つためには、使用するフォントとボーダーラディウスのバランスを考慮することが重要です。フォントにはそれぞれ独自の丸みや特徴がありますので、ボーダーラディウスを設定する際には、そのフォントの丸みと調和するように心掛けましょう。これにより、全体のデザインがまとまりやすくなり、視覚的に心地よい印象を与えることができます。

3. 各種要素へのボーダーラディウスの適用

ボーダーラディウスは、ボタン、画像、アイコン、目立たせたいセクションなど、さまざまな要素に適用することができます。例えば、ボタンにボーダーラディウスを適用することでクリックしやすさや視認性が向上し、画像に適用するとソフトで温かみのある印象を与えることができます。また、重要なセクションや特定のアイコンにボーダーラディウスを使うことで、視覚的に強調することが可能です。

サンプル

実際にサンプルを見てみましょう。
前回のCSSファイルに手を加えてみました。今回は変更したところだけを紹介します。

.Container_Bed img {
  display: block;
  width: 480px;
  height: auto;
  /*今回のポイント*/
  border-radius: 20px;
}

.Class_BedText {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgb(103, 103, 103, 0.6);
  padding: 20px;
  width: 30%;
  /*今回のポイント*/
  border-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

このコードでは、.Container_Bed内のimgタグと、.Class_BedTextクラスのテキストボックスに対してスタイルが適用されています。
今回のポイントである境界半径を中心に説明します。

1. .Container_Bed imgのスタイル設定

.Container_Bed img {
  display: block;
  width: 480px;
  height: auto;
  border-radius: 20px;
}

  • display: block;
    画像をブロックレベル要素として表示します。これにより、画像の前後に改行が入り、他の要素と重ならずに配置されます。

  • width: 480px;
    画像の幅を固定で480ピクセルに設定します。これにより、画面サイズに関係なく一定の幅で表示されます。

  • height: auto;
    画像の高さを自動調整します。幅が固定されているため、元のアスペクト比を維持したまま高さが調整されます。

  • border-radius: 20px;
    画像の角を20ピクセル丸くします。これにより、画像が柔らかく親しみやすい印象になります。

2. .Class_BedTextのスタイル設定

.Class_BedText {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgb(103, 103, 103, 0.6);
  padding: 20px;
  width: 30%;
  border-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

  • position: absolute;
    このテキストボックスを絶対位置に配置します。親要素を基準に位置が決まります。

  • top: 50%; left: 20%;
    親要素の上から50%、左から20%の位置に配置します。transformプロパティと組み合わせることで、中央寄せの効果を出します。

  • transform: translate(-50%, -50%);
    テキストボックスを自分自身の幅と高さの半分だけ移動させて、中央に位置させます。

  • color: white;
    テキストの色を白に設定します。これにより、背景色とのコントラストが生まれ、テキストが読みやすくなります。

  • background-color: rgb(103, 103, 103, 0.6);
    背景色をグレー（RGB値が103, 103, 103）にし、透明度を0.6に設定します。これにより、半透明の背景ができます。

  • padding: 20px;
    テキストボックス内の余白を20ピクセルに設定し、内容が詰まらないようにします。

  • width: 30%;
    テキストボックスの幅を親要素の30%に設定します。これにより、画面サイズに応じて柔軟に幅が変わります。

  • border-radius: 20px;
    角を20ピクセル丸くします。ただし、次のプロパティで特定の角は丸くしないようにします。

  • border-top-right-radius: 0; border-bottom-left-radius: 0;
    右上と左下の角を丸くしない設定です。これにより、特定の角が直角になり、デザインにアクセントが生まれます。

このように、それぞれのCSSプロパティがどのように要素の表示を制御しているかを理解することで、より魅力的なWebデザインを作成することができます。CSSのスタイリングを上手に活用して、ユーザーにとって見やすく、使いやすいサイトを作りましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！


この記事が気に入ったらサポートをしてみませんか？