ga-04-14

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

14.レスポンシブWebデザイン

目   次

1.レスポンシブWebデザイン

2.1カラムレイアウトの採用

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

4.タイトル文字の折り返し

5.ul、liと使ったボックスの折り返し

6.flexboxを使ったボックスの折り返し

7.floatを使ったテキストの回り込み

8.画像の縮小

9.レスポンシブWebデザインの検証



  1.レスポンシブWebデザイン

レスポンシブという用語には、敏感に反応するという意味があります。コンピュータ業界では、1つのHTMLファイルで各種端末(スマホ、タブレット、パソコン)の画面幅に応じたデザインを可能にする手法をレスポンシブWebデザインと呼んでいます。

近年は、スマホやタブレットを使う方が増えています。パソコン対応のWebでは、画面が縮小されて見ずらい、拡大すると操作性が悪くなる等の理由で見てもらうことができません。多くの方に見てもらうことは大事なことなので、スマホやタブレット対応は必須です。

本格的なレスポンシブWebデザインでは、端末によってデザインを変えるようですが、当サイトではCSSで実現できる必要最小限のレスポンシブWebデザインを取り入れています。その内容を紹介します。

【サンプル(パソコン画面)】

画像

【サンプル(スマホ画面)】

画像

  
  2.1カラムレイアウトの採用

2カラムレイアウト、3カラムレイアウトのサイドバーは、ナビゲーション項目を表示したり、ランキングやバナー広告を表示したりして大変便利なものですが、レスポンシブ対応では端末毎にデザインを変えなければならないことが出てきます。プロに頼めば難しい話では無いと思いますが初心者が取り組むには荷が重いと思います。

一方、サイドバーの無い1カラムレイアウトは、これから説明する何点かの要点を押さえればレスポンシブ対応は難しくありません。以上の理由で、当講座の「演習1」も「演習2」も1カラムレイアウトを採用しています。勿論、当サイトも1カラムレイアウトでできています。

画像

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

下段の左の図は、ビューポートとメディアクエリを指定していません。右の図は、同じHTMLファイルに次のビューポートとメディアクエリを指定したものです。

画像

A.ビューポートの指定(HTMLファイルのHEAD部)
レスポンシブ対応をする全てのHTMLファイルに指定することをお勧めします。ブラウザが端末の画面幅を読み取ってそれなりの対応をします。

        <meta name="viewport"
            content="width=device-width, initial-scale=1">
        

B.メディアクエリの指定(CSSファイル)
メディアクエリを使って本文の文字を大きくするサンプルとして提示しました。端末によって表示を変えたい所に利用できます。

          
        @media screen and (max-width: 600px) {
           .f-sub-contents {
                font-size: 150%;
            }
        }
        

  
  4.タイトル文字の折り返し

文字は表示範囲内で自動的に折り返しすので、英文字や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を指定する。

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

メインナビゲーションに箇条書き(ul、li)を使った折り返しのサンプルです。幅をautoに設定してliにinline-blockを指定しています。

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
    ul、liを使ったボックスの折り返し
=====================================-->
<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>
<!--====================================
      ナビゲーション
=====================================--> 
<nav class="f-main-navi">
    <ul class="f-main-navi-list">
        <li class="f-main-navi-item">
            ガイダンス</li>
       <li class="f-main-navi-item">
            準  備</li>
        <li class="current f-main-navi-item">
            基本の基本</li>
        <li class="f-main-navi-item">
            逆引き辞典</li>
        <li class="f-main-navi-item">
            演  習 </li>
    </ul>
</nav>
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   ul、liを使ったボックスの折り返し
--====================================*/
.f-main-navi {
  font-size: 18px;
  width: auto;
  background-color: darkblue;
}
.f-main-navi-list {
  margin: 0;
  padding: 0;
  text-align: center;
}
.f-main-navi-item {
  display: inline-block;
  padding: 10px 20px;
  color: white;
}
    
ワンポイント

★display: inline-block;
liアイテムを折り返す。
★padding: 10px 20px;
各アイテムごとに上下に10pxの余白、左右に20pxの余白を作る。

  
  6.flexboxを使ったボックスの折り返し

flexboxを使った折り返しです。演習2の「名山ギャラリー」で使用しています。

画像

画像

下段に表示される6個の写真を同一フォルダーに保存してください。

  a1.画像1(fujisan_01.jpg)

画像

  a2.画像2(fujisan-02.png)

画像

  a3.画像3(fujisan-03.jpg)

画像

  a4.画像4(fujisan-04.jpg)

画像

  a5.画像5(fujisan-05.jpg)

画像

  a6.画像6(fujisan-06.png)

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     flexboxを使ったボックスの折り返し
=====================================-->
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title> flexboxを使ったボックスの折り返し</title> 
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div class="f-page-title">    <!-- 影付き -->
    <h2>
        <span><サンプル></span><br>
        <span>1.日本一の富士山</span>
    </h2>
</div>
                <br>
<!--====================================
     ギャラリー
