Harigami
ログイン
123
anonymous タイトルなし
HTML
<!-- SAMPLE 01 -->
<div class="p-dropdown">
  <button class="p-dropdown__button js-dropdown-button" type="button" aria-controls="drop_contents_01" aria-expanded="false">〇〇のコンテンツについて見る</button>
  <div id="drop_contents_01" class="p-dropdown__contents js-dropdown-content" aria-hidden="true">
    〇〇のコンテンツ
  </div>
</div>

<!-- SAMPLE 02 -->
<div class="p-dropdown" aria-expanded="false">
  <button class="p-dropdown__button js-dropdown-button" type="button">△△のコンテンツについて見る</button>
  <div id="drop_contents_02" class="p-dropdown__contents js-dropdown-content" aria-hidden="true">
    △△のコンテンツ
  </div>
</div>
  • 3
  • 1
anonymous タイトルなし
HTML
<div class="p-dropdown">
  <button class="p-dropdown__button" type="button" aria-controls="drop_contents" aria-expanded="false">タブ</button>
  <div id="drop_contents" class="p-dropdown__contents" aria-hidden="true">
    コンテンツ内容
  </div>
</div>
  • 0
  • 0
anonymous タイトルなし
HTML
<div class="p-dropdown">
  <button class="p-dropdown__button" type="button" aria-controls="drop_contents" aria-expanded="false">タブ</button>
  <div id="drop_contents" class="p-dropdown__contents" aria-hidden="true">
    コンテンツ内容
  </div>
</div>
  • 0
  • 0
anonymous タイトルなし
HTML
class CommentsController < ApplicationController
	def create
		@comment = Comment.new(comment_params)
		@comment.user_id = current_user.id
		if @comment.save!
			redirect_back(fallback_location: root_path)
		else
			redirect_back(fallback_location: root_path)

		end
	end

	private
	def comment_params
		params.require(:comment).permit(:content)
	end
end
  • 0
  • 0
