Harigami
ログイン
anonymous SPサンプル 電話○店舗○の場合・電話テンプレート・店舗テンプレート
HTML
<div class="nav__wrapper nav__wrapper--date js-nav__wrapper--date js-lazy">
  <div class="nav__box">
    <div class="nav__box__contact">
      <button class="nav__box__contact__button nav__box__contact__button--tel is-available js-contact__tel__btn">
        <div>電話予約</div>
      </button>
      <button class="nav__box__contact__button nav__box__contact__button--store is-available js-contact__store__btn">
        <div>店舗予約</div>
      </button>
    </div>
    <div class="nav__box__select-button">
      <button class="js-popup__steps-modal button button--color-accent">人数・日付を選択</button>
    </div>
  </div>
</div>

<div class="item--store__container shop-modal general-modal">
  <h2 class="item--store__container--title">店舗にてお問い合わせ・ご予約<button class="modal-close general-modal__close__btn"></button></h2>
  <div class="item--store">
    <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
    <div class="store-template">
      <!-- 店舗テンプレート -->
    </div>
  </div>
</div>
<div class="item-tel__container tel-modal general-modal">
  <h2 class="item-tel__container--title">お電話にてお問い合わせ・ご予約<button class="modal-close general-modal__close__btn"></button></h2>
  <div class="item-tel">
    <div class="item-tel__title">お電話にて<span>お問い合わせ・ご予約</span></div>
    <div class="item-tel__tour__info">
      <h3 class="item-tel__tour__info--title">■初夢フェア第2弾■【オンライン限定】LeaLeaトロリー滞在中乗り放題 ゴールドパス付!ハワイ5日間</h3>
      <div class="item-tel__tour__info--text">エコノミークラスホテルに滞在<3名1室利用不可></div>
      <div class="item-tel__tour__info__price__range">
        <span class="item-tel__tour__info__price__range--lower">109,800円</span>~<span class="item-tel__tour__info__price__range--upper">129,000円</span>
      </div>
      <div class="item-tel__tour__info__code">
        <div class="item-tel__tour__info__code--title">ツアーコード</div>
        <div class="item-tel__tour__info__code--number">TC-EHP0004-FH251</div>
      </div>
      <div class="item-tel__tour__info__code">
        <div class="item-tel__tour__info__code--title">一枚刷りコード</div>
        <div class="item-tel__tour__info__code--number">HWI004-A</div>
      </div>
    </div>
    <div class="item-tel__smartcall">
      <h3 class="item-tel__smartcall--title">旅スマコール</h3>
      <div class="item-tel__smartcall__info">
        <h3 class="item-tel__smartcall__info--title">通常のお電話よりも簡単・スムーズ!</h3>
        <p class="item-tel__smartcall__info--text">ご覧になっている商品情報がスタッフに伝わり、通常のお電話よりも簡単でスムーズにお問い合わせ・予約ができる電話サービスです。</p>
        <div class="item-tel__smartcall__info--btn">
          <button class="">電話番号を表示する</button>
        </div>
      </div>
    </div>
    <div class="item-tel__call">
      <h3 class="item-tel__call--title">通常のお電話にて<span>お問い合わせ</span></h3>
      <div class="item-tel__call__code">
        <div class="item-tel__call__code--title">ツアーコード:</div>
        <div class="item-tel__call__code--text"><span class="code_number">TC-FSA0001-SP154</span>を</div>
        <div class="item-tel__call__code--text">お伝えください。</div>
      </div>
    </div>
    <div class="item-tel__contact__info tel-template">
      <!-- 電話テンプレート -->
    </div>
  </div>
</div>

