ga-05-h2

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

【 HTML/CSS逆引き辞典 】
背景画像にタイトルの貼り付け

メインタイトル等に使える背景画像とタイトルの貼り付けサンプルです。画像の大きさは、画面の大きさに応じて拡大・縮小されます。タイトルの文字の大きさも画面幅が600px以下では小さくなります。ブラウザの幅を小さくすることで確認できます。

【サンプル画像】

画像

サンプルコードをコピー&ペーストする前に下段の画像を同じフォルダーに名前(mountain-01.jpg)を付けて保存してください。保存の方法は、画像の上にカーソルを置いて右クリックし、「名前を付けて画像を保存」を選択します。

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
    背景画像&タイトル表示
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>

<div class="f-gazo-box" 
     style=" background: url(mountain-01.jpg)
             no-repeat;
             background-size: cover">
    <div class="f-gazo-box-title">
        <span>生涯かけて歩きたい</span>
        <span>山好きのホームページ</span>
    </div>
</div>
</body>
</html>
        
ワンポイント

meta name="viewport"
レスポンシブ対応のための定義。

 
ワンポイント

background: url(mountain-01.jpg)
背景画像にmountain-01.jpgを表示する。
background-size: cover
元画像の縦横比は保持して、要素をちょうどよく覆うサイズにする

 
 
CSSコード(style-1.css)
/*=====================================
  背景画像に文字を重ねる(レスポンシブ)
--====================================*/
@charset "utf-8";
/*--====================================
      BODY(画面幅設定) 
--====================================*/
body {
   max-width: 800px; 
      /*ページの幅 800px以上に広がらない*/
   width: 100%; 
      /*ページの幅 画面に応じて縮小する*/
   margin: 0 auto;  
      /*ページの表示 センター*/
}
/*=====================================
  背景画像に文字を重ねる(レスポンシブ)
--====================================*/
.f-gazo-box {
  width: 100%;
  padding-top: 66.6%;
  position: relative;
  top: 0;
  left: 0;
}
.f-gazo-box .f-gazo-box-title {
  position: absolute;
  top: 10%;
  width: 100%;
  font-size: 46px;
  line-height: 1.5em;
  letter-spacing:0.2em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
/* SP向けの設定 */
@media screen and (max-width: 600px) {
  .f-gazo-box .f-gazo-box-title {
   font-size: 32px;
   letter-spacing:0.0em;
  }
}
.f-gazo-box span{
  display:inline-block;
}
        
ワンポイント

padding-top: 66.6%;
「background」では、高さは固定値しか指定できない。高さは横幅との割合で決まるので、レスポンシブ対応のため、「padding-top」に横幅に対する高さの割合を指定する。

ワンポイント

@media screen and (max-width: 600px)
スマホ対応として、横幅600px以下の画面では、文字の大きさと文字間隔を小さくしている。

 back
pagetop
 next

画像の貼り付け
縮小・拡大

背景画像にタイトルの
貼り付け

画像に枠線・額縁
を付ける

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