レイアウトを簡単に

画像の上に中央揃えで文字列を配置する方法-CSS-

 /

ヘッダーを好きなところに配置する

ウェブサイトを作成し始めると、ヘッダー画像の上に文字列を中央に配置したいなと思うときがあります。しかもすぐに…。

ここでは画像の上にmarginとalignで文字列を配置調整するのではなく、positionプロパティとtransformプロパティで要素を思いのままに配置する方法を解説します。

親要素の中央配置

配置を検証するにあたり、下記のように準備します

要素 名称 備考
親要素 parentbox 画像(背景画像)
子要素 childbox 枠線(白)
文字列 h1 白文字
※子要素の枠線はわかりやすく表示するためでもあります。

親要素の上に子要素を配置するhtml

html
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="contents">
<div class="parentbox">
<img src="picture/goethe760.jpg" width="800" height="500" alt="";>
<div class="childbox">
<h1>ゲーテは言った…</h1>
</div>
</div>
</div>

positionプロパティを使って、親要素parentboxにchildboxを配置します。

sample.css
.parentbox {position: relative;
                 margin: 0 auto; /*領域がセンターへ*/
                 text-align: center; /*要素がセンターへ*/
                 width:1200px;
                 height: 550px                 
               } 

.childbox {
                 position: absolute;
                 padding: 10px;
                 width: 400px;
                 height: auto;
                 border: solid 5px #fff;
                 text-align: center; /*文字列の中央揃え*/
                } 

h1 {
                 display: inline-block; /*折返したら左揃え*/
                 text-align: left;
                 color: #fff
               }

positionプロパティの基準点

positionプロパティの基準点は左上です。位置を指定していないので左上に子要素がきています。

子要素の位置を移動させるには、childboxにオフセットプロパティ(top、left、right、bottom)で位置指定します。

positionプロパティの値
static 初期値
relative 基準位置からの相対位置
absolute 親要素の左上を基点とした絶対位置
fixed 固定位置
※staticには位置指定オフセットプロパティは利きません。
オフセットプロパティ
top 基準点(左上)から数値移動
left 基準点(左)から数値移動
right 基準点(右)から数値移動
bottom 基準点(下)から数値移動

オフセットプロパティで位置指定

.childbox {/* 省略 */
                text-align: center; /*文字列の中央揃え*/
                top: 50%;
                left: 50%
                }
              /* 以下省略 */
              

上記追記し、基準点より上から50%、左から50%右へ移動させます。

子要素childboxの左上が親要素(画像)の中央にきました。

transformプロパティ

オフセットプロパティ(top、left)の下にtransformプロパティを下記のように記入し移動させます。

.childbox {/* 省略 */
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
  }
/* 以下省略 */
※h1に直接指定してしまうとh1高さを考慮する必要がでてしまうためやりません。
transformに指定できる関数
関数名 動き
translate 移動
rotate 回転
scale 伸縮率
skew 傾斜
どうしてこうなる?
画面いっぱいに画像をひろげ、文字列を中央に配置

応用:トップバナー(背景画像)に文字をのせる

完成系のイメージ
参考画像
 

横幅いっぱいの画像の中央に文字列配置

html
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="contents">
<div class="parentbox">
<div class="childbox">
<h1>ゲーテは言った…真の知識は、経験あるのみだと</h1>
</div>
</div>
</div>
横幅いっぱいの画像の上にヘッダーを中央に配置するCSS
sample.css
.contents {
            background: #ccc;
            background-image: url(picture/goethe760.jpg);
            background-repeat: no-repeat;
            background-size: cover 
               }
               
    .parentbox {
            position: relative;
            margin: 0 auto;
            width:800px;
            height: 500px;
            text-align: center
               }
               
    .childbox {
            position: absolute;
            padding: 10px;
            width: 400px;
            height: auto;
            border: solid 5px #fff;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
               }
               
    h1 {
             display: inline-block;
             text-align: left;
             color: #fff
               }
              

まとめ

簡単に画像の上に文字列を中央配置できたと思います。

もちろん短い文字列は中央に、長い文字列は左揃えで折り返されていると思います。( ´ ▽ ` )ノ

【関連記事】短い文字列は中央寄せ・折り返したら左揃えする方法

PR
高速レンタルサーバー

成約率アップはサイト表示速度が重要ですよ。業界最速サーバーはこちら ↓

関連記事
PC(CSS)
preによるソースコードがはみ出す時の修正方法

preタグをきちんと整形をする方法

レスポンシブデザインのpre要素(Hilight.js)が折り返されない、改行されない場合の対処法を解説します。

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(HP)
Googleアドセンスを中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

画像の遅延読み込み実装でサイト表示高速化

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

TOP