CSSのfloatプロパティを使用した左右の配置
ボックスまたはコンテンツの配置またはフォーマットに使用されるCSSFloatプロパティを使用して、htmlの要素を整列させることができます。開発者は、CSSフロートを使用して要素を左または右に配置できます。
例
要素を整列させるためのCSSfloatプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Float</title>
<style>
.screen {
padding: 10px;
width: 70%;
margin: 0 auto;
background-color: #f06d06;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.backSeats div{
margin: 10px;
padding: 10px;
color: white;
border: 4px solid #000;
}
.backSeats div {
background-color: #4CAF50;
}
.leftFloat{
float: left;
}
.rightFloat{
float: right;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="backSeats">
<div class="leftFloat">Premium Left Seat 1</div>
<div class="leftFloat">Premium Left Seat 2</div>
<div class="rightFloat">Premium Right Seat 1</div>
</div>
</div>
</body>
</html> 出力
これにより、次の出力が生成されます-
例
要素を整列させるCSSFloatプロパティの別の例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<title> Alignment using CSS Float</title>
<style type="text/css">
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
</style></head>
<body>
<p>I love Java.</p>
<p class="noneFloat">I think C# is better.</p>
<p>Even C isn't a bad choice.</p>
<p>I agree!</p>
</body>
</html> 出力
これにより、次の出力が生成されます-
-
CSSでパーセンテージとEmの組み合わせを使用する
フォントの互換性を高めるために、パーセンテージとemの組み合わせを使用して、要素のフォントサイズを指定できます。これにより、さまざまなブラウザ間でテキストを統一できます。 構文 CSSfont-sizeプロパティの構文は次のとおりです- Selector { font-size: /*value*/ } 例 次の例は、CSSのfont-sizeプロパティをキーワード-で設定する方法を示しています。 <!DOCTYPE html> <html> <head> <style> body { fo
-
CSSのborder-colorプロパティ
CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector { border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>