Embedded Files
前回行ったgridなどで作成した２行3列などの表を自由に位置設定をする方法について紹介します。
ポジショニングとも呼ぶべき作業ですが、これは文字や画像の配置などに応用が広いと思います。
ポジショニングの基本 widthとhight
ポジショニングの基本 widthとhight
例えば前回のgridで利用したcssに幅だけでなく高さも加えてみましょう。
.container {
width: 600px; /* 幅を600pxに設定 */
height: 100px; /* 高さを100pxに設定 */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
相対単位での指定(%)
相対単位での指定(%)
相対単位とは親(上位)で指定されたpixelの中での割合を指定できるということです。親がない場合は画面全部なので、開いているウインド幅などが基準になります。高さの場合には少し困りますが。例えば幅を50%とすると画面サイズを縮めた時に、600px指定では間隔が縮みません。
.｀
しかし、50%という相対単位での指定ではウインド幅を狭くすると間隔が縮みます。
marginによる余白の調整（枠全体をずらす)
marginによる余白の調整（枠全体をずらす)
幅や高さが決まったら今度は位置決めですね。これは余白を入れてずらします。余白にはmarginを利用しましょう。
margin-leftで左からの余白が指定できますが、margin 10px 20px 30px 40px で上、右、下、左を指定できます。
.container {
width: 20%; /* 幅を50%に設定 */
height: 150px; /* 高さを150pxに設定 */
margin-left: 200px; /* 左を50pxあげる */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
paddingで枠内の要素に余白をつける
paddingで枠内の要素に余白をつける
先のgridの例で下段だけpaddingで左に余白を50ピクセル入れてみましょう。そのコードは以下のようになります。
.container {
/* 既存のスタイルはそのまま */
width: 20%;
height: 150px;
margin-left: 0px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
/* 下段の要素（4番目、5番目、6番目）にスタイルを適用 */
.container div:nth-child(4),
.container div:nth-child(5),
.container div:nth-child(6) {
padding-left: 50px;
}
ここで、「.container div:nth-child(4)」とはcontainerの内、4 番目の要素について指定するという意味です。5,6番目の要素も同様に指定しました。
最後に「pading-left: 50px 」でずらします。
lower-rowを利用して下段だけをHTMLコードで指定しるとCSSはスッキリします。
htmlコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="241020index3x2columns_padding2.css"> </head>
</head>
<body>
<h3>2段落 2columnです。</h3>
<p>これは、3 columm x 2 lineをgridで実行した例です。<br><br>
下段だけpaddingを入れて左に余白を50ピクセル加えました。
</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="lower-row">4</div>
<div class="lower-row">5</div>
<div class="lower-row">6</div>
</div>
</body>
</html>
CSSコード
.container {
/* 既存のスタイルはそのまま */
width: 20%;
height: 150px;
margin-left: 200px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.lower-row {
padding-left: 10px;
}
プログレッシブデザインの対応
プログレッシブデザインの対応
最近ではスマホでホームページを見ることが多くなりました。その結果、プログレッシブデザインへの対応を迫られます。レイアウトも同様ですね。ここではプログレッシブデザインにmarginなどの余白をどう対処するかについて説明します。
.container {
width: 30%; /* 幅を50%に設定 */
height: 150px; /* 高さを150pxに設定 */
margin-left: 500px; /* 左を500pxあげる */
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
/* 画面幅が 768px以下の場合 */
@media (max-width: 768px) {
.container {
width: 90%;
}
}
}
テキストボックスを余白で読みやすくする
テキストボックスを余白で読みやすくする
背景色があるテキストボックスに文字を書いた場合、 余白があると読みやすくなります。
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テキスト枠の例</title>
<link rel="stylesheet" href="241028index_textbox_margin.css">
</head>
<body>
<div class="text-box">
<p>余白はwebでの文章を読みやすくするポイントです。特に背景色がある枠には余白が必要です。</p>
</div>
</body>
</html>
CSSコード
.text-box {
background-color: #b2fae3; /* 背景色 */
width: 200px;
padding: 20px; /* 内側の余白 */ 上の図ではここを 0→20に変更している。
margin-left: 30px; /* 外側の余白 */
margin-top: 20px; /* 上側の余白 */
border: 1px solid #ccc; /* 枠線 */
}
Page updated
Google Sites
Report abuse