Bootstrapのテンプレートを使用してホームページ作成

OS/ミドルウェア	バージョン
CentOS	7.2.1511
Apache	2.4.6
PHP	7.0.28

https://github.com/BlackrockDigital/startbootstrap-agency.git

1	https://github.com/BlackrockDigital/startbootstrap-agency.git

$ git clone https://github.com/BlackrockDigital/startbootstrap-agency.git

1	$ git clone https://github.com/BlackrockDigital/startbootstrap-agency.git

Cloning into 'startbootstrap-agency'...
remote: Counting objects: 3278, done.
remote: Total 3278 (delta 0), reused 0 (delta 0), pack-reused 3278
Receiving objects: 100% (3278/3278), 12.61 MiB | 6.26 MiB/s, done.
Resolving deltas: 100% (828/828), done.

1

2

3

4

5

Cloning into 'startbootstrap-agency'...

remote: Counting objects: 3278, done.

remote: Total 3278 (delta 0), reused 0 (delta 0), pack-reused 3278

Receiving objects: 100% (3278/3278), 12.61 MiB | 6.26 MiB/s, done.

Resolving deltas: 100% (828/828), done.

$ ls -al

1

$ ls -al

total 12
drwxrwxr-x  3 ユーザ名 ユーザ名 4096 Mar 10 17:54 .
drwxr-xr-x 23 ユーザ名 uchida 4096 Mar 10 17:53 ..
drwxrwxr-x  9 ユーザ名 ユーザ名 4096 Mar 10 17:54 startbootstrap-agency

1

2

3

4

total 12

drwxrwxr-x 3 ユーザ名ユーザ名 4096 Mar 10 17:54 .

drwxr-xr-x 23 ユーザ名 uchida 4096 Mar 10 17:53 ..

drwxrwxr-x 9 ユーザ名ユーザ名 4096 Mar 10 17:54 startbootstrap-agency

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Agency - Start Bootstrap Theme</title>

    ︙
    
  </head>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<head>

<title>Agency - Start Bootstrap Theme</title>

︙

</head>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    // 修正
    <meta name="description" content="GROW-UP オフィシャルWEBサイト">
    // 追加
    <meta name="keywords" content="GROW-UP,grow-up,グロォゥアップ,グローアップ,FACTORY,factory,ファクトリー,GROW-UP株式会社,株式会社GROW-UP">
    // 修正
    <meta name="author" content="samancha">
    // 修正
    <title>GROW-UPホームページ</title>

    ︙
    
  </head>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<head>

// 修正

// 追加

// 修正

// 修正

<title>GROW-UPホームページ</title>

︙

</head>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#services">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#team">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!DOCTYPE html>

<head>

︙

</head>

<a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>

Menu

</button>

<a class="nav-link js-scroll-trigger" href="#services">Services</a>

</li>

<a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>

</li>

<a class="nav-link js-scroll-trigger" href="#about">About</a>

</li>

</li>

<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        // 修正
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Tanaka Automobile</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#services">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#team">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<!DOCTYPE html>

<head>

︙

</head>

// 修正

<a class="navbar-brand js-scroll-trigger" href="#page-top">Tanaka Automobile</a>

Menu

</button>

<a class="nav-link js-scroll-trigger" href="#services">Services</a>

</li>

<a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>

</li>

<a class="nav-link js-scroll-trigger" href="#about">About</a>

</li>

</li>

<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Welcome To Our Studio!</div>
          <div class="intro-heading text-uppercase">It's Nice To Meet You</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
        </div>
      </div>
    </header>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

<div class="intro-lead-in">Welcome To Our Studio!</div>

</div>

</header>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">
      <div class="container">
        <div class="intro-text">
          // 修正
          <div class="intro-lead-in">Welcome To Our Garages!</div>
          <div class="intro-heading text-uppercase">It's Nice To Meet You</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
        </div>
      </div>
    </header>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

// 修正

<div class="intro-lead-in">Welcome To Our Garages!</div>

</div>

</header>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>
    
    <!-- Services -->
    <section id="services">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Services</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row text-center">
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">E-Commerce</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Responsive Design</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Web Security</h4>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

<h2 class="section-heading text-uppercase">Services</h2>

<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>

</div>

</span>

<h4 class="service-heading">E-Commerce</h4>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>

</div>

</span>

<h4 class="service-heading">Responsive Design</h4>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>

</div>

</span>

<h4 class="service-heading">Web Security</h4>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>

</div>

</section>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Services</h2>
            // 修正
            <h3 class="section-subheading text-muted">自動車・バイクの性能が向上し、故障を改善します。</h3>
          </div>
        </div>
        <div class="row text-center">
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 修正
              <i class="fa fa-car fa-stack-1x fa-inverse"></i>
            </span>
　　　　　　　　　　　　　　　　　　　　　　　　// 修正
            <h4 class="service-heading">車の販売・買取・整備</h4>
　　　　　　　　　　　　　　　　　　　　　　　　// 修正
            <p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを
お受けします。</p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 修正
              <i class="fa fa-truck fa-stack-1x fa-inverse"></i>
            </span>
　　　　　　　　　　　　　　　　　　　　　　　　// 修正
            <h4 class="service-heading">トラックの販売・買取・整備</h4>
　　　　　　　　　　　　　　　　　　　　　　　　// 修正
            <p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを
お受けします。</p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 修正
              <i class="fa fa-motorcycle fa-stack-1x fa-inverse"></i>
            </span>
　　　　　　　　　　　　　　　　　　　　　　　　// 修正
            <h4 class="service-heading">バイクの販売・買取・整備</h4>
　　　　　　　　　　　　　　　　　　　　　　　　// 修正
            <p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを
お受けします。</p>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

<h2 class="section-heading text-uppercase">Services</h2>

// 修正

<h3 class="section-subheading text-muted">自動車・バイクの性能が向上し、故障を改善します。</h3>

</div>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 修正

</span>

　　　　　　　　　　　　　　　　　　　　　　　　// 修正