<div class="nav__wrapper nav__wrapper--reserve">
  <div class="nav__box">
    <div class="nav__box__info_selected">
      <div class="nav__box__total-price">
        <div class="total-price__content">
          <span class="total-price__content--title">合計</span><span class="total-price__content--price">1,126,110</span><span class="price__yen">円</span>
        </div>
      </div>
      <div class="nav__box__info_selected__passenger">
        <div class="nav__box__info_selected__passenger__info">
          <span class="nav__box__info_selected__passenger__info--count">4</span>名<span class="nav__box__info_selected__passenger__info--date">2020/10/10</span>
          出発
        </div>
      </div>
    </div>
    <div class="nav__box__info_selected">
      <div class="nav__box__total-price">
        <button class="nav__box__arrange button button--type-outline js-edit-selection">人数・出発日変更</button>
      </div>
      <div class="nav__box__info_selected__passenger">
        <button class="nav__box__reserve-btn button button--color-accent js-popup__terms-modal">予約へ進む</button>
      </div>
    </div>


  </div>
</div>


  • 0
  • 1
anonymous PCサンプル 電話番号テンプレート
HTML
<div id="tel-modal__wrapper" class="js-lazy">
  <div class="item-tel__container tel-modal general-modal">
    <div class="general-modal__bar">
      <div class="general-modal__bar__title">お電話にてお問い合わせ・ご予約</div>
      <button class="general-modal__bar__btn js-close-modal"></button>
    </div>
    <div class="item-tel">
      <div class="item-tel__block">
        <div class="item-tel__title item-tel__block__main-title">お電話にて<span>お問い合わせ・ご予約</span></div>
        <div class="item-tel__tour__info">
          <div class="item-tel__tour__info__item item-tel__tour__info__item--image"><img data-src="/front_resource_honban/c47/images/pc/marseille/ferris_wheel.jpg"></div>
          <div class="item-tel__tour__info__item item-tel__tour__info__item--tour-title">
            <h4 class="item-tel__tour__info__item--title">■初夢フェア第2弾■【オンライン限定】LeaLeaトロリー滞在中乗り放題 ゴールドパス付!ハワイ5日間</h4>
            <div class="item-tel__tour__info__item--text">エコノミークラスホテルに滞在<3名1室利用不可></div>
            <div class="item-tel__tour__info__item__price__range">
              <span class="item-tel__tour__info__item__price__range--lower">109,800円</span>~<span
                class="item-tel__tour__info__item__price__range--upper">129,000円</span>
            </div>
            <div class="item-tel__tour__info__item__code__block">
              <div class="item-tel__tour__info__item__code__block__item item-tel__tour__info__item__code__block__item--tour-code">
                <div class="item-tel__tour__info__item__code__block__item--title">ツアーコード</div>
                <div class="item-tel__tour__info__item__code__block__item--number">TC-EHP0004-FH251</div>
              </div>
              <div class="item-tel__tour__info__item__code__block__item">
                <div class="item-tel__tour__info__item__code__block__item--title">一枚刷りコード</div>
                <div class="item-tel__tour__info__item__code__block__item--number">HWI004-A</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item-tel__smartcall item-tel__block">
        <h4 class="item-tel__smartcall--title item-tel__block__main-title">旅スマコール</h4>
        <div class="item-tel__smartcall__info">
          <div class="item-tel__smartcall__info--title">通常のお電話よりも簡単・スムーズ!</div>
          <p class="item-tel__smartcall__info--text">ご覧になっている商品情報がスタッフに伝わり、通常のお電話よりも簡単でスムーズにお問い合わせ・予約ができる電話サービスです。</p>
          <p class="item-tel__smartcall__info--text">使い方は簡単!下のボタンを押して表示される電話番号にお電話ください。</p>
          <div class="item-tel__smartcall__info--btn">
            <button class="button button--color-accent tem-tel__smartcall__info--btn js-popup-smartcall"
            data-cryn_service_id="15109"
            data-cryn_session_no="1583368439.59051600729027"
            data-call_branch="MICRO"
            data-call_tel="03-6628-8137"
            data-phone_cookie="%7B%22portalNo%22%3A%2202A%22%2C%22portal%22%3A%22kanto%22%2C%22jareaNo%22%3A%2210%22%2C%22jarea%22%3A%22%5Cu6771%5Cu4eac%22%2C%22page%22%3A%22C-4%22%2C%22pageName%22%3A%22%5Cu5546%5Cu54c1%5Cu8a73%5Cu7d30%5Cu753b%5Cu9762%5Cu30fb%5Cu30c1%5Cu30e3%5Cu30aa%22%2C%22UA%22%3A%22Mozilla%5C%2F5.0%20%28Windows%20NT%2010.0%3B%20Win64%3B%20x64%29%20AppleWebKit%5C%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Chrome%5C%2F80.0.3987.122%20Safari%5C%2F537.36%22%2C%22URL%22%3A%22http%3A%5C%2F%5C%2Ftour.his-j.com%5C%2Fct%5C%2Fdetail.php%3Ftour%3DTX-HGA4000-FH201%22%2C%22C4URL%22%3A%22http%3A%5C%2F%5C%2Fe.his-j.com%5C%2Ftrip%5C%2Fciao%5C%2Fvoyage%5C%2F02A_10%5C%2FTX-HGA4000-FH201%5C%2F%22%2C%22relatedURL%22%3A%22http%3A%5C%2F%5C%2Ftour.his-j.com%5C%2Fct%5C%2FrelationTour.php%3Fportal%3D02A_10%26airport%3DNRT%26area%3DHGS%26city%3DGUM%26country%3DGUM%26id%3D6565891%26tour%3DTX-HGA4000-FH201%26hotel_class%3DD%26hotel_group%3DGUMCPN-ROGG%26leaflet%3DXWEB-GUM001-G%22%2C%22city_code%22%3A%22GUM%22%2C%22city%22%3A%22%5Cu30b0%5Cu30a2%5Cu30e0%22%2C%22tour%22%3A%22TX-HGA4000-FH201%22%2C%22title%22%3A%22%5Cu30103%5C%2F5%5Cu66f4%5Cu65b0%5Cu3011%5Cu25cf%5Cu30db%5Cu30fc%5Cu30e0%5Cu30da%5Cu30fc%5Cu30b8%5Cu9650%5Cu5b9a%5Cu5546%5Cu54c1%5Cu25cf%20%5Cu30aa%5Cu30f3%5Cu30e9%5Cu30a4%5Cu30f3%5Cu4e88%5Cu7d04%5Cu307e%5Cu305f%5Cu306f%5Cu30b3%5Cu30fc%5Cu30eb%5Cu30bb%5Cu30f3%5Cu30bf%5Cu30fc%5Cu4e88%5Cu7d04%5Cu9650%5Cu5b9a%20%5Cu203b%5Cu5e97%5Cu8217%5Cu4e88%5Cu7d04%5Cu4e0d%5Cu53ef%5Cu3010WEB%5Cu9650%5Cu5b9a%5Cu3011%20%5Cu5b89%5Cu5fc3%5Cu306e%5Cu5f80%5Cu8def%5Cu9001%5Cu8fce%5Cuff06LeaLea%5Cu30c8%5Cu30ed%5Cu30ea%5Cu30fc%5Cu6ede%5Cu5728%5Cu4e2d%5Cu4e57%5Cu308a%5Cu653e%5Cu984c%5Cu4ed8%5Cuff01%5Cu8857%5Cu4e2dWi-Fi%5Cu5229%5Cu7528%5Cu53ef%5Cu80fd%5Cuff01%5Cu30b0%5Cu30a2%5Cu30e04%5Cu65e5%5Cu9593%5Cu30a8%5Cu30b3%5Cu30ce%5Cu30df%5Cu30fc%5Cu30af%5Cu30e9%5Cu30b9%5Cu30db%5Cu30c6%5Cu30eb%5Cu306b%5Cu6ede%5Cu5728%22%2C%22airport_code%22%3A%22NRT%22%2C%22airport%22%3A%22%5Cu6210%5Cu7530%5Cu7a7a%5Cu6e2f%22%2C%22leaflet_num%22%3A%22XWEB-GUM001-G%22%7D">
              電話番号を表示する
            </button>
          </div>
        </div>
      </div>
      <div class="item-tel__call item-tel__block">
        <h4 class="item-tel__call--title item-tel__block__main-title">通常のお電話にてお問い合わせ</h4>
        <div class="item-tel__call__code">
          <div class="item-tel__call__code__block">
            <div class="item-tel__call__code--title">ツアーコード:</div>
            <div class="item-tel__call__code--text"><span class="code_number">TC-FSA0001-SP154</span>を</div>
          </div>
          <div class="item-tel__call__code--text">お伝えください。</div>
        </div>
      </div>
      <div class="item-tel__contact__info tel-template">
        <!-- 電話テンプレートを取得 -->
      </div>
    </div>
  </div>