anonymous タイトルなし
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/access.css">
  <link rel="stylesheet" href="css/head_foot.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt="FAT DOG STAND ロゴ"></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="/index.html">HOME</a></li>
            <li><a href="fds_style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt="taste just one time"></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <!--   ACCESS-->
  <main>
    <section>
      <h2 class="ttl">ACCESS</h2>
      <div class="ttl_line fadein3"><img src="image/common/ttl_line.png" alt="タイトルライン画像" width="300"></div>
      <ul class="access_link access_box inner fadein">
        <li class="access_list flex flex_between">
          <div class="access_text1">ADDRESS</div>
          <div class="access_text2">542-0012&nbsp;大阪市中央区谷町7-6-33<br><span class="min_cont">地下鉄谷町線 谷町六丁目駅3番出口から出て徒歩約3分
              <br>地下鉄長堀鶴見緑地線 松屋町駅3番出口から出て徒歩約3分</span></div>
        </li>
        <li class="access_list">
          <div class="access_text1">OPEN &nbsp; HOURS</div>
          <div class="access_text2">Week day &nbsp; 8:00-17:00
            <br>Sat.-Sun.Holiday &nbsp; 10:30-17:00</div>
        </li>
        <li class="access_list">
          <div class="access_text1">CL0SE</div>
          <div class="access_text2">Tueseday</div>
        </li>
        <li class="access_list">
          <div class="access_text1">TEL</div>
          <div class="access_text2"><a href="tel:06-6776-2236">06-6776-2236</a></div>
        </li>
        <li class="access_list">
          <div class="access_text1">E-MAIL</div>
          <div class="access_text2"><a href="mailto:fatdogstand@gmail.com">fatdogstand@gmail.com</a></div>
        </li>
        <li class="access_list">
          <div class="access_text1">PARKING</div>
          <div class="access_text2">None</div>
        </li>
      </ul>
    </section>
    <section>
      <div class="karahori_mv">
        <h2 class="ttl_white fadein">空堀商店街</h2>
        <p class="inner karahori_text white access_box fadein">商店街の中は昔ながらの個人商店が残る、人懐っこいローカルな雰囲気。もちろん商店街の中のお店も素敵ですが、一歩商店街から外に足を向けると、レトロな町屋がずらっと並んでいて、大正時代にタイムスリップしたような感覚に陥ります。</p>
      </div>
    </section>
    <!------------------------------------------------------    LOCATIONスタート-->
    <section class="loc">
      <h2 class="ttl">LOCATION</h2>
      <div class="ttl_line fadein3"><img src="image/common/ttl_line.png" alt="タイトルライン画像" width="300"></div>
      <div class="access_box loc_box inner fadein">
        <!--ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーmap違う場所-->
        <div class="map" id="map_top">
          <!--←このdivの中に地図画像とボタン画像を入れるそしてリラティブをかけて。その中のボタンにポジションアブソリュートをかける!-->
          <div class="map_img">
            <img src="image/access/karahorimap.jpg" alt="" width="">
            <div class="btn01" id="aa">
              <a href="#a"><img src="image/access/marka.png" alt=""></a>
            </div>
            <div class="btn02" id="bb">
              <a href="#b"><img src="image/access/markb.png" alt=""></a>
            </div>
            <div class="btn03" id="cc">
              <a href="#c"><img src="image/access/markc.png" alt=""></a>
            </div>
          </div>
        </div>
        <div class="shop">
          <ul class="shop_list" id="a">
            <li>
              <img src="image/access/shopex.jpg" alt="">
            </li>
            <li class="flex">
              <div class="shop_no"><img src="image/access/marka.png" alt=""></div>
              <div>
                <h3 class="shop_text1">店の名前</h3>
                <p class="shop_text2">店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                <div class="flex flex_around">
                  <p class="shop_link1"><a href="##">SHOP PAGE &gt;</a></p>
                  <p class="shop_link2"><a href="#map_top">BACK TO MAP &gt;</a></p>
                </div>
              </div>
            </li>
          </ul>
          <ul class="shop_list" id="b">
            <li>
              <img src="image/access/shopex.jpg" alt="">
            </li>
            <li class="flex">
              <div class="shop_no"><img src="image/access/markb.png" alt=""></div>
              <div>
                <h3 class="shop_text1">店の名前</h3>
                <p class="shop_text2">店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                <div class="flex flex_around">
                  <p class="shop_link1"><a href="##">SHOP PAGE &gt;</a></p>
                  <p class="shop_link2"><a href="#map_top">BACK TO MAP &gt;</a></p>
                </div>
              </div>
            </li>
          </ul>
          <ul class="shop_list" id="c">
            <li>
              <img src="image/access/shopex.jpg" alt="">
            </li>
            <li class="flex">
              <div class="shop_no"><img src="image/access/markc.png" alt=""></div>
              <div>
                <h3 class="shop_text1">店の名前</h3>
                <p class="shop_text2">店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                <div class="flex flex_around">
                  <p class="shop_link1"><a href="##">SHOP PAGE &gt;</a></p>
                  <p class="shop_link2"><a href="#map_top">BACK TO MAP &gt;</a></p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </main>
  <!-----------------------------------------------Location END-->
  <!----------------------------------ACCESS END-->
  <!-- フッター -->
  <footer class="footer">
    <div class="footer_box inner flex flex_around">
      <div class="fot_left">
        <div class="fot_logo">
          <img src="image/common/fds_logo_w.png" width="170" alt="fat dog stand ロゴ">
        </div>
        <ul class="fot_sns flex">
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
        </ul>
      </div>
      <nav class="fot_nav">
        <ul class="fot_nav_list">
          <li><a href="/index.html">HOME</a></li>
          <li><a href="fds_style.html">STYLE</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="access.html">ACCESS</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
      <address class="address_box">
        <ul>
          <li><span>OPEN</span> : 8:00 - 17:00 ( weekday ) 10:30 - 17:00 ( holiday )</li>
          <li><span>CLOSE</span> : Tuesday</li>
          <li><span>ADDRESS</span> : 〒542-0012 大阪府大阪市中央区谷町7-6-33</li>
          <li><span>PHONE</span> : <a href="tel:06-6776-2236">06-6776-2236</a></li>
          <li><span>E-MAIL</span> : <a href="mailto:fatdogstand@gmail.com">fatdogstand@gmail.com</a></li>
        </ul>
      </address>
    </div>
    <p class="copy">Copyright &copy; 2019 FAT DOG STAND All Rights Reserved.</p>
  </footer>
  <!-- フッターend -->