　　　　　　　　　　　　　　　　　　　　　　　　// 修正

<p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを

お受けします。</p>

</div>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 修正

</span>

　　　　　　　　　　　　　　　　　　　　　　　　// 修正

<h4 class="service-heading">トラックの販売・買取・整備</h4>

　　　　　　　　　　　　　　　　　　　　　　　　// 修正

<p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを

お受けします。</p>

</div>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 修正

</span>

　　　　　　　　　　　　　　　　　　　　　　　　// 修正

<h4 class="service-heading">バイクの販売・買取・整備</h4>

　　　　　　　　　　　　　　　　　　　　　　　　// 修正

<p class="text-muted">どんな車種でも販売・買取・整備致します。車検、定期点検、一般整備、板金・塗装など様々なことを

お受けします。</p>

</div>

</section>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Portfolio</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Threads</h4>
              <p class="text-muted">Illustration</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Explore</h4>
              <p class="text-muted">Graphic Design</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Finish</h4>
              <p class="text-muted">Identity</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Lines</h4>
              <p class="text-muted">Branding</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Southwest</h4>
              <p class="text-muted">Website Design</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              <h4>Window</h4>
              <p class="text-muted">Photography</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

<h2 class="section-heading text-uppercase">Portfolio</h2>

<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>

</div>

</div>

</a>

<h4>Threads</h4>

<p class="text-muted">Illustration</p>

</div>

</div>

</a>

<h4>Explore</h4>

<p class="text-muted">Graphic Design</p>

</div>

</div>

</a>

<h4>Finish</h4>

<p class="text-muted">Identity</p>

</div>

</div>

</a>

<h4>Lines</h4>

<p class="text-muted">Branding</p>

</div>

</div>

</a>

<h4>Southwest</h4>

<p class="text-muted">Website Design</p>

</div>

</div>

</a>

<h4>Window</h4>

<p class="text-muted">Photography</p>

</div>

</section>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            // 修正
            <h2 class="section-heading text-uppercase">Information</h2>
            // 修正
            <h3 class="section-subheading text-muted">様々な情報を提示し、最新の情報にアップデートします。</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/01-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              // 修正
              <h4>販売</h4>
              // 修正
              <p class="text-muted">商品を売る。</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/02-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              // 修正
              <h4>買取</h4>
              // 修正
              <p class="text-muted">購入したり、下取りしたりする。</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal3">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/03-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              // 修正
              <h4>車検</h4>
              // 修正
              <p class="text-muted">自動車の検査。</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal4">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/04-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              // 修正
              <h4>定期点検</h4>
              // 修正
              <p class="text-muted">事前に点検・整備する。</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/05-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              // 修正
              <h4>一般整備</h4>
              // 修正
              <p class="text-muted">オイル交換やタイヤ交換など…</p>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" data-toggle="modal" href="#portfolioModal6">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/portfolio/06-thumbnail.jpg" alt="">
            </a>
            <div class="portfolio-caption">
              // 修正
              <h4>板金・塗装</h4>
              // 修正
              <p class="text-muted">修理・再生する作業。</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

// 修正

<h2 class="section-heading text-uppercase">Information</h2>

// 修正

<h3 class="section-subheading text-muted">様々な情報を提示し、最新の情報にアップデートします。</h3>

</div>

</div>

</a>

// 修正

// 修正

<p class="text-muted">商品を売る。</p>

</div>

</div>

</a>

// 修正

// 修正

<p class="text-muted">購入したり、下取りしたりする。</p>

</div>

</div>

</a>

// 修正

// 修正

<p class="text-muted">自動車の検査。</p>

</div>

</div>

</a>

// 修正

// 修正

<p class="text-muted">事前に点検・整備する。</p>

</div>

</div>

</a>

// 修正

// 修正

<p class="text-muted">オイル交換やタイヤ交換など…</p>

</div>

</div>

</a>

// 修正

// 修正

<p class="text-muted">修理・再生する作業。</p>

</div>

</section>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">About</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul class="timeline">
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>2009-2011</h4>
                    <h4 class="subheading">Our Humble Beginnings</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/2.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>March 2011</h4>
                    <h4 class="subheading">An Agency is Born</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>December 2012</h4>
                    <h4 class="subheading">Transition to Full Service</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>December 2012</h4>
                    <h4 class="subheading">Transition to Full Service</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/4.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>July 2014</h4>
                    <h4 class="subheading">Phase Two Expansion</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <h4>Be Part
                    <br>Of Our
                    <br>Story!</h4>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

<h2 class="section-heading text-uppercase">About</h2>

<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>

</div>

<li>

</div>

<h4 class="subheading">Our Humble Beginnings</h4>

</div>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>

</div>

</li>

</div>

<h4>March 2011</h4>

<h4 class="subheading">An Agency is Born</h4>

</div>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>

</div>

</li>

<li>

</div>

<h4>December 2012</h4>

<h4 class="subheading">Transition to Full Service</h4>

</div>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>

</div>

</li>

<li>

</div>

<h4>December 2012</h4>

<h4 class="subheading">Transition to Full Service</h4>

</div>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>

</div>

</li>

</div>

<h4 class="subheading">Phase Two Expansion</h4>

</div>

<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>

</div>

</li>

<h4>Be Part

<br>Of Our

<br>Story!</h4>

</div>

</li>

</ul>

</div>

</section>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">About</h2>
            // 修正
            <h3 class="section-subheading text-muted">私達の歴史について</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul class="timeline">
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
　　　　　　　　　　　　　　　　　　　           // 修正
                    <h4>2018年2月</h4>
　　　　　　　　　　　　　　　　　　　           // 修正
                    <h4 class="subheading">私たちの謙虚な始まり</h4>
                  </div>
                  <div class="timeline-body">
　　　　　　　　　　　　　　　　　　　           // 修正
                    <p class="text-muted">整備工場で働いて約10年が経った頃…ある友人から独立してみないか？という誘いがあっ