</div>
  • 0
  • 0
anonymous PCサンプル 電話○店舗○の場合
HTML
<div id="nav__wrapper" class="js-lazy">

  <div class="nav__box nav__box--before-selected-date is-active">
    <div class="reservation-method__block">
      <div class="reservation-method__item reservation-method__item--tel js-open-tel-modal is-available">
        <p>電話で予約</p>
      </div>
      <div class="reservation-method__item reservation-method__item--store js-remarks-parent is-available">
        <p>店舗で予約</p>
        <div class="js-remarks-content item--store__container">
          <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
          <div class="store-template">
            <!-- 店舗テンプレートの取得 -->
          </div>
        </div>
      </div>
    </div>
    <div class="reservation-button__block">
      <div class="exclamation__icon exclamation__text"><span>人数・出発日をお選びください。</span></div>
      <button class="button nav__box_gonext--button js-open-conditions-modal js-open-conditions-modal--calendar">人数・出発日を選択</button>
    </div>
  </div>

  <div class="nav__box nav__box--after-selected-date">
    <div class="reservation-method__block">
      <div class="reservation-method__item reservation-method__item--tel js-open-tel-modal is-available">
        <p>電話</p>
      </div>
      <div class="reservation-method__item reservation-method__item--store js-remarks-parent is-available">
        <p>店舗</p>
        <div class="js-remarks-content item--store__container">
          <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
          <div class="store-template">
            <!-- 店舗テンプレートの取得 -->
          </div>
        </div>
      </div>
    </div>

    <div class="price__block">
      <div class="nav__box__price__block">
        <div class="nav__box_total--price">
          <p class="total_price--text">合計</p>
          <p class="total_price--amount"><span>228,800</span>円</p>
        </div>
        <button
          class="js-open-booking-details-modal price-detail__button">料金内訳</button>
      </div>
      <div class="nav__box__price--detail__block">
        <div class="nav__box__price--detail__block__item nav__box__price--detail__block__item--tour">
          <p>ツアー代金</p>
          <div class="nav__box__price--detail__block__item__price nav__box__price--detail__block__item__price--tour">
            <span>116,000</span>円
          </div>
        </div>
        <div class="nav__box__price__icon--plus"><img data-src="/front_resource_honban/c47/images/pc/common/icon/icon_plus.svg"></div>
        <div class="nav__box__price--detail__block__item nav__box__price--detail__block__item--tax">
          <p>諸税等</p>
          <div class="nav__box__price--detail__block__item__price nav__box__price--detail__block__item__price--tax">
            <span>10,110</span>円
          </div>
        </div>
      </div>
    </div>

    <div class="reservation-button__block">
      <div class="button button--type-outline re-select__button js-change-passenger-number">
        <p>人数・出発日変更</p>
        <div class="selected__content__block">
          <div class="selected__item selected__item--passenger"><span>4</span>名</div>
          <div class="selected__item selected__item--date"><span>2020/MM/DD</span>出発</div>
        </div>
      </div>
      <button class="button nav__box_gonext--button js-popup__terms-modal">予約へ進む</button>
    </div>
  </div>
</div>
  • 0
  • 0
anonymous タイトルなし
HTML
<div id="nav__wrapper" class="js-lazy">

  <div class="nav__box nav__box--before-selected-date is-active">
    <div class="reservation-method__block">
      <div class="reservation-method__item reservation-method__item--tel js-open-tel-modal is-available">
        <p>電話で予約</p>
      </div>
      <div class="reservation-method__item reservation-method__item--store js-remarks-parent is-available">
        <p>店舗で予約</p>
        <div class="js-remarks-content item--store__container">
          <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
          <div class="store-template">
            <div class="item--store__block item--store__block--image"><img data-src="/front_resource_honban/c47/images/pc/tourPoint/tour_point_1.png"></div>
            <div class="item--store__block item--store__block--text">
              <div class="block--text__title">HIS Hawaii 新宿三丁目本店</div>
              <div class="block--text__detail">ご来店でハワイのスペシャリストにご相談されたいお客様あ、ハワイ専門店がございますのでお気軽にお問い合わせください。</div>
            </div>
            <div class="item--store__block item--store__block--info">
              <div class="info__row">
                <div class="info__row__item">住所</div>
                <div class="info__row__text">東京都新宿区3-30-13 新宿マルイ本館7階</div>
              </div>
              <div class="info__row">
                <div class="info__row__item">営業時間</div>
                <div class="info__row__text">平日 9時~21時 土日祝 9時~18時</div>
              </div>
            </div>
            <button class="item--store__button button button--type-round button--icon-arrowRightWhite"><a href="#">他の店舗を探す</a></button>
          </div>
        </div>
      </div>
    </div>
    <div class="reservation-button__block">
      <div class="exclamation__icon exclamation__text"><span>人数・出発日をお選びください。</span></div>
      <button class="button nav__box_gonext--button js-open-conditions-modal js-open-conditions-modal--calendar">人数・出発日を選択</button>
    </div>
  </div>

  <div class="nav__box nav__box--after-selected-date">
    <div class="reservation-method__block">
      <div class="reservation-method__item reservation-method__item--tel js-open-tel-modal is-available">
        <p>電話</p>
      </div>
      <div class="reservation-method__item reservation-method__item--store js-remarks-parent is-available">
        <p>店舗</p>
        <div class="js-remarks-content item--store__container">
          <div class="item--store__title">店舗にて<span>お問い合わせ・ご予約</span></div>
          <div class="store-template">
            <div class="item--store__block item--store__block--image"><img data-src="/front_resource_honban/c47/images/pc/tourPoint/tour_point_1.png"></div>
            <div class="item--store__block item--store__block--text">
              <div class="block--text__title">HIS Hawaii 新宿三丁目本店</div>
              <div class="block--text__detail">ご来店でハワイのスペシャリストにご相談されたいお客様あ、ハワイ専門店がございますのでお気軽にお問い合わせください。</div>
            </div>
            <div class="item--store__block item--store__block--info">
              <div class="info__row">
                <div class="info__row__item">住所</div>
                <div class="info__row__text">東京都新宿区3-30-13 新宿マルイ本館7階</div>
              </div>
              <div class="info__row">
                <div class="info__row__item">営業時間</div>
                <div class="info__row__text">平日 9時~21時 土日祝 9時~18時</div>
              </div>
            </div>
            <button class="item--store__button button button--type-round button--icon-arrowRightWhite"><a href="#">他の店舗を探す</a></button>
          </div>
        </div>
      </div>
    </div>

    <div class="price__block">
      <div class="nav__box__price__block">
        <div class="nav__box_total--price">
          <p class="total_price--text">合計</p>
          <p class="total_price--amount"><span>228,800</span>円</p>
        </div>
        <button
          class="js-open-booking-details-modal price-detail__button">料金内訳</button>
      </div>
      <div class="nav__box__price--detail__block">
        <div class="nav__box__price--detail__block__item nav__box__price--detail__block__item--tour">
          <p>ツアー代金</p>
          <div class="nav__box__price--detail__block__item__price nav__box__price--detail__block__item__price--tour">
            <span>116,000</span>円
          </div>
        </div>
        <div class="nav__box__price__icon--plus"><img data-src="/front_resource_honban/c47/images/pc/common/icon/icon_plus.svg"></div>
        <div class="nav__box__price--detail__block__item nav__box__price--detail__block__item--tax">
          <p>諸税等</p>
          <div class="nav__box__price--detail__block__item__price nav__box__price--detail__block__item__price--tax">
            <span>10,110</span>円
          </div>
        </div>
      </div>
    </div>

    <div class="reservation-button__block">
      <div class="button button--type-outline re-select__button js-change-passenger-number">
        <p>人数・出発日変更</p>
        <div class="selected__content__block">
          <div class="selected__item selected__item--passenger"><span>4</span>名</div>
          <div class="selected__item selected__item--date"><span>2020/MM/DD</span>出発</div>
        </div>
      </div>
      <button class="button nav__box_gonext--button js-popup__terms-modal">予約へ進む</button>
    </div>
  </div>
</div>
  • 0
  • 0
anonymous タイトルなし
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Card Sample</title>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<div class="row justify-content-between">
			<div class="col-md-3 col-sm-6">
				<div class="card">
					<img src="https://placehold.jp/253x200.png?text=image" class="card-img-top" alt="">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="card">
					<img src="https://placehold.jp/253x200.png?text=image" class="card-img-top" alt="">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="card">
					<img src="https://placehold.jp/253x200.png?text=image" class="card-img-top" alt="">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
			<div class="col-md-3 col-sm-6">
				<div class="card">
					<img src="https://placehold.jp/253x200.png?text=image" class="card-img-top" alt="">
					<div class="card-body">
						<h5 class="card-title">Card title</h5>
						<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
						<a href="#" class="btn btn-primary">Go somewhere</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
  • 0
  • 1
anonymous タイトルなし
HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <header
      class="navbar border-bottom border-secondary"
      style="background-color: black;"
    >
      <div class="container">
        <a
          class="navbar-brand text-white"
          href="#"
          style="font-family: impact;
        font-size: 30px;
        font-style: italic;"
          >FC Monaco</a
        >
        <ul class="nav ml-auto">
          <li class="nav-item">
            <a class="nav-link text-white" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">company</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">about us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">contact</a>
          </li>
        </ul>
      </div>
    </header>
    <div
      class="jumbotron m-0"
      style="background-image: url(https://sce.scene7.com/is/image/playstation/pljm16256_s01?$JAcat_CapL$); background-size:cover; height:550px"
    >
      <h1 class="display-5 text-white">モナコからの刺客!!</h1>
      <p class="lead text-white">
        This is a simple hero unit, a simple jumbotron-style component for
        calling extra attention to featured content or information.
      </p>
      <hr class="my-4" />
      <p class="text-white">
        It uses utility classes for typography and spacing to space content out
        within the larger container.
      </p>
      <div class="btn-right d-flex flex-row-reverse">
        <a class="btn btn-success btn-lg m-5" href="#" role="button"
          >チームに応募しますか?</a
        >
      </div>
    </div>
    <div
      class="first-header p-2 border-top border-bottom border-success"
      style="background-color: black; color: white;"
    >
      <h1>Our Strategy</h1>
    </div>
    <div
      class="formation-box"
      style="background-color: black; width: 100%;
    height: 1000px;"
    >
      <div class="container">
        <div
          class="explanation d-flex justify-content-between p-3"
          style="height: 100px;"
        >
          <h2 class="text-white">2020 New Formation</h2>

          <p
            class="text-white ml-5 pt-2"
            style="font-style: italic; font-size: 20px;"
          >
            <img
              src="https://resources.premierleague.com/photos/premierleague/photo/2019/04/27/856e9745-f4a0-43d5-b066-442e8ab5b26d/1145484059.jpg?width=930&height=620"
              class="border rounded-pill mr-2"
              style="width:20;height:40px;"
            />
            Head Coatch: John Michael Sanders
          </p>
        </div>
        <div
          class="cort my-1 mx-auto"
          style="background-color:rgb(135, 180, 127); height:800px;width:600px;"
        >
          <div class="upper-coat d-flex flex-column" style="height: 400px;">
            <div
              class="goalline1 my-0 mx-auto border-top-0 border border-white"
              style="width:300px;height:200px"
            >
              <div
                class="goal my-0 mx-auto border-top-0 border border-white"
                style="width:100px;height:50px"
              >

              <button type="button" class="btn btn-md btn-warning rounded-lg mx-auto" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">GK

              </button>

            </div>
            </div>
          </div>
          <div class="horizon border border-white my-0"></div>

          <div class="lower-coat d-flex" style="height:400px;">
            <div
              class="goalline1 my-0 mx-auto border-bottom-0 border border-white d-flex align-self-end"
              style="width:300px;height:200px"
            >
            <div class="goal my-0 mx-auto border-bottom-0 border border-white align-self-end" style="width:100px;height:50px">
              </div>
          </div>
        </div>
      </div>
    </div>




    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </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.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
