HTMLで枠のサイズを調整するには？どの値を変更できるのか解説
HTMLの枠のサイズを変える方法を知りたい！と思っていませんか？
HTMLで作った枠のサイズが調整できれば、Webサイトのデザインの幅が広がりますよね。
今回は、HTMLの枠のサイズ変更が上手くいかない、という初心者の方のために、実際にコードを書いて説明しています。
この記事を読めば、HTMLの枠のサイズ調整が、簡単にできるようになりますよ。
ぜひ最後まで読んでくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLの枠はどうやって作るの？
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webサイトを構成するためのマークアップ言語です。
<div>要素の中身</div>のように、タグで挟むことで、要素を作成できます。
要素を囲った枠は、CSSでデザインすることで、表示できるようになります。
div {
border: solid 2px #000;
}「solid」は、実線のことで、線の見た目を指定しています。
後ろの2つは、幅とカラーコードを指定しています。
CSSでこの指定をすることにより、要素が枠で囲われました。
インライン要素でも枠の表示はされますが、サイズを指定した際に、想定通りに表示されないことがあるため、ブロックレベル要素を使う必要があります。
枠のサイズ変更はどうするの？
それでは、枠の実線が表示されている状態で、サイズ変更の仕方を見ていきましょう。
枠のサイズは、先ほどのように、CSSで指定することで変更できます。
指定できるものは、「横幅」、「高さ」、「内側の余白」、「外側の余白」の4つです。
それぞれ、以下のCSSプロパティを使います。
- width 「横幅」
- height 「高さ」
- padding 「内側の余白」
- margin 「外側の余白」
具体的なコードを説明してきましょう。
CSSファイルを作成する方法
まずは、CSSファイルを作成する方法を紹介します。
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>HTMLの枠のサイズ</title>
</head>
<body>
<div>横幅300px×高さ100px</div>
<p>横幅50%</p>
</body>CSSファイルは、以下のように記述します。
div {
border: solid 2px #000;
width: 300px;
height: 100px;
}
p {
border: solid 2px red;
width: 50%;
}style.cssファイルを作成し、外部リンクとして指定することで、スタイルを適用することができます。
CSSのdiv、pの部分をセレクタといい、スタイルを適用する要素を指定します。
今回は分かりやすくするために、枠線の色を変えています。
それぞれの要素の枠線がどう表示されるのか、確認してみてください。
HTMLのみで設定する
続いて、外部ファイルを使わずに、HTMLファイルのみで設定する方法を紹介します。
<head>
<meta charset="UTF-8">
<title>HTMLの枠のサイズ</title>
<style>
div {
border: solid 2px #000;
width: 300px;
height: 100px;
}
p {
border: solid 2px red;
width: 50%;
}
</style>
</head>
<body>
<div>横幅300px×高さ100px</div>
<p>横幅50%</p>
</body>headの中に、style要素を記述することで、CSSファイルを作るときと同様にスタイルを指定することができます。
CSSファイルを使うと複数のページで同じスタイルを適用できますが、個別のスタイルを作りたいときなどに、便利な方法です。
他に、style属性を用いて、要素のタグ内に書き込む方法があります。
<body>
<div style="border:solid 2px #000;width:300px;height:100px;">横幅300px×高さ100px</div>
<p style="border:solid 2px red;width:50%;">横幅50%</p>
</body>こちらは、簡単なチェックをしたいときなどに利用されます。
通常は、CSSファイルを利用することをおすすめします。
文字の長さに合わせるには？
横幅を数値で指定するのではなく、要素の中身の幅に合わせたいときもあるでしょう。
そういう時は、CSSプロパティのdisplayを使って実装することができます。
div{
border: solid 2px red;
display: inline-block;
}「display:inline-block;」を指定すると、要素の横幅が中の要素の幅になります。
これだけだと、中の要素ぴったりに枠線が作られてしまうので、paddingを使って、内側の余白も調整してみてくださいね。
まとめ：HTMLの枠のサイズは、「横幅」「高さ」「余白」を指定可能
今回は、HTMLを使った枠のサイズ指定について紹介しました。
横幅と高さ以外に、余白も指定できることが分かりましたね。
インライン要素では、想定通りに表示されないことがあるため、ブロックレベル要素を使用しましょう。
Webサイトを作成する際に、今回の記事が少しでも参考になれば幸いです。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