た。それをきっかけに話をしている内に、ついに実現することが出来たのです。まずは、一歩前進です。</p>
                  </div>
                </div>
              </li>
              // コメントアウト
              <!-- <li class="timeline-inverted">

                ︙

              </li> -->
              <li class="timeline-inverted">

                ︙

              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

<h2 class="section-heading text-uppercase">About</h2>

// 修正

<h3 class="section-subheading text-muted">私達の歴史について</h3>

</div>

<li>

</div>

　　　　　　　　　　　　　　　　　　　 // 修正

　　　　　　　　　　　　　　　　　　　 // 修正

<h4 class="subheading">私たちの謙虚な始まり</h4>

</div>

　　　　　　　　　　　　　　　　　　　 // 修正

<p class="text-muted">整備工場で働いて約10年が経った頃…ある友人から独立してみないか？という誘いがあっ

た。それをきっかけに話をしている内に、ついに実現することが出来たのです。まずは、一歩前進です。</p>

</div>

</li>

// コメントアウト

<!-- <li class="timeline-inverted">

︙

</li> -->

︙

</li>

</ul>

</div>

</section>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Our Amazing Team</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt="">
              <h4>Kay Garland</h4>
              <p class="text-muted">Lead Designer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt="">
              <h4>Larry Parker</h4>
              <p class="text-muted">Lead Marketer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt="">
              <h4>Diana Pertersen</h4>
              <p class="text-muted">Lead Developer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8 mx-auto text-center">
            <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

<h2 class="section-heading text-uppercase">Our Amazing Team</h2>

<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>

</div>

<h4>Kay Garland</h4>

<p class="text-muted">Lead Designer</p>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

<h4>Larry Parker</h4>

<p class="text-muted">Lead Marketer</p>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

<h4>Diana Pertersen</h4>

<p class="text-muted">Lead Developer</p>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

<p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>

</div>

</section>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Our Amazing Team</h2>
            // 修正
            <h3 class="section-subheading text-muted">最高のメンバー達です。</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt="">
              // 修正
              <h4>Teruki Tanaka</h4>
              // 修正
              <p class="text-muted">社長-整備士</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  // 修正
                  <a href="https://www.facebook.com/profile.php?id=100004262675236">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt="">
              // 修正
              <h4>Makoto Yao</h4>
              // 修正
              <p class="text-muted">営業-整備士</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  // 修正
                  <a href="https://www.facebook.com/profile.php?id=100002680991384">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt="">
              // 修正
              <h4>Samancha</h4>
              // 修正
              <p class="text-muted">システムエンジニア</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  // 修正
                  <a href="https://twitter.com/hjFGlLb8yjtrGNg?lang=ja">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  // 修正
                  <a href="https://www.facebook.com/profile.php?id=100003192819335">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8 mx-auto text-center">
            // 修正
            <p class="large text-muted">メンバー全員が整備経験があり、整備は勿論のこと営業マンだったり、システム>エンジニアだったり２つの能力を持っているので、頼もしいメンバーです。</p>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

<h2 class="section-heading text-uppercase">Our Amazing Team</h2>

// 修正

<h3 class="section-subheading text-muted">最高のメンバー達です。</h3>

</div>

// 修正

<h4>Teruki Tanaka</h4>

// 修正

</a>

</li>

// 修正

</a>

</li>

</a>

</li>

</ul>

</div>

// 修正

<h4>Makoto Yao</h4>

// 修正

</a>

</li>

// 修正

</a>

</li>

</a>

</li>

</ul>

</div>

// 修正

<h4>Samancha</h4>

// 修正

<p class="text-muted">システムエンジニア</p>

// 修正

</a>

</li>

// 修正

</a>

</li>

</a>

</li>

</ul>

</div>

// 修正

<p class="large text-muted">メンバー全員が整備経験があり、整備は勿論のこと営業マンだったり、システム>エンジニアだったり２つの能力を持っているので、頼もしいメンバーです。</p>

</div>

</section>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <section class="py-5">

      ︙

    </section>

    <!-- Contact -->
    <section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Contact Us</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <form id="contactForm" name="sentMessage" novalidate>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="Please enter your name.">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="Please enter your email address.">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required data-validation-required-message="Please enter your phone number.">
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="Please enter a message."></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <div id="success"></div>
                  <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<h2 class="section-heading text-uppercase">Contact Us</h2>

<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>

</div>

</div>

</div>

</div>

</div>

<button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>

</div>

</form>

</div>

</section>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <section class="py-5">

      ︙

    </section>

    <!-- Contact -->
    <section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            // 修正
            <h2 class="section-heading text-uppercase">Contact</h2>
            // 修正
            <h3 class="section-subheading text-muted">お問い合わせフォーム</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <form id="contactForm" name="sentMessage" novalidate>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    // 修正
                    <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="あなたの名前を入力してください。">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    // 修正
                    <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="メールアドレスを入力してください。">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    // 修正
                    <input class="form-control" id="phone" type="tel" placeholder="Your Phone *" required data-validation-required-message="電話番号を入力してください。">
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    // 修正
                    <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="メッセージを入力してください。"></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <div id="success"></div>
                  <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

// 修正

<h2 class="section-heading text-uppercase">Contact</h2>

// 修正

<h3 class="section-subheading text-muted">お問い合わせフォーム</h3>

</div>

// 修正

</div>

// 修正

</div>

// 修正

</div>

// 修正

</div>

<button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>

</div>

</form>

</div>

</section>

︙

$ vi index.html

1	$ vi index.html