</head>
<body>
  <div class="container bg-dark" style="width: 700px;">
    <div class="row align-items-stretch" style="height: 700px;border: 5px solid #343a40;">
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">1</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">2</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">3</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">4</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">5</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">6</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">7</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">8</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;border: 5px solid #343a40;">9</div>
    </div>
  </div>
</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.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
</head>
<body>
  <div class="container bg-dark" style="width: 700px;">
    <div class="row align-items-stretch" style="height: 700px;">
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">1</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">2</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">3</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">4</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">5</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">6</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">7</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">8</div>
      <div class="col-4 d-flex align-items-center justify-content-center bg-info" style="text-align:center;">9</div>
    </div>
  </div>
</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.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container my-3 mx-auto bg-dark d-flex"
      style="width: 700px;
    height: 700px;"
    >
      <div class="row">
        <div
          class="box p-1 m-2 bg-info col-3"
          style="

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          1
        </div>

        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          2
        </div>

        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;
                text-align: center;
                font-weight: bold;
                line-height: 50;">3</div>

        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;
                  text-align: center;
                  font-weight: bold;
                  line-height: 50;">4</div>

        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          5
        </div>
        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          6
        </div>
        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          7
        </div>
        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          8
        </div>
        <div
          class="box p-2 m-2 bg-info col-3"
          style="font-style: 20px;

      text-align: center;
      font-weight: bold;
      line-height: 50;"
        >
          9
        </div>
      </div>
    </div>
  </body>
