ga-05-m1

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
レイアウトに欠かせない
文字及びボックスの センタリング

文字とボックスのセンタリングは、レイアウトにとって欠かせないものです。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     センタリングのサンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
   <div class="box">
          <p>これはセンタリングのサンプルです</p>
   </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    センタリングのサンプル 
--====================================*/
.box {
  height: 80px;
  width:600px;
  max-width: 100%;
  margin: 0 auto;
  background: darkblue;
}
.box p {
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}
        
ワンポイント

ボックス内のテキストは1行に限り、ボックスの高さ[height]と行の高さ[line-height]を同じにすることによって縦のセンタリングができる。  

ワンポイント

[margin: 0 auto]は、上部余白と下部余白は0で、左右の余白は均等という意味。よって、ボックスはセンタリングされる。  

ワンポイント

[text-align: center]は、テキスト及び画像をセンタリングする。  



 back
pagetop
 next

styleとclassを
組合わせて記述する
サンプル

文字及びボックスの
センタリング

外側余白(margin)と
内側余白(padding)

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken