【HTML/CSS】シンプルな角丸ボックスの描き方【ワードプレス】

本記事は、HTMLを使用してシンプルな角丸ボックスの描き方の基本的な例を示します。

CSS/HTML勉強におすすめの本

・「HTMLとCSSは少しなら分かる」という初心者〜中級者にオススメの本
・「実際にWebサイトをイチから作ってみよう」というコンセプト
・読みながら手を動かすという実習書的な要素が強い
・WEB制作の流れを掴むにはとても良い本。

リンク

シンプルな角丸ボックスの描き方例

このコードは、シンプルな角丸ボックスの描き方を作成しています。

▼こんな感じになります▼

HTMLでシンプルな角丸ボックスを作成

本例を、適切なテキストエディタで保存して、ブラウザで開くと割合付き棒グラフが表示されます。

必要に応じて、スタイルやコンテンツをカスタマイズしてください。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
  }
</style>
<title>角丸のボックス</title>
</head>
<body>
  <div class="rounded-box">
    <p>シンプルな角丸のボックス</p>
  </div>
</body>
</html>

このコードは、幅と高さが200pxの角丸のボックスを作成しています。

・background-colorはボックスの背景色
・border-radiusは角の丸み
・paddingはコンテンツとボックスの間のスペース
・text-alignはテキストを中央に配置する

ために使用されています。ボックス内には「シンプルな角丸のボックス」というテキストが含まれています。

必要に応じて、幅や高さ、色、角の丸み、スタイルをカスタマイズしてお使いください。

HTMLの基本の書き方

基本のHTMLは、HTML宣言・htmlタグ・headタグ・titleタグ・bodyタグでできています。それぞれの書き方を紹介します。

HTML宣言

HTMLファイルは、1番初めに「HTML宣言（ドキュメントタイプ宣言）」を書きます。

<!DOCTYPE html> <-- HTML宣言
<html>
<head>
  <title>ページごとの内容</title>
</head>
<body>
  内容(コンテンツ)
</body>
</html>

HTML宣言は決まり文句のようなもので、 ↑と書くことで「このファイルはHTML文書です」という宣言の役割を果たします。HTML宣言には、終了タグは不要です。

htmlタグ

HTML宣言の下に「htmlタグ」を書き、コード全体を囲みます。

<!DOCTYPE html> 
<html> <-- HTML開始タグ
<head>
  <title>ページごとの内容</title>
</head>
<body>
  内容(コンテンツ)
</body>
</html> <-- HTML終了タグ

これによって、<html></html> で囲んだ部分が「HTMLコードです」という意味になるため、HTMLファイルを作成する際は必ず書くようにします。

headタグ

「htmlタグ」の中に「headタグ」を書きます。<head></head> で囲んだheadタグの中には、そのWebページの情報や設定を書きます。

<!DOCTYPE html> 
<html> 
<head> <-- head開始タグ
  <title>ページごとの内容</title>
</head> <-- head終了タグ
<body>
  内容(コンテンツ)
</body> 
</html>

headタグの中には、文字コード・検索ページで表示される概要・CSSファイル・タイトルなどが入ります。

head内に記入した内容は、あくまでもブラウザへの情報や設定ですので、Webページの画面には表示されません。

titleタグ

headタグの見出しでも触れたとおり、「titleタグ」はWebページのタイトルを示します。

titleタグ内の文は、ページ名としてブラウザのタブ・検索エンジン・SNSなどに表示されます。

<!DOCTYPE html> 
<html> 
<head> 
  <title> <-- title開始タグ
   ページごとの内容
  </title> <-- title終了タグ
</head>
<body>
  内容(コンテンツ)
</body> 
</html>

bodyタグ

「headタグ」の下に「bodyタグ」を書きます。<body></body> に囲まれた部分が、実際のWebページの画面に表示されます。

<!DOCTYPE html> 
<html> 
<head> 
  <title>ページごとの内容</title> 
</head>
<body> <-- body開始タグ
  内容(コンテンツ)
</body> <-- body終了タグ
</html>

プログラミング自習に最適な教本