</html>
  • 0
  • 0
てる てる タイトルなし
HTML
<?php
    session_start();

    $err=[];

    if(isset($_POST['state'])){

      if($_POST['name']==''){
        $err['name']='氏名が入力されていません。';
      }

      if($_POST['id']==''){
        $err['id']='ログインIDが入力されていません。';
      }
      elseif(strlen($_POST['id'])< 6 || 12 < strlen($_POST['id'])){
        $err['id']='ログインIDは6桁から12桁で入力してください。';
          }

          if($_POST['password'] == ''){
            $err['password']='パスワードが入力されていません。';
          }
          elseif(strlen($_POST['password']) < 6 || 12 < strlen($_POST['password'])){
            $err['password']='パスワードは6桁から12桁で入力してください。';
              }

      if(count($err)==0){
        $_SESSION['post']=$_POST;
        header('location:./confirm.php');
        exit;
      }
    }

    $data_list=[
      'name'=>'',
      'id'=>'',
      'password'=>'',
    ];

    foreach ($data_list as $key => $data) {
      if(isset($_POST[$key])) $data_list[$key] = $_POST[$key];
      if(!isset($err[$key])) $err[$key]='';
    }


?>
<!doctype html>
<html lang='ja'>

    <head>
        <meta charset='UTF-8'>
        <title></title>
    </head>










  <body>
    <h1>会員登録</h1>
    <form method="post">
      <table>
        <tr>
          <td>ニックネーム</td>
          <td>
            <input type="text"name="name"value="<?php echo $data_list['name'];?>">
            <span class="err"><?php echo $err['name'];?></span>
          </td>
        </tr>
        <tr>
          <td>ログインID</td>
          <td>
            <input type="text"name="id"value="<?php echo $data_list['id'];?>">
            <span class="err"><?php echo $err['id'];?></span>
          </td>
        </tr>
        <tr>
          <td>パスワード</td>
          <td>
            <input type="password" name="password">
            <span class="err"><?php echo $err['password'];?></span>
          </td>
        </tr>
        <tr><td colspan="2"><button type="submit" name="state" value="input">入力した内容を確認する</button></td></tr>
      </table>
    </form>
  </body>
</html>
  • 0
  • 1
あなたもコードを投稿しませんか?
投稿する