=====================================-->
<div class="f-container">
    <div class="f-gallery">
        <div id="f-contents01">
            <div class="f-photobox">
                <div>
                    <a href="fujisan-01.jpg" 
                    target="_blank"><img src="
                    fujisan-01.jpg" alt="写真1" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-02.png"
                     target="_blank"><img src="
                     fujisan-02.png" alt="写真2" 
                     width="200"></a>
                </div>
                <div>
                    <a href="fujisan-03.jpg" 
                    target="_blank"><img src="
                    fujisan-03.jpg" alt="写真3" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-04.jpg" 
                    target="_blank"><img src="
                    fujisan-04.jpg" alt="写真4" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-05.jpg"
                    target="_blank"><img src="
                    fujisan-05.jpg" alt="写真5" 
                    width="200"></a>
                </div>
                <div>
                    <a href="fujisan-06.png" 
                    target="_blank"><img src="
                    fujisan-06.png" alt="写真6" 
                    width="200"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--====================================
     ギャラリー 終わり
=====================================-->
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    flexboxを使ったボックスの折り返し
--====================================*/
/*--====================================
   ページのタイトル  影付き
--====================================*/
.f-page-title{ 
  font-size: 24x;
  color: darkblue;
  text-shadow: 3px 3px 5px #aaa;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}
/*--====================================
 コンテナの幅は800px固定、空きは左右均等
--====================================*/
.f-container {
  max-width: 800px;
  margin: 0 auto;
}

/* ギャラリー */
.f-gallery {
  width: 95%;
  margin: 0 auto;
}

.f-photobox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.f-photobox div {
  flex-basis: 200px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 3px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 2px #829797;
}

.f-photobox div:hover {
  background-color: skyblue;
}
    
ワンポイント

★display: flex;
親要素にflexboxであることを指定する。
★flex-wrap: wrap;
アイテムを折り返して複数行に上から下に並べる。
★justify-content: space-between;
両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置する。

ワンポイント

★flex-basis: 200px;
アイテムの基本幅を200pxに指定する。

ワンポイント

★.f-photobox div:hover {
  background-color: skyblue;}
マウスのポインタを写真の上に置いたときに背景が水色となる。

  
  7.floatを使ったテキストの回り込み

floatを使ったテキストの回り込みのサンプルです。画像は左端によって浮いた状態となっています。テキストが右に回り込んでいます。画像が切れるとテキストが画面一杯に広がります。

画像

下段に表示される1個の写真を同一フォルダーに保存してください。

  b1.画像1(fujisan_shikaku.png)

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
  floatを使ったテキストの回り込み
=====================================-->
<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="box">
    <p>
          <img src="fujisan_shikaku.png" 
               class="gazou" alt="イラスト">
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
     </p>
<div class="clear"></div>
</div>
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   floatを使ったテキストの回り込み
--====================================*/
.box{max-width:600px;
     border:solid 1px gray;
     margin:0 auto;
     font-weight: bold;
     padding: 0px 10px;
}
.gazou{width:200;
       height:200; 
       padding: 0px 20px;
       float:left;
}
.clear{
  clear: both;
}
    
ワンポイント

★float:left;
画像が左によって浮いている状態
次のブロックは、画像の右に回り込み画像が切れたところで画面一杯に広がる
★clear: both;
それまでに指定された左右両方の回り込みを解除する。FLOATを使ったときは必ず入れること。これが無いとレイアウトが崩れる。

  
  8.画像の縮小

画像のスマホ対応のサンプルです。

サンプルコードをコピー&ペーストする前に<パソコン画面>を「pasokon-fujisan.png」と名前を付けて保存してください。

ブラウザがGoogle Chromeであれば、F12キーを押すことによってスマホ対応を確認できます。

<パソコン画面> 画像


<スマホ画面>
画像

【サンプル コード】
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="d-center">
        <p class="d-img600">
            <img src="pasokon-fujisan.png" alt="画像">
        </p>
    </div>
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
      画像のスマホ対応
  画像サイスの指定(20x~800px)
--====================================*/
.d-img20 img {max-width: 20px;width: 90%;}
.d-img50 img {max-width: 50px;width: 90%;}
.d-img100 img {max-width: 100px;width: 90%;}
.d-img200 img {max-width: 200px;width: 90%;}
.d-img300 img {max-width: 300px;width: 90%;}
.d-img400 img {max-width: 400px;width: 90%;}
.d-img500 img {max-width: 500px;width: 90%;}
.d-img600 img {max-width: 600px;width: 90%;}
.d-img700 img {max-width: 700px;width: 90%;}
.d-img800 img {max-width: 800px;width: 90%;}
/*--====================================
     その他
--====================================*/
.d-center { text-align: center;}
    
ワンポイント

★width: 90%;
widthを%で指定することにより画面幅に応じた縮小がされる。

  
  9.レスポンシブWebデザインの検証

グーグルのデベロッパーツールを使ったレスポンシブWebデザインの検証です。グーグルを使っていれば何の準備もいりません。

【グーグルのデベロッパーツール画面の呼び出し】
F12キーを押すと下段右下のグーグルのデベロッパーツール画面が現れます。

画像

【グーグルのデベロッパーツールを使った検証】

画像

 back
pagetop
 back

レイアウトの基本

レスポンシブ
WEBデザイン

破綻しないための
設計手法

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