ga-05-n2

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

【 HTML/CSS逆引き辞典 】
レスポンシブ対応
タイトル文字の折り返し

文字は表示範囲内で自動的に折り返しすので、英文字やURL等を除いてレスポンシブ対応として気にする必要はありません。但し、タイトルは、文字の途中で折り返すと分かり難くなるので、中途半端なところで折り返さない処置が必要です。
対策は、折り返して良い範囲で区切って、spanタグで囲み、spanに[display:inline-block]と指定します。

画像

画像

【サンプル コード】
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-main-title">
    <h1>
        <span>無料で挫折させない</span>
        <span>ホームページ作成講座</span>
    </h1>
</div>
</body>
</html>
    
ワンポイント

inline-blockを指定したspanで囲むと画面が縮小した時spanの区切りで折り返す

CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
  レスポンシブ対応をしているサンプル
--====================================*/
body{
  max-width: 800px;
  margin:0 auto;
}
.f-main-title {
  background: lightcyan;
  width:auto;
  height: auto;
  text-align: center; 
  padding-top: 40px;
  padding-bottom: 40px;
}
.f-main-title h1{
  font-weight: bold;
  letter-spacing: 0.05em;
  color:midnightblue;
  font-size: 34px;
}
.f-main-title h1 span{
  display: inline-block;
}
    
ワンポイント

★f-main-title h1 span
f-main-titleのh1のspanにinline-blockを指定する。

 back
pagetop
 next

ビューポートと
メディアクエリ
の使い方

タイトル文字の
折り返し

ul、liを使った
ボックスの折り返し

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