<iframe>

width

height

justify-content: space-between

<section class="access">
  <h2 class="access-title">ACCESS</h2>
  <div class="access-container">
    <div class="access-info">
      <dl class="access-item">
        <dt class="access-item-title">会社名</dt>
        <dd class="access-item-text">株式会社コードレッスン</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">代表取締役</dt>
        <dd class="access-item-text">山田 太郎</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">所在地</dt>
        <dd class="access-item-text">〒100-0005 東京都千代田区丸の内1丁目</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">連絡先</dt>
        <dd class="access-item-text">test@gmail.com</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">資本金</dt>
        <dd class="access-item-text">1000万円</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">設立</dt>
        <dd class="access-item-text">2024年3月</dd>
      </dl>
    </div>
    
    
    <div class="access-map">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8280306898537!2d139.7645498764484!3d35.68123617258723!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1711027976043!5m2!1sja!2sjp"
        width="600"
        height="450"
        style="border: 0"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      ></iframe>
    </div>
  </div>
</section>

* {
  font-size: 16px;
  list-style: none;
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: #333;
}

.access {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 16px;
}

.access-title {
  font-size: 32px;
  text-align: center;
}

.access-container {
  margin-top: 40px;
  display: flex;
  /* 問題3.コンテンツの余白を調整してください */
  /* この下に解答してください */
  justify-content: space-between;
}

.access-info {
  width: 48%;
}

.access-item {
  display: flex;
  border-top: 1px solid #e5e9ef;
  padding: 16px;
}

.access-item:last-child {
  border-bottom: 1px solid #e5e9ef;
}
.access-item-title {
  width: 120px;
}

/* 問題2.埋め込んだGoogleマップをスタイリングしてください */
/* この下に解答してください */
.access-map {
  width: 48%;
}

iframe {
  width: 100%;
  height: 100%;
}


<section class="access">
  <h2 class="access-title">ACCESS</h2>
  <div class="access-container">
    <div class="access-info">
      <dl class="access-item">
        <dt class="access-item-title">会社名</dt>
        <dd class="access-item-text">株式会社コードレッスン</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">代表取締役</dt>
        <dd class="access-item-text">山田 太郎</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">所在地</dt>
        <dd class="access-item-text">〒100-0005 東京都千代田区丸の内1丁目</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">連絡先</dt>
        <dd class="access-item-text">test@gmail.com</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">資本金</dt>
        <dd class="access-item-text">1000万円</dd>
      </dl>
      <dl class="access-item">
        <dt class="access-item-title">設立</dt>
        <dd class="access-item-text">2024年3月</dd>
      </dl>
    </div>
    
    
  </div>
</section>

* {
  font-size: 16px;
  list-style: none;
  font-weight: normal;
  margin: 0;
  padding: 0;
  color: #333;
}

.access {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 16px;
}

.access-title {
  font-size: 32px;
  text-align: center;
}

.access-container {
  margin-top: 40px;
  display: flex;
  /* 問題3.コンテンツの余白を調整してください */
  /* この下に解答してください */
}

.access-info {
  width: 48%;
}

.access-item {
  display: flex;
  border-top: 1px solid #e5e9ef;
  padding: 16px;
}

.access-item:last-child {
  border-bottom: 1px solid #e5e9ef;
}
.access-item-title {
  width: 120px;
}

/* 問題2.埋め込んだGoogleマップをスタイリングしてください */
/* この下に解答してください */


マップコンテンツを作成

max-width

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

font-size

text-align

display: flex

アクセスセクションと見出しを作成

border

:first-child, :last-child

アクセス情報コンテンツを作成

メディアクエリ

flex-direction(垂直)

レスポンシブ対応

iframeタグを使用してGoogleマップを埋め込み、レスポンシブ対応するテクニックを習得します。


0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。