</body>
</html>
  • 0
  • 0
anonymous タイトルなし
HTML
@charset 'utf-8';

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* BASE STYLE
--------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  color: #333;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  font-size: 1.4rem;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  vertical-align: middle;
}

/* CLEAR-FIX */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
  line-height: 0;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーORIGINAL STYLE
--------------------------------------------------*/

.inner_max {
  margin: 0 auto;
  max-width: 1440px;
  width: 90%;
}

.inner {
  margin: 0 auto;
  max-width: 1000px;
  width: 90%;
}

.flex {
  display: flex;
}

.flex_center {
  justify-content: center;
}

.flex_between {
  justify-content: space-between;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_around {
  justify-content: space-around;
}

.ttl {
  position: relative;
  padding-top: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
  color: #333;
  line-height: 1;
  z-index: 2;
}
.ttl_white {
  position: relative;
  padding-top: 100px;
  text-align: center;
  font-weight: bold;
  font-size: 4rem;
  color: #fff;
  line-height: 1;
  z-index: 2;
}

.ttl_line {
  text-align: center;
  margin-top: -20px;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーACCESS */

.access_box {
  padding: 50px 0 100px 0;
}

.access_list {
  display: flex;
  padding-bottom: 2%;

  justify-content: space-around;
}

.access_text1 {
  padding-left: 20%;
  width: 50%;
  font-weight: bold;
  font-size: 1.8rem;
}

.access_text2 {
  width: 50%;
  font-size: 1.6rem;
}

.min_cont {
  font-size: 1.4rem;
}
.access_link a {
  color: #333;
  text-decoration: none;
}
.access_link a:hover {
  color: #ff8c00;
}

/*-----------------------------------空堀商店街*/
.karahori_mv {
  position: relative;
  z-index: 1;
  width: 100%;
  background-image: url(../image/access/karahori1017.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.karahori_mv::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 6, 6, .38);
  content: '';
}


.white {
  color: #fff;
}


.karahori_text {
  font-size: 1.6rem;
}


/*-----------------------------------Location*/

.loc {
  background: #bbb;
}
.loc_box {
  display: flex;

  justify-content: space-around;
}
.map_img {
  position: relative;
  margin: auto;
  min-width: 450px;
  width: 45%;
}
.btn01 {
  position: absolute;
  top: 350px;
  left: 240px;
}
.btn02 {
  position: absolute;
  top: 590px;
  left: 200px;
}
.btn03 {
  position: absolute;
  top: 1000px;
  left: 140px;
}
.shop {
  width: 45%;
}
.shop_list {
  margin-bottom: 5%;
  padding-bottom: 5%;
  background: #fff;
}
.shop_list img {
  width: 120%;
}
.shop_no {
  padding: 5%;
}
.shop_text1 {
  padding: 5%;
  font-weight: bold;
  font-size: 2rem;
}
.shop_text2 {
  padding: 0 5% 5%;
  font-size: 1.6rem;
}
.shop_link1,
.shop_link2 {
  width: 40%;
  border-radius: 5px;
  background: black;
  text-align: center;
}
.shop_link1 a,
.shop_link2 a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
}
.shop_text2 {
  padding: 0 5% 5%;
  font-size: 1.6rem;
}
/*ーーーーーーーーーーーーーーーーーーーjQuery*/
.fadein {
  opacity: 0;
  transition: all 800ms;
  transform: translate(0, 50px);
}
.fadein2 {
  opacity: 0;
  transition: all 1800ms;
  transform: translate(0, 50px);
}
.fadein3 {
  opacity: 0;
  transition: all 300ms;
  transform: translateX(-180px);
}

.fadein.scrollin,
.fadein2.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein3.scrollin {
  opacity: 1;
  transform: translateX(0px);
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーRESPONSIVE
--------------------------------------------------*/
@media screen and (min-width:1440px) {
}

@media screen and (min-width:951px) {
  .shop_link1 {
    width: 90%;
  }

  .shop_link2 {
    display: none;
  }
}

@media screen and (max-width:950px) {
  .loc_box {
    display: block;
  }

  .map {
    margin: 0 auto;
    width: 90%;
    text-align: center;
  }

  .shop {
    margin: 5% auto;
    max-width: 450px;
    width: 90%;
    text-align: center;
    ;
  }
  .shop_text1,
  .shop_text2 {
    text-align: left;
  }
}

@media screen and (max-width:850px) {
  .access_list {
    flex-direction: column;

    align-items: center;
  }

  .access_text1 {
    padding: inherit;
    width: inherit;
    text-align: center;
  }

  .access_text2 {
    width: inherit;
    text-align: center;
  }
}

@media screen and (max-width:560px) {
  /* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーORIGINAL STYLE
--------------------------------------------------*/
  .ttl {
    font-size: 3.3rem;
    padding-top: 80px;
  }
}
@media screen and (max-width:500px) {
  .map_img {
    position: relative;
    margin: auto;
    min-width: 300px;
    width: 45%;
  }


  .btn01 {
    position: absolute;
    top: 235px;
    left: 155px;
    width: 25px;
  }

  .btn02 {
    position: absolute;
    top: 390px;
    left: 135px;
    width: 25px;
  }

  .btn03 {
    position: absolute;
    top: 660px;
    left: 95px;
    width: 25px;
  }
}
@media screen and (max-width:375px) {
  .loc_box {
    margin-left: -1%;
    width: 100%;
  }
}
  • 0
  • 0
anonymous タイトルなし
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/head_foot.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt="FAT DOG STAND ロゴ"></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="index.html">HOME</a></li>
            <li><a href="fds_style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt="taste just one time"></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <main>


    <!-- 商品へのこだわり -->
    <section class="kodawari inner">
      <h2 class="ttl">商品へのこだわり</h2>

      <div class="hotdog flex">
        <div class="hotdog_text fadein">
          <h3 class="ttl_cont">ホットドッグへの<span>こだわり</span></h3>
          <p class="text_cont">
          自家製のソーセージを使った、ケチャップとマスタードを使わないホットドッグ。<br>
          オリジナルに調合したスパイスとハーブを練んだソーセージをその場でグリルします。<br>
          アツアツの出来立てを味わってみてください。
        </p>
        </div>
        <div class="hotdog_img fadein2">
          <img src="image/home/hotdog.jpg" width="520" height="455" alt="ホットドッグイメージ">
        </div>
      </div>

      <div class="coffee flex">
        <div class="coffee_img fadein2">
          <img src="image/home/coffee.jpg" width="520" height="455" alt="コーヒーイメージ">
        </div>
        <div class="coffee_text fadein">
          <h3 class="ttl_cont">コーヒーへの<span>こだわり</span></h3>
          <p class="text_cont">
          酸味を抑えスッキリした味わいの日常に馴染むコーヒーです。<br>
          一番おいしい状態でコーヒーが出せるよう、豆の種類を厳選し、バリスタの資格を持つスタッフが丁寧に淹れています。<br>
          1日のスタート、仕事の合間、空堀散策のお供にこだわりのコーヒーをお楽しみください。
        </p>
        </div>
      </div>
    </section>
    <!-- 商品へのこだわり end -->


    <section class="shop_map inner">
      <div class="map">
        <div class="map_img"><img src="image/test/map.jpg" alt=""></div>
        <div class="btn01" id="aa"><a href="#a"><img src="image/test/01.jpeg" alt="" width="50"></a></div>
        <div class="btn02" id="bb"><a href="#b"><img src="image/test/02.jpeg" alt="" width="50"></a></div>
        <div class="btn03" id="cc"><a href="#c"><img src="image/test/05.jpeg" alt="" width="50"></a></div>
      </div>
      <div class="shop_list">
        <div class="shop_content">
          <p id="a" class="shop_ttl">店舗名01</p>
          <p class="shop_info">店舗情報</p>
          <p class="shop_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <p class="shop_link"><a href="#aa">位置をチェック</a></p>
        </div>
        <div class="shop_content">
          <p id="b" class="shop_ttl">店舗名02</p>
          <p class="shop_info">店舗情報</p>
          <p class="shop_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <p class="shop_link"><a href="#bb">位置をチェック</a></p>
        </div>
        <div class="shop_content">
          <p id="c" class="shop_ttl">店舗名04</p>
          <p class="shop_info">店舗情報</p>
          <p class="shop_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          <p class="shop_link"><a href="#cc">位置をチェック</a></p>
        </div>
      </div>
    </section>


  </main>

</body>

</html>
  • 0
  • 1
anonymous タイトルなし
HTML

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーマップテストコード */
.shop_map {
  display: flex;

  justify-content: space-between;
}

.map {
  position: relative;
  min-width: 500px;
}

.btn01 {
  position: absolute;
  top: 350px;
  left: 200px;
}
.btn02 {
  position: absolute;
  top: 690px;
  left: 280px;
}
.btn03 {
  position: absolute;
  bottom: 250px;
  left: 200px;
}


.shop_list {
  width: 45%;
  background: gold;
}
.shop_content {
  margin-bottom: 50px;
  padding: 20px;
  width: 100%;
  background: rgb(224, 151, 255);
}
.shop_ttl {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
}
.shop_info {
  margin: 10px 0;
  text-decoration: underline;
  font-size: 1.7rem;
}

.shop_text {
  margin-bottom: 15px;
  font-size: 1.5rem;
}
.shop_link {
  text-align: right;
}
.shop_link a {
  padding: 10px 20px;
  border-radius: 10px;
  background: green;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
}
  • 0
  • 1
anonymous タイトルなし
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND|ACCESS</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt=""></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="index.html">HOME</a></li>
            <li><a href="style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt=""></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <main>
<!--   ACCESS-->
  <section>
      <h2 class="inpage_ttl">ACCESS</h2>
      <div class="address">
          <div class="address_list">
              <table class="address_table inner_cont">
                  <tr>
                      <th>ADDRESS</th>
                      <td>542-0012 大阪市中央区谷町7-6-33
                          <br>地下鉄谷町線 谷町六丁目駅3番出口から出て徒歩約3分
                          <br>地下鉄長堀鶴見緑地線 松屋町駅3番出口から出て徒歩約3分</td>
                  </tr>
                  <tr>
                      <th>OPEN HOURS</th>
                      <td>Week day 8:00-17:00
                          <br>Sat.-Sun. Holiday 10:30-17:00
                      </td>
                  </tr>
                  <tr>
                      <th>CL0SE</th>
                      <td>Tueseday</td>
                  </tr>
                  <tr>
                      <th>TEL</th>
                      <td>06-6776-2236</td>
                  </tr>
                  <tr>
                      <th>E-MAIL</th>
                      <td>fatdogstand@gmail.com</td>
                  </tr>
                  <tr>
                      <th>PARKING</th>
                      <td>None</td>
                  </tr>
              </table>

          </div>
          <div class="address_mv">
              <img src="image/access/shop.jpg" alt="">
          </div>
      </div>
  </section>

  <section>
      <div class="karahori_mv">
          <h2 class="inpage_ttl white">空堀商店街</h2>
          <p class="inner inner_cont white">商店街の中は昔ながらの個人商店が残る、人懐っこいローカルな雰囲気。もちろん商店街の中のお店も素敵ですが、一歩商店街から外に足を向けると、レトロな町屋がずらっと並んでいて、大正時代にタイムスリップしたような感覚に陥ります。</p>
      </div>
  </section>

  <section class="location">
      <h2 class="inpage_ttl">LOCATION</h2>

      <div class="flex inner">

      <div class="sec_inner">
          <img src="/image/access/karahorimap.jpg" alt="">
      </div>

<div>
      <div class="box">
      <div class="sec_inner">
          <div><img src="/image/access/shopex.jpg" alt=""></div>
          <div class="flex box_ex">
          <p class="box_no">1</p>
          <div class="box_cont">
              <h3>店の名前</h3>
              <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
              <p class="botton">MORE></p>
          </div>
          </div>
          </div>
      </div>
          <div class="box">
              <div class="sec_inner">
                  <div><img src="/image/access/shopex.jpg" alt=""></div>
                  <div class="flex box_ex">
                      <p class="box_no">1</p>
                      <div class="box_cont">
                          <h3>店の名前</h3>
                          <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                          <p class="botton">MORE></p>
                      </div>
                  </div>
              </div>
          </div>


    <div class="box">
        <div class="sec_inner">
            <div><img src="/image/access/shopex.jpg" alt=""></div>
            <div class="flex box_ex">
                <p class="box_no">1</p>
                <div class="box_cont">
                    <h3>店の名前</h3>
                    <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                    <p class="botton">MORE></p>
                </div>
            </div>
        </div>
    </div>

</div>







      </div>

  </section>

<!--ACCESS END-->


    <!-- NEWS -->
    <article class="news inner">
      <h2 class="ttl">NEWS</h2>
      <div class="insta"></div>
      <p>Instagram</p>
    </article>
    <!-- NEWS end -->
    <!-- FAT DOG STAND とは -->
    <section class="about inner">
      <h2 class="ttl">FAT DOG STAND とは</h2>
      <p>
        『“FAT DOG” STAND』にはつい食べ過ぎて太っちゃうほど美味しいホットドッグがあるコーヒースタンドにしたいという”食”への思いともう一つ、実は別のメッセージを込めています。<br>
        <br>
        『“PHAT DOG” STAND』=魅力的な仲間が集まる場所<br>
        <br>
        読み方は同じファットドッグですが、<br>
        “PHAT”はスラングで「かなりホットで魅力的」という意味があり、”DOG”は親しい友人を表します。<br>
        <br>
        ファッションやライフスタイルへのこだわり以外にも毎日の仕事や家族の為など”自分を信じて楽しみながら一生懸命生きている”それが私の考える魅力的な人たちです。<br>
        <br>
        そんな人たちが、気兼ねなくふらっと立ち寄れる。少しゆっくりできて「また頑張ろう」と思える。そんなお客様との心の距離の近い店にしていきたいという思いを込め、『FAT (=PHAT) DOG STAND』と名付けました。
      </p>
    </section>
    <!-- FAT DOG STAND とは end-->
  </main>

  <!-- フッター -->
  <footer class="footer">
    <div class="footer_box inner flex flex_around">
      <div class="fot_left">
        <div class="fot_logo">
          <img src="image/common/fds_logo_w.png" width="170" alt="">
        </div>
        <ul class="fot_sns flex">
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
        </ul>
      </div>
      <nav class="fot_nav">
        <ul class="fot_nav_list">
          <li><a href="index.html">HOME</a></li>
          <li><a href="style.html">STYLE</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="access.html">ACCESS</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
      <address class="address_box">
        <ul>
          <li>OPEN : 8:00 - 17:00 ( weekday ) 10:30 - 17:00 ( holiday )</li>
          <li>CLOSE : Tuesday</li>
          <li>ADDRESS : 〒542-0012 大阪府大阪市中央区谷町7-6-33</li>
          <li>PHONE : 06-6776-2236</li>
          <li>E-MAIL : fatdogstand@gmail.com</li>
        </ul>
      </address>
    </div>
    <p class="copy">Copyright &copy; 2019 FAT DOG STAND All Rights Reserved.</p>
  </footer>
  <!-- フッターend -->
</body>

</html>
  • 0
  • 0
anonymous タイトルなし
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="format-detection" content="telephone=no,address=no,email=no">

  <title>FAT DOG STAND|ACCESS</title>
  <meta name="description" content="こだわりのホットドッグとコーヒーを提供するお店。FAT DOG STANDを紹介するサイト">

  <!--  FONT Noto Sans JP-->
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">

  <script src="https://kit.fontawesome.com/54fc518417.js"></script>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/common.js"></script>
</head>

<body>
  <!-- ヘッダー -->
  <header class="header">
    <div class="header_box inner_max flex flex_center">
      <h1 class="header_logo"><a href="index.html"><img src="image/common/fds_logo.png" width="196" alt=""></a></h1>
      <div class="header_right">
        <div class="header_navbtn"><span></span><span></span><span></span></div>
        <nav class="header_nav">
          <ul class="nav_box flex">
            <li><a href="index.html">HOME</a></li>
            <li><a href="style.html">STYLE</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="access.html">ACCESS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </nav>
        <div class="main_copy">
          <p><img src="image/common/main_copy.png" width="730" alt=""></p>
          <p>集い味わう。ただひとつの今を。</p>
        </div>
      </div>
    </div>
  </header>
  <!-- ヘッダー end -->
  <main>
<!--   ACCESS-->
  <section>
      <h2 class="inpage_ttl">ACCESS</h2>
      <div class="address">
          <div class="address_list">
              <table class="address_table inner_cont">
                  <tr>
                      <th>ADDRESS</th>
                      <td>542-0012 大阪市中央区谷町7-6-33
                          <br>地下鉄谷町線 谷町六丁目駅3番出口から出て徒歩約3分
                          <br>地下鉄長堀鶴見緑地線 松屋町駅3番出口から出て徒歩約3分</td>
                  </tr>
                  <tr>
                      <th>OPEN HOURS</th>
                      <td>Week day 8:00-17:00
                          <br>Sat.-Sun. Holiday 10:30-17:00
                      </td>
                  </tr>
                  <tr>
                      <th>CL0SE</th>
                      <td>Tueseday</td>
                  </tr>
                  <tr>
                      <th>TEL</th>
                      <td>06-6776-2236</td>
                  </tr>
                  <tr>
                      <th>E-MAIL</th>
                      <td>fatdogstand@gmail.com</td>
                  </tr>
                  <tr>
                      <th>PARKING</th>
                      <td>None</td>
                  </tr>
              </table>

          </div>
          <div class="address_mv">
              <img src="image/access/shop.jpg" alt="">
          </div>
      </div>
  </section>

  <section>
      <div class="karahori_mv">
          <h2 class="inpage_ttl white">空堀商店街</h2>
          <p class="inner inner_cont white">商店街の中は昔ながらの個人商店が残る、人懐っこいローカルな雰囲気。もちろん商店街の中のお店も素敵ですが、一歩商店街から外に足を向けると、レトロな町屋がずらっと並んでいて、大正時代にタイムスリップしたような感覚に陥ります。</p>
      </div>
  </section>

  <section class="location">
      <h2 class="inpage_ttl">LOCATION</h2>

      <div class="flex inner">

      <div class="sec_inner">
          <img src="/image/access/karahorimap.jpg" alt="">
      </div>

<div>
      <div class="box">
      <div class="sec_inner">
          <div><img src="/image/access/shopex.jpg" alt=""></div>
          <div class="flex box_ex">
          <p class="box_no">1</p>
          <div class="box_cont">
              <h3>店の名前</h3>
              <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
              <p class="botton">MORE></p>
          </div>
          </div>
          </div>
      </div>
          <div class="box">
              <div class="sec_inner">
                  <div><img src="/image/access/shopex.jpg" alt=""></div>
                  <div class="flex box_ex">
                      <p class="box_no">1</p>
                      <div class="box_cont">
                          <h3>店の名前</h3>
                          <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                          <p class="botton">MORE></p>
                      </div>
                  </div>
              </div>
          </div>


    <div class="box">
        <div class="sec_inner">
            <div><img src="/image/access/shopex.jpg" alt=""></div>
            <div class="flex box_ex">
                <p class="box_no">1</p>
                <div class="box_cont">
                    <h3>店の名前</h3>
                    <p>店の特徴や説明店の特徴や説明店の特徴や説明店の特徴や説明</p>
                    <p class="botton">MORE></p>
                </div>
            </div>
        </div>
    </div>

</div>







      </div>

  </section>

<!--ACCESS END-->


    <!-- NEWS -->
    <article class="news inner">
      <h2 class="ttl">NEWS</h2>
      <div class="insta"></div>
      <p>Instagram</p>
    </article>
    <!-- NEWS end -->
    <!-- FAT DOG STAND とは -->
    <section class="about inner">
      <h2 class="ttl">FAT DOG STAND とは</h2>
      <p>
        『“FAT DOG” STAND』にはつい食べ過ぎて太っちゃうほど美味しいホットドッグがあるコーヒースタンドにしたいという”食”への思いともう一つ、実は別のメッセージを込めています。<br>
        <br>
        『“PHAT DOG” STAND』=魅力的な仲間が集まる場所<br>
        <br>
        読み方は同じファットドッグですが、<br>
        “PHAT”はスラングで「かなりホットで魅力的」という意味があり、”DOG”は親しい友人を表します。<br>
        <br>
        ファッションやライフスタイルへのこだわり以外にも毎日の仕事や家族の為など”自分を信じて楽しみながら一生懸命生きている”それが私の考える魅力的な人たちです。<br>
        <br>
        そんな人たちが、気兼ねなくふらっと立ち寄れる。少しゆっくりできて「また頑張ろう」と思える。そんなお客様との心の距離の近い店にしていきたいという思いを込め、『FAT (=PHAT) DOG STAND』と名付けました。
      </p>
    </section>
    <!-- FAT DOG STAND とは end-->
  </main>

  <!-- フッター -->
  <footer class="footer">
    <div class="footer_box inner flex flex_around">
      <div class="fot_left">
        <div class="fot_logo">
          <img src="image/common/fds_logo_w.png" width="170" alt="">
        </div>
        <ul class="fot_sns flex">
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
          <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
        </ul>
      </div>
      <nav class="fot_nav">
        <ul class="fot_nav_list">
          <li><a href="index.html">HOME</a></li>
          <li><a href="style.html">STYLE</a></li>
          <li><a href="menu.html">MENU</a></li>
          <li><a href="access.html">ACCESS</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
      <address class="address_box">
        <ul>
          <li>OPEN : 8:00 - 17:00 ( weekday ) 10:30 - 17:00 ( holiday )</li>
          <li>CLOSE : Tuesday</li>
          <li>ADDRESS : 〒542-0012 大阪府大阪市中央区谷町7-6-33</li>
          <li>PHONE : 06-6776-2236</li>
          <li>E-MAIL : fatdogstand@gmail.com</li>
        </ul>
      </address>
    </div>
    <p class="copy">Copyright &copy; 2019 FAT DOG STAND All Rights Reserved.</p>
  </footer>
  <!-- フッターend -->
</body>

</html>
  • 0
  • 0
あなたもコードを投稿しませんか?
投稿する
123