$(function() {

  $("#contactForm input,#contactForm textarea").jqBootstrapValidation({

    ︙

        success: function() {
          // Success message
          $('#success').html("<div class='alert alert-success'>");
          $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
            .append("</button>");
          $('#success > .alert-success')
            .append("<strong>Your message has been sent. </strong>");
          $('#success > .alert-success')
            .append('</div>');
          //clear all fields
          $('#contactForm').trigger("reset");
        },
        ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$(function() {

$("#contactForm input,#contactForm textarea").jqBootstrapValidation({

︙

success: function() {

// Success message

$('#success').html("<div class='alert alert-success'>");

$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")

.append("</button>");

$('#success > .alert-success')

.append("<strong>Your message has been sent. </strong>");

$('#success > .alert-success')

.append('</div>');

//clear all fields

$('#contactForm').trigger("reset");

},

︙

$(function() {

  $("#contactForm input,#contactForm textarea").jqBootstrapValidation({

    ︙

        success: function() {
          // Success message
          $('#success').html("<div class='alert alert-success'>");
          $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
            .append("</button>");
          $('#success > .alert-success')
            // 修正
            .append("<strong>あなたのメッセージは送信されました。</strong>");
          $('#success > .alert-success')
            .append('</div>');
          //clear all fields
          $('#contactForm').trigger("reset");
        },
        ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$(function() {

$("#contactForm input,#contactForm textarea").jqBootstrapValidation({

︙

success: function() {

// Success message

$('#success').html("<div class='alert alert-success'>");

$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")

.append("</button>");

$('#success > .alert-success')

// 修正

.append("<strong>あなたのメッセージは送信されました。</strong>");

$('#success > .alert-success')

.append('</div>');

//clear all fields

$('#contactForm').trigger("reset");

},

︙

$ vi index.html

1	$ vi index.html

<?php
// Check for empty fields
if(empty($_POST['name'])      ||
   empty($_POST['email'])     ||
   empty($_POST['phone'])     ||
   empty($_POST['message'])   ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
   echo "No arguments Provided!";
   return false;
   }
   
$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
   
// Create the email and send the message
$to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form:  $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";   
mail($to,$email_subject,$email_body,$headers);
return true;         
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<?php

// Check for empty fields

if(empty($_POST['name']) ||

empty($_POST['email']) ||

empty($_POST['phone']) ||

empty($_POST['message']) ||

!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))

{

echo "No arguments Provided!";

return false;

}

$name = strip_tags(htmlspecialchars($_POST['name']));

$email_address = strip_tags(htmlspecialchars($_POST['email']));

$phone = strip_tags(htmlspecialchars($_POST['phone']));

$message = strip_tags(htmlspecialchars($_POST['message']));

// Create the email and send the message

$to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.

$email_subject = "Website Contact Form: $name";

$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";

$headers = "From: noreply@yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.

$headers .= "Reply-To: $email_address";

mail($to,$email_subject,$email_body,$headers);

return true;

?>

<?php
// Check for empty fields
if(empty($_POST['name'])      ||
   empty($_POST['email'])     ||
   empty($_POST['phone'])     ||
   empty($_POST['message'])   ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
   echo "No arguments Provided!";
   return false;
   }

$name = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));

// Create the email and send the message
// 修正
$to = '☓☓☓@yahoo.co.jp'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
// 修正
$email_subject = "ウェブサイトお問い合わせフォーム Form:  $name";
// 修正
$email_body = "あなたのウェブサイトの連絡フォームから新しいメッセージを受け取りました。\n\n"."＝＝＝＝＝＝＝＝＝>＝＝＝:\n\nお名前: $name\n\nメールアドレス: $email_address\n\n電話番号: $phone\n\nメッセージ:\n$message";
// 修正
$headers = "From: ☓☓☓@yahoo.co.jp\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<?php

// Check for empty fields

if(empty($_POST['name']) ||

empty($_POST['email']) ||

empty($_POST['phone']) ||

empty($_POST['message']) ||

!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))

{

echo "No arguments Provided!";

return false;

}

$name = strip_tags(htmlspecialchars($_POST['name']));

$email_address = strip_tags(htmlspecialchars($_POST['email']));

$phone = strip_tags(htmlspecialchars($_POST['phone']));

$message = strip_tags(htmlspecialchars($_POST['message']));

// Create the email and send the message

// 修正

$to = '☓☓☓@yahoo.co.jp'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.

// 修正

$email_subject = "ウェブサイトお問い合わせフォーム Form: $name";

// 修正

$email_body = "あなたのウェブサイトの連絡フォームから新しいメッセージを受け取りました。\n\n"."＝＝＝＝＝＝＝＝＝>＝＝＝:\n\nお名前: $name\n\nメールアドレス: $email_address\n\n電話番号: $phone\n\nメッセージ:\n$message";

// 修正

$headers = "From: ☓☓☓@yahoo.co.jp\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.

$headers .= "Reply-To: $email_address";

mail($to,$email_subject,$email_body,$headers);

return true;

?>

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>
    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <section class="py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</section>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">GROW-UP FACTORY</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#services">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Information</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#team">Team</a>
            </li>
            // 追加
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#access">Access</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
    </section> -->

    // 追加
    <!-- Access -->
    <section id="access">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Access</h2>
            <h3 class="section-subheading text-muted">GROW-UP FACTORYの所在地</h3>
          </div>
          <div class="col-lg-12 text-center googlemap">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.0675828398744!2d139.14966321561036!3d36.18923818007907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601ec3bcbaad25fb%3A0xc01cd9a62e9a00fb!2z44CSMzY3LTAyMTIg5Z-8546J55yM5pys5bqE5biC5YWQ546J55S65YWQ546J77yR77yW77yV77yS!5e0!3m2!1sja!2sjp!4v1521423549462" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </section>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!DOCTYPE html>

<head>

︙

</head>

<a class="navbar-brand js-scroll-trigger" href="#page-top">GROW-UP FACTORY</a>

Menu

</button>

<a class="nav-link js-scroll-trigger" href="#services">Services</a>

</li>

<a class="nav-link js-scroll-trigger" href="#portfolio">Information</a>

</li>

<a class="nav-link js-scroll-trigger" href="#about">About</a>

</li>

</li>

// 追加

<a class="nav-link js-scroll-trigger" href="#access">Access</a>

</li>

<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</section> -->

// 追加

<h2 class="section-heading text-uppercase">Access</h2>

<h3 class="section-subheading text-muted">GROW-UP FACTORYの所在地</h3>

</div>

</div>

</section>

︙

$ cd scss/

1	$ cd scss/

$ touch _access.scss

1	$ touch _access.scss

$ chmod 775 _access.scss

1	$ chmod 775 _access.scss

$ vi _access.scss

1	$ vi _access.scss

// Styling for the access
section#access .container .row div.googlemap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

section#access .container .row div.googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// Styling for the access

section#access .container .row div.googlemap {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

section#access .container .row div.googlemap iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

// Core variables and mixins
@import "variables.scss";
@import "mixins.scss";
// Global CSS
@import "global.scss";
// Components
@import "navbar.scss";
@import "masthead.scss";
@import "services.scss";
@import "portfolio.scss";
@import "timeline.scss";
@import "team.scss";
// 追加
@import "access.scss";
@import "contact.scss";
@import "footer.scss";

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// Core variables and mixins

@import "variables.scss";

@import "mixins.scss";

// Global CSS

@import "global.scss";

// Components

@import "navbar.scss";

@import "masthead.scss";

@import "services.scss";

@import "portfolio.scss";

@import "timeline.scss";

@import "team.scss";

// 追加

@import "access.scss";

@import "contact.scss";

@import "footer.scss";

$ cd ../css/

1	$ cd ../css/

$ vi agency.css

1	$ vi agency.css

// 追加
section#access .container .row div.googlemap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

// 追加
section#access .container .row div.googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// 追加

section#access .container .row div.googlemap {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

// 追加

section#access .container .row div.googlemap iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

$ vi agency.min.css

1	$ vi agency.min.css

// 追加
section#access .container .row div.googlemap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}section#access .container .row div.googlemap iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;}

1 2	// 追加 section#access .container .row div.googlemap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}section#access .container .row div.googlemap iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;}

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Project Name</h2>
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                  <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Threads</li>
                    <li>Category: Illustration</li>
                  </ul>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

</div>

<h2 class="text-uppercase">Project Name</h2>

<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>

<li>Date: January 2017</li>

<li>Client: Threads</li>

<li>Category: Illustration</li>

</ul>

Close Project</button>

</div>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  // 修正
                  <h2 class="text-uppercase">販売</h2>
                  // 修正
                  <p class="item-intro text-muted">車両販売に関しての流れを記載します。</p>
                  // ▼ 追加 ▼
                  <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>説明</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                          <td>車両の特定</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td>⬇</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>具体的な内容の取り決め</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td>⬇</td>
                        </tr>
                        <tr>
                          <td>3</td>
                          <td>見積り</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td>⬇</td>
                        </tr>
                        <tr>
                          <td>4</td>
                          <td>車両決定</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td>⬇</td>
                        </tr>
                        <tr>
                          <td>5</td>
                          <td>車両点検</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td>⬇</td>
                        </tr>
                        <tr>
                          <td>6</td>
                          <td>納車</td>
                        </tr>
                      </tbody>
                  </table>
                  // ▲ 追加 ▲
                  // コメントアウト
                  <!--<img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">-->
                  // 修正
                  <p>車両によって納車のタイミングは異なります。ですが、お客様の要望になるべく応えるように努力する
次第であります。何卒ご理解の上よろしくお願い致します。</p>
                  // ▼ コメントアウト ▼
                  <!-- <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Threads</li>
                    <li>Category: Illustration</li>
                  </ul> -->
                  // ▲ コメントアウト ▲
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

</div>

// 修正

// 修正

<p class="item-intro text-muted">車両販売に関しての流れを記載します。</p>

// ▼ 追加 ▼

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>車両の特定</td>

</tr>

<tr>

</tr>

<tr>

<td>具体的な内容の取り決め</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

// ▲ 追加 ▲

// コメントアウト

// 修正

<p>車両によって納車のタイミングは異なります。ですが、お客様の要望になるべく応えるように努力する

次第であります。何卒ご理解の上よろしくお願い致します。</p>

// ▼ コメントアウト ▼

<!-- <ul class="list-inline">

<li>Date: January 2017</li>

<li>Client: Threads</li>

<li>Category: Illustration</li>

</ul> -->

// ▲ コメントアウト ▲

Close Project</button>

</div>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">

      ︙

    </div>

    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Project Name</h2>
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/02-full.jpg" alt="">
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                  <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Explore</li>
                    <li>Category: Graphic Design</li>
                  </ul>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

</div>

<h2 class="text-uppercase">Project Name</h2>

<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>

<li>Date: January 2017</li>

<li>Client: Explore</li>

<li>Category: Graphic Design</li>

</ul>

Close Project</button>

</div>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">

      ︙
        
    </div>

    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  // 修正
                  <h2 class="text-uppercase">買取</h2>
                  // 修正
                  <p class="item-intro text-muted">車両買取に関しての流れを記載します。</p>
                  // ▼ 追加 ▼
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>説明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>車両の確認</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td>⬇</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>見積り</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td>⬇</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>買取</td>
                      </tr>
                    </tbody>
                  </table>
                  // ▲ 追加 ▲
                  // コメントアウト
                  <!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/02-full.jpg" alt=""> -->
                  // 修正
                  <p>車両によって値段は様々になります。また、値段がつかない場合もございますがご了承下さい。(下取>りに関しても同様になります)</p>
                  // ▼ コメントアウト ▼
                  <!-- <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Explore</li>
                    <li>Category: Graphic Design</li>
                  </ul> -->
                  // ▲ コメントアウト ▲
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

</div>

// 修正

// 修正

<p class="item-intro text-muted">車両買取に関しての流れを記載します。</p>

// ▼ 追加 ▼

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>車両の確認</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

// ▲ 追加 ▲

// コメントアウト

// 修正

<p>車両によって値段は様々になります。また、値段がつかない場合もございますがご了承下さい。(下取>りに関しても同様になります)</p>

// ▼ コメントアウト ▼

<!-- <ul class="list-inline">

<li>Date: January 2017</li>

<li>Client: Explore</li>

<li>Category: Graphic Design</li>

</ul> -->

// ▲ コメントアウト ▲

Close Project</button>

</div>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Project Name</h2>
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/03-full.jpg" alt="">
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                  <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Finish</li>
                    <li>Category: Identity</li>
                  </ul>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

</div>

<h2 class="text-uppercase">Project Name</h2>

<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>

<li>Date: January 2017</li>

<li>Client: Finish</li>

<li>Category: Identity</li>

</ul>

Close Project</button>

</div>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  // 修正
                  <h2 class="text-uppercase">車検</h2>
                  // 修正
                  <p class="item-intro text-muted">車検の金額に関して記載します。</p>
                  // ▼ 追加 ▼
                  <table class="table table-bordered">
                    <thead class="thead-light">
                      <tr>
                        <th>自動車種別</th>
                        <th>自賠責保険料</th>
                        <th>自動車重量税</th>
                        <th>印紙代</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>軽自動車</td>
                        <td>26,370円</td>
                        <td>6,600円</td>
                        <td>1,100円</td>
                      </tr>
                      <tr>
                        <td>普通自動車（1.0t以下）</td>
                        <td rowspan="4">27,840円</td>
                        <td>16,400円</td>
                        <td>1,700円</td>
                      </tr>
                      <tr>
                        <td>普通自動車（1.5t以下）</td>
                        <td>24.600円</td>
                        <td rowspan="3">1,800円</td>
                      </tr>
                      <tr>
                        <td>普通自動車（2.0t以下）</td>
                        <td>32.800円</td>
                      </tr>
                      <tr>
                        <td>普通自動車（2.5t以下）</td>
                        <td>41,000円</td>
                      </tr>
                    </tbody>
                  </table>
                  // ▲ 追加 ▲
                  // コメントアウト
                  <!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/03-full.jpg" alt=""> -->
                  // 修正
                  <p>上記の初期費用に＋基本整備代＋部品代＋整備代が加算されます。概算見積りを行いたい場合は一度起
こし下さい。</p>
                  // ▼ 追加 ▼
                  <table class="table table-bordered">
                    <thead class="thead-dark">
                      <tr>
                        <th colspan="5">車検時に用意いただくもの</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>自動車検査証</td>
                        <td>自動車税納税証明書</td>
                        <td>自賠責保険証明書</td>
                        <td>印鑑使用者の認印</td>
                        <td>車検料金</td>
                      </tr>
                    </tbody>
                  </table>
                  <p>車検時に用意いただくものでわからないものがございましたら、お気軽にご連絡下さい。</p>
                  // ▲ 追加 ▲
                  // ▼ コメントアウト ▼
                  <!-- <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Finish</li>
                    <li>Category: Identity</li>
                  </ul> -->
                  // ▲ コメントアウト ▲
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

</div>

// 修正

// 修正

<p class="item-intro text-muted">車検の金額に関して記載します。</p>

// ▼ 追加 ▼

<tr>

<th>自動車種別</th>

<th>自賠責保険料</th>

<th>自動車重量税</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

<td>普通自動車（1.0t以下）</td>

</tr>

<tr>

<td>普通自動車（1.5t以下）</td>

</tr>

<tr>

<td>普通自動車（2.0t以下）</td>

</tr>

<tr>

<td>普通自動車（2.5t以下）</td>

</tr>

</tbody>

</table>

// ▲ 追加 ▲

// コメントアウト

// 修正

<p>上記の初期費用に＋基本整備代＋部品代＋整備代が加算されます。概算見積りを行いたい場合は一度起

こし下さい。</p>

// ▼ 追加 ▼

<tr>

<th colspan="5">車検時に用意いただくもの</th>

</tr>

</thead>

<tbody>

<tr>

<td>自動車検査証</td>

<td>自動車税納税証明書</td>

<td>自賠責保険証明書</td>

<td>印鑑使用者の認印</td>

</tr>

</tbody>

</table>

<p>車検時に用意いただくものでわからないものがございましたら、お気軽にご連絡下さい。</p>

// ▲ 追加 ▲

// ▼ コメントアウト ▼

<!-- <ul class="list-inline">

<li>Date: January 2017</li>

<li>Client: Finish</li>

<li>Category: Identity</li>

</ul> -->

// ▲ コメントアウト ▲

Close Project</button>

</div>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Project Name</h2>
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/04-full.jpg" alt="">
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                  <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Lines</li>
                    <li>Category: Branding</li>
                  </ul>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

︙

</div>

</div>

<h2 class="text-uppercase">Project Name</h2>

<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>

<li>Date: January 2017</li>

<li>Client: Lines</li>

<li>Category: Branding</li>

</ul>

Close Project</button>

</div>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div

    <!-- Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  // 修正
                  <h2 class="text-uppercase">定期点検</h2>
                  // 修正
                  <p class="item-intro text-muted">定期点検の金額に関して記載します。</p>
                  // ▼ 追加 ▼
                  <table class="table table-bordered">
                    <thead class="thead-dark">
                      <tr>
                        <th>点検費用</th>
                        <th>軽自動車</th>
                        <th>5ナンバー</th>
                        <th>3ナンバー</th>
                        <th>ワンボックス</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th class="table-dark">1年点検</th>
                        <td>6,480 (480)</td>
                        <td>7,560 (560)</td>
                        <td>8,640 (640)</td>
                        <td>9,720 (720)</td>
                      </tr>
                      <tr>
                        <th class="table-dark">半年点検</th>
                        <td>2,700 (200)</td>
                        <td>2,700 (200)</td>
                        <td>2,700 (200)</td>
                        <td>2,700 (200)</td>
                      </tr>
                    </tbody>
                  </table>
                  // ▲ 追加 ▲ 
                  // コメントアウト
                  <!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/04-full.jpg" alt=""> -->
                  // 修正
                  <p>上記の基本整備代に＋部品代＋整備代が加算されます。概算見積りを行いたい場合は一度起こし下さい
。</p>
                  // ▼ コメントアウト ▼
                  <!-- <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Lines</li>
                    <li>Category: Branding</li>
                  </ul> -->
                  // ▲ コメントアウト ▲
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

︙

</div

</div>

// 修正

// 修正

<p class="item-intro text-muted">定期点検の金額に関して記載します。</p>

// ▼ 追加 ▼

<tr>

<th>ワンボックス</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

// ▲ 追加 ▲

// コメントアウト

// 修正

<p>上記の基本整備代に＋部品代＋整備代が加算されます。概算見積りを行いたい場合は一度起こし下さい

。</p>

// ▼ コメントアウト ▼

<!-- <ul class="list-inline">

<li>Date: January 2017</li>

<li>Client: Lines</li>

<li>Category: Branding</li>

</ul> -->

// ▲ コメントアウト ▲

Close Project</button>

</div>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 5 -->
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Project Name</h2>
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/05-full.jpg" alt="">
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                  <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Southwest</li>
                    <li>Category: Website Design</li>
                  </ul>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

︙

</div>

︙

</div>

</div>

<h2 class="text-uppercase">Project Name</h2>

<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>

<li>Date: January 2017</li>

<li>Client: Southwest</li>

<li>Category: Website Design</li>

</ul>

Close Project</button>

</div>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 5 -->
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  // 修正
                  <h2 class="text-uppercase">一般整備</h2>
                  // 修正
                  <p class="item-intro text-muted">一般整備の金額に関して記載します。</p>
                  // ▼ 追加 ▼ 
                  <table class="table table-bordered">
                    <thead class="thead-dark">
                      <tr>
                        <th class="table-dark">一般整備料金</th>
                        <th>1000cc以下軽含む)</th>
                        <th>1001～1500cc以下</th>
                        <th>1501～2000cc以下</th>
                        <th>2001cc以上</th>
                        <th>ワンボックス</th>
                        <th>交換目安</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th class="table-dark">エンジンオイル交換</th>
                        <td>3500円</td>
                        <td>4000円</td>
                        <td>5000円</td>
                        <td>6000円</td>
                        <td>6000円</td>
                        <td>5,000 km</td>
                      </tr>
                      <tr>
                        <th class="table-dark">エンジンオイル＆エレメント取替</th>
                        <td>5000円</td>
                        <td>5500円</td>
                        <td>6500円</td>
                        <td>7500円</td>
                        <td>7500円</td>
                        <td>10,000 km</td>
                      </tr>
                      <tr>
                        <th class="table-dark">タイヤ交換(1本)</th>
                        <td>1500円</td>
                        <td>1700円</td>
                        <td>1800円</td>
                        <td>2000円</td>
                        <td>2000円</td>
                        <td>スリップサイン</td>
                      </tr>
                      <tr>
                        <th class="table-dark">カーナビ取付</th>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>故障した場合</td>
                      </tr>
                      <tr>
                        <th class="table-dark">カーナビ取付＆バックモニター取付</th>
                        <td>25000円</td>
                        <td>25000円</td>
                        <td>25000円</td>
                        <td>25000円</td>
                        <td>25000円</td>
                        <td>故障した場合</td>
                      </tr>
                      <tr>
                        <th class="table-dark">車高調取付</th>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>20000円</td>
                        <td>故障した場合</td>
                      </tr>
                    </tbody>
                  </table>
                  // ▲ 追加 ▲
                  // コメントアウト
                  <!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/05-full.jpg" alt=""> -->
                  // 修正
                  <p>取付項目によっては、お預かりする場合がございます。予めご了承下さい。気になる点はご相談下さい
。</p>
                  // ▼ コメントアウト ▼
                  <!-- <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Southwest</li>
                    <li>Category: Website Design</li>
                  </ul> -->
                  // ▲ コメントアウト ▲
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

︙

</div>

︙

</div>

</div>

// 修正

// 修正

<p class="item-intro text-muted">一般整備の金額に関して記載します。</p>

// ▼ 追加 ▼

<tr>

<th class="table-dark">一般整備料金</th>

<th>1000cc以下軽含む)</th>

<th>ワンボックス</th>

</tr>

</thead>

<tbody>

<tr>

<th class="table-dark">エンジンオイル交換</th>

</tr>

<tr>

<th class="table-dark">エンジンオイル＆エレメント取替</th>

</tr>

<tr>

<th class="table-dark">タイヤ交換(1本)</th>

<td>スリップサイン</td>

</tr>

<tr>

<th class="table-dark">カーナビ取付</th>

<td>故障した場合</td>

</tr>

<tr>

<th class="table-dark">カーナビ取付＆バックモニター取付</th>

<td>故障した場合</td>

</tr>

<tr>

<th class="table-dark">車高調取付</th>

<td>故障した場合</td>

</tr>

</tbody>

</table>

// ▲ 追加 ▲

// コメントアウト

// 修正

<p>取付項目によっては、お預かりする場合がございます。予めご了承下さい。気になる点はご相談下さい

。</p>

// ▼ コメントアウト ▼

<!-- <ul class="list-inline">

<li>Date: January 2017</li>

<li>Client: Southwest</li>

<li>Category: Website Design</li>

</ul> -->

// ▲ コメントアウト ▲

Close Project</button>

</div>

︙

$ vi index.html

1	$ vi index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 5 -->
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 6 -->
    <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  <h2 class="text-uppercase">Project Name</h2>
                  <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
                  <img class="img-fluid d-block mx-auto" src="img/portfolio/06-full.jpg" alt="">
                  <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
                  <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Window</li>
                    <li>Category: Photography</li>
                  </ul>
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

︙

</div>

︙

</div>

︙

</div>

</div>

<h2 class="text-uppercase">Project Name</h2>

<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>

<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>

<li>Date: January 2017</li>

<li>Client: Window</li>

<li>Category: Photography</li>

</ul>

Close Project</button>

</div>

︙

<!DOCTYPE html>
<html lang="en">

  <head>

    ︙

  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">

      ︙

    </nav>

    <!-- Header -->
    <header class="masthead">

      ︙
        
    </header>

    <!-- Services -->
    <section id="services">

      ︙
        
    </section>

    <!-- Portfolio Grid -->
    <section class="bg-light" id="portfolio">

      ︙

    </section>

    <!-- About -->
    <section id="about">

      ︙

    </section>

    <!-- Team -->
    <section class="bg-light" id="team">

      ︙

    </section>

    <!-- Clients -->
    <!-- <section class="py-5">

      ︙

    </section> -->
    <!-- Access -->
    <section id="access">

      ︙

    </section> -->

    <!-- Contact -->
    <section id="contact">

      ︙

    </section>

    <!-- Footer -->
    <footer>

      ︙

    </footer>

    <!-- Portfolio Modals -->

    <!-- Modal 1 -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 2 -->
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 3 -->
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 4 -->
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>
    
    <!-- Modal 5 -->
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    
      ︙
      
    </div>

    <!-- Modal 6 -->
    <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="close-modal" data-dismiss="modal">
            <div class="lr">
              <div class="rl"></div>
            </div>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-lg-8 mx-auto">
                <div class="modal-body">
                  <!-- Project Details Go Here -->
                  // 修正
                  <h2 class="text-uppercase">板金・塗装</h2>
                  // 修正
                  <p class="item-intro text-muted">板金・塗装の金額に関して記載します。</p>
                  // コメントアウト
                  <!-- <img class="img-fluid d-block mx-auto" src="img/portfolio/06-full.jpg" alt=""> -->
                  // ▼ 追加 ▼
                  <table class="table table-bordered">
                    <thead class="thead-dark">
                      <tr>
                        <th class="table-dark">板金・塗装料金</th>
                        <th>1000cc以下軽含む)</th>
                        <th>1001～1500cc以下</th>
                        <th>1501～2000cc以下</th>
                        <th>2001cc以上</th>
                        <th>ワンボックス</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th>フロントバンパー</th>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>30000円</td>
                        <td>30000円</td>
                      </tr>
                      <tr>
                        <th>リアバンパー</th>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>30000円</td>
                        <td>30000円</td>
                      </tr>
                      <tr>
                        <th>フロントドア</th>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>30000円</td>
                        <td>30000円</td>
                      </tr>
                      <tr>
                        <th>リアドア</th>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>30000円</td>
                        <td>30000円</td>
                      </tr>
                      <tr>
                        <th>フロントフェンダー</th>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>30000円</td>
                        <td>30000円</td>
                      </tr>
                      <tr>
                        <th>リアフェンダー</th>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>30000円</td>
                        <td>30000円</td>
                      </tr>
                      <tr>
                        <th>サイドバー</th>
                        <td>10000円</td>
                        <td>15000円</td>
                        <td>20000円</td>
                        <td>25000円</td>
                        <td>25000円</td>
                      </tr>
                    </tbody>
                  </table>
                  // ▲ 追加 ▲
                  // 修正
                  <p>出来る限り元の形に復元致します。傷、凹みの大きさによって値段が変わります。ご了承下さい。また
、部品の交換の場合もございます。</p>
                  // ▼ コメントアウト ▼
                  <!-- <ul class="list-inline">
                    <li>Date: January 2017</li>
                    <li>Client: Window</li>
                    <li>Category: Photography</li>
                  </ul> -->
                  // ▲ コメントアウト ▲
                  <button class="btn btn-primary" data-dismiss="modal" type="button">
                    <i class="fa fa-times"></i>
                    Close Project</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ︙

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

<!DOCTYPE html>

<head>

︙

</head>

︙

</nav>

︙

</header>

︙

</section>

︙

</section>

︙

</section>

︙

</section>

<!-- <section class="py-5">

︙

</section> -->

︙

</section> -->

︙

</section>

︙

</footer>

︙

</div>

︙

</div>

︙

</div>

︙

</div>

︙

</div>

</div>

// 修正

// 修正

<p class="item-intro text-muted">板金・塗装の金額に関して記載します。</p>

// コメントアウト

// ▼ 追加 ▼

<tr>

<th>1000cc以下軽含む)</th>

<th>ワンボックス</th>

</tr>

</thead>

<tbody>

<tr>

<th>フロントバンパー</th>

</tr>

<tr>

<th>リアバンパー</th>

</tr>

<tr>

<th>フロントドア</th>

</tr>

<tr>

</tr>

<tr>

<th>フロントフェンダー</th>

</tr>

<tr>

<th>リアフェンダー</th>

</tr>

<tr>

<th>サイドバー</th>

</tr>

</tbody>

</table>

// ▲ 追加 ▲

// 修正

<p>出来る限り元の形に復元致します。傷、凹みの大きさによって値段が変わります。ご了承下さい。また

、部品の交換の場合もございます。</p>

// ▼ コメントアウト ▼

<!-- <ul class="list-inline">

<li>Date: January 2017</li>

<li>Client: Window</li>

<li>Category: Photography</li>

</ul> -->

// ▲ コメントアウト ▲

Close Project</button>

</div>

︙

サマンサ

Bootstrapのテンプレートを使用してホームページ作成

環境

テンプレートのダウンロード

head部分の修正

navigation部分の修正

header部分の修正

services部分の修正

portfolio部分の修正

about部分の修正

team部分の修正

contact部分の修正

Yahoo!メールの設定

access部分の追加

modal_1部分の修正

modal_2部分の修正

modal_3部分の修正

modal_4部分の修正

modal_5部分の修正

modal_6部分の修正

関連

投稿者: samancha

Bootstrapのテンプレートを使用してホームページ作成

環境

テンプレートのダウンロード

head部分の修正

navigation部分の修正

header部分の修正

services部分の修正

portfolio部分の修正

about部分の修正

team部分の修正

contact部分の修正

Yahoo!メールの設定

access部分の追加

modal_1部分の修正

modal_2部分の修正

modal_3部分の修正

modal_4部分の修正

modal_5部分の修正

modal_6部分の修正

共有:

関連

投稿者: samancha

関連記事