Web白描

Webデザインの勉強 - 演習

課題13 BLOG

★レスポンシブ実践

課題13 BLOG

  • テキスト「Part3」の「2カラムレイアウト」を応用


テキスト例
Travel Blog - スペイン編

NEW
COLUMN
SERIES
Q&A
CONTACT

スペイン観光に欠かせないのがアントニ・ガウディが残した建築物
READ MORE

スペイン南部のアンダルシア地方にある「白い村（プエブロ・ブランコ）」
READ MORE

アンダルシアのマラガにある「フリヒリアナ」坂道、階段が迷路のように曲がりくねっている
READ MORE

ヘレス・デ・ラ・フロンテーラ
2023/09/02
アンダルシア
へレス・デ・ラ・フロンテーラは、ワイン、馬、フラメンコで有名であり、歴史的・芸術的建築群に指定されている旧市街が保存されています。
カディスで最も高貴な町の一つは、典型的なアンダルシアの家の雰囲気をもつ貴族の館が結集する場所です。 毎年、世界観光財産に指定される馬祭りが開催されます。
READ MORE

セタス・デ・セビリア
2023/08/14
セビリア
セタス・デ・セビリアは、「キノコの化身」として知られるメトロポール・パラソルは世界最大の木造建築物です。
ドイツの建築家ユルゲン・マイヤーが設計し、2011年に落成したこの建物は、高さが26メートルほどあります。六つの大きなキノコ型のパラソルが組み合わさった造りの建物です。
READ MORE

イビサタウン
2023/07/22
イビサ
イビサ島はヨーロッパでナイトクラブ文化が最も盛んな場所として知られていますが、イビサタウンのような文化と歴史の名所にも恵まれています。
この地中海の港町は、島の主要都市でもあり、漆喰塗りの家屋やビーチ、保存状態の良い旧市街の建築物などが楽しめる魅力的な観光地でもあります。
READ MORE


田中 景子
自然の中に完全に溶け込み、長時間じっくりと被写体を観察することで、最高の一瞬を逃さずに捉えることを心情にしています。

Ranking
アルハンブラ宮殿
マリョルカ島
フリヒリアナ夜景

Archive
2024年03月(4)
2024年02月(8)
2024年01月(2)
2023年12月(3)
2023年11月(5)
2023年10月(5)
2023年09月(2)
2023年08月(9)
2023年07月(6)
2023年06月(1)
2023年05月(2)
2023年04月(4)
2023年03月(2)
2023年02月(3)
2023年01月(1)

About
カメラマンである「田中 景子」がスペインを巡って撮り続けた記録を、ブログに写真とともに残しています。 スペインの自然と町並みをお楽しみ下さい。
プロフィール詳細
お仕事の依頼
お問い合わせ

Menu
NEW
CATEGORY
COLUMN
SERIES
Q&A

Twitter
Tweets by TwitterJP

© Travel & Blog

unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com
unsplash.com

ワイヤーフレーム
  • ブログの記事は、「ピックアップ」「メイン内」もすべて「article」で囲む
  • 特に「メイン内」は、「ul」でひとまとめにするのではなく、単独で利用できるように個別に「article」で囲みます
  • 本来「aside」にも「h2」が必須なのですが、今回は割愛しているため「aside」内の「section」の見出しは「h3」を指定します

記述例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Travel Blog - スペイン編</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

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

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

  <div class="header_wrap">
    <h1>
      <a href="#"><img src="img/logo.svg" alt="Travel Blog - スペイン編"></a>
    </h1>

    <!-- nav -->
    <nav class="gnav">
      <ul>
        <li><a href="#">NEW</a></li>
        <li><a href="#">COLUMN</a></li>
        <li><a href="#">SERIES</a></li>
        <li><a href="#">Q&amp;A</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div><!-- /.header_wrap -->

</header>
<!-- /header -->

<!-- pickup -->
<article class="pickup">
  <ul>
    <li>
      <img src="img/pickup1_a.webp" alt="">
      <h2 class="article_title">スペイン観光に欠かせないのがアントニ・ガウディが残した建築物</h2>
      <div class="readmore"><a href="#">READ MORE</a></div>
    </li>
    <li>
      <img src="img/pickup2_a.webp" alt="">
      <h2 class="article_title">スペイン南部のアンダルシア地方にある「白い村（プエブロ・ブランコ）」</h2>
      <div class="readmore"><a href="#">READ MORE</a></div>
    </li>
    <li>
      <img src="img/pickup3_a.webp" alt="">
      <h2 class="article_title">アンダルシアのマラガにある「フリヒリアナ」坂道、階段が迷路のように曲がりくねっている</h2>
      <div class="readmore"><a href="#">READ MORE</a></div>
    </li>
  </ul>
</article>

<div class="container wrapper">

  <!-- main -->
  <main class="main">

    <!-- article -->
    <article class="article">
      <h2><a href="#">ヘレス・デ・ラ・フロンテーラ</a></h2>
      <ul class="meta">
        <li><a href="#"><time datetime="2023-09-02">2023/09/02</time></a></li>
        <li><a href="#">アンダルシア</a></li>
      </ul>
      <a href="#"><img src="img/main1_a.webp" alt=""></a>
      <p class="text">へレス・デ・ラ・フロンテーラは、ワイン、馬、フラメンコで有名であり、歴史的・芸術的建築群に指定されている旧市街が保存されています。
      カディスで最も高貴な町の一つは、典型的なアンダルシアの家の雰囲気をもつ貴族の館が結集する場所です。 毎年、世界観光財産に指定される馬祭りが開催されます。</p>
      <div class="readmore"><a href="#">READ MORE</a></div>
    </article>

    <!-- article -->
    <article class="article">
      <h2 class="article_title"><a href="#">セタス・デ・セビリア</a></h2>
      <ul class="meta">
        <li><a href="#"><time datetime="2023-08-14">2023/08/14</time></a></li>
        <li><a href="#">セビリア</a></li>
      </ul>
      <a href="#"><img src="img/main2_a.webp" alt=""></a>
      <p class="text">セタス・デ・セビリアは、「キノコの化身」として知られるメトロポール・パラソルは世界最大の木造建築物です。
      ドイツの建築家ユルゲン・マイヤーが設計し、2011年に落成したこの建物は、高さが26メートルほどあります。六つの大きなキノコ型のパラソルが組み合わさった造りの建物です。</p>
      <div class="readmore"><a href="#">READ MORE</a></div>
    </article>

    <!-- article -->
    <article class="article">
      <h2 class="article_title"><a href="#">イビサタウン</a></h2>
      <ul class="meta">
        <li><a href="#"><time datetime="2023-07-22">2023/07/22</time></a></li>
        <li><a href="#">イビサ</a></li>
      </ul>
      <a href="#"><img src="img/main3_a.webp" alt=""></a>
      <p class="text">イビサ島はヨーロッパでナイトクラブ文化が最も盛んな場所として知られていますが、イビサタウンのような文化と歴史の名所にも恵まれています。
      この地中海の港町は、島の主要都市でもあり、漆喰塗りの家屋やビーチ、保存状態の良い旧市街の建築物などが楽しめる魅力的な観光地でもあります。</p>
      <div class="readmore"><a href="#">READ MORE</a></div>
    </article>

  </main>
  <!-- /main -->

  <!-- aside -->
  <aside class="sidebar">

    <!-- author -->
    <section class="author">
      <img src="img/author_a.webp" alt="">
      <h3>田中 景子</h3>
      <p class="profile">
        自然の中に完全に溶け込み、長時間じっくりと被写体を観察することで、最高の一瞬を逃さずに捉えることを心情にしています。
      </p>
    </section>

    <!-- ranking -->
    <section class="ranking">
      <h3>Ranking</h3>
      <ul>
        <li>
          <a href="#">
            <img src="img/ranking1_a.webp" alt="">
            <h4 class="article_title">アルハンブラ宮殿</h4>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/ranking2_a.webp" alt="">
            <h4 class="article_title">マリョルカ島</h4>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/ranking3_a.webp" alt="">
            <h4 class="article_title">フリヒリアナ夜景</h4>
          </a>
        </li>
      </ul>
    </section>

    <!-- archive -->
    <section class="archive">
      <h3>Archive</h3>
      <ul>
        <li><a href="#">2024年03月</a>(4)</li>
        <li><a href="#">2024年02月</a>(8)</li>
        <li><a href="#">2024年01月</a>(2)</li>
        <li><a href="#">2023年12月</a>(3)</li>
        <li><a href="#">2023年11月</a>(5)</li>
        <li><a href="#">2023年10月</a>(5)</li>
        <li><a href="#">2023年09月</a>(2)</li>
        <li><a href="#">2023年08月</a>(9)</li>
        <li><a href="#">2023年07月</a>(6)</li>
        <li><a href="#">2023年06月</a>(1)</li>
        <li><a href="#">2023年05月</a>(2)</li>
        <li><a href="#">2023年04月</a>(4)</li>
        <li><a href="#">2023年03月</a>(2)</li>
        <li><a href="#">2023年02月</a>(3)</li>
        <li><a href="#">2023年01月</a>(1)</li>
      </ul>
    </section><!-- /.archive -->

  </aside>
  <!-- /aside -->

</div><!-- /.container -->

<!-- footer -->
<footer class="footer">

  <div class="footer_content wrapper">

    <!-- item -->
    <section class="item">
      <h3>About</h3>
      <p>カメラマンである「田中 景子」がスペインを巡って撮り続けた記録を、ブログに写真とともに残しています。
      スペインの自然と町並みをお楽しみ下さい。
      </p>
      <ul class="about_list">
        <li><a href="#" class="arrow">プロフィール詳細</a></li>
        <li><a href="#" class="arrow">お仕事の依頼</a></li>
        <li><a href="#" class="arrow">お問い合わせ</a></li>
      </ul>
    </section>

    <!-- item -->
    <section class="item">
      <h3>Menu</h3>
      <ul class="menu_list">
        <li><a href="#">NEW</a></li>
        <li><a href="#">CATEGORY</a></li>
        <li><a href="#">COLUMN</a></li>
        <li><a href="#">SERIES</a></li>
        <li><a href="#">Q&A</a></li>
      </ul>
    </section>

    <!-- item -->
    <section class="item">
      <h3>Twitter</h3>
      <a class="twitter-timeline" data-height="315px" data-dnt="true" href="https://twitter.com/TwitterJP?ref_src=twsrc%5Etfw">Tweets by TwitterJP</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </section>

  </div><!-- /.wrapper -->

  <p class="copyright"><small>&copy; Travel &amp; Blog</small></p>

</footer>
<!-- /footer -->

</body>
</html>

style.css

@charset "UTF-8";

/* ---------------------------------------
  reset
--------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

@media screen and (max-width: 767px) {
  html {
    font-size: 90%;
  }
}


/* ---------------------------------------
  body
--------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 1.0rem;
  font-family:
    "Josefin Sans", "Noto Sans JP", sans-serif;
  line-height: 1.0;
}


/* ---------------------------------------
  layout
--------------------------------------- */
.wrapper  {
  width: min(94%, 1200px);
  margin-inline: auto;
  padding-inline: 16px;
}
.container {
  display: grid;
  grid-template-columns: 64% 30%;
  gap: 6%;
  margin-bottom: 60px;
}
.main, .sidebar {
  width: 100%;
}

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


/* ------------- readmore ------------- */
.readmore {
  font-size: 0.875rem;
  text-align: center;
}
  .readmore a {
    padding-bottom: 1px;
    color: #333;
    position: relative;
  }
    .readmore a::after {
      content: '';
      position: absolute;
      height: 1px;
      width: 100%;
      left: 0;
      bottom: 0;
      background: #333;
      transition: all 200ms ease;
    }
    .readmore a:hover::after {
      opacity: 0;
      transform: translateY(3px);
    }

@media screen and (max-width: 767px) {
  .readmore a {
    display: block;
    width: 100%;
    padding-block: 12px 10px;
    border: 1px solid #666;
    font-size: 0.875rem;
  }
  .readmore a::after {
    content: none;
  }
}


/* ---------------------------------------
  heder
--------------------------------------- */
.header {
  width: 100%;
  padding-block: 20px 10px;
  background-color: rgba(255, 255, 255, 1.0);
  position: fixed;
  z-index: 1000;
}
  .header_wrap {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    gap: auto;
    align-items: center;
    width: min(94%, 1200px);
    margin-inline: auto;
    padding-inline: 16px;
  }
    .header h1 {
      display: inline-block;
      margin-right: auto;
    }
      .header h1 > a {
        line-height: 1px;
      }

@media screen and (max-width: 767px) {
  .header_wrap {
    display: block;
  }
    .header_wrap h1 {
      display: block;
      text-align: center;
    }
}


/* ---------------------------------------
  nav
--------------------------------------- */
.gnav {
  margin-bottom: 6px;
  margin-inline: auto;
  padding-top: 20px;
}
.gnav ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 40px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
.gnav li {
  font-size: 0.9rem;
}
  .gnav li a{
  position: relative;
  }
  .gnav li.current a,
  .gnav li a:hover{
    color:#0481A2;
  }
    .gnav li a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -10%;
      width: 120%;
      height: 2px;
      background:#0481A2;
      transition: all .3s;
      transform: scale(0, 1);
      transform-origin: center top;
    }
      .gnav li.current a::after,
      .gnav li a:hover::after {
          transform: scale(1, 1);
      }


@media screen and (max-width: 767px) {
  .gnav ul {
    place-content: center;
    justify-content: center;
    gap: 20px;
    font-size: 0.875rem;
  }
}


/* ---------------------------------------
  main
--------------------------------------- */

/* -------------- pickup -------------- */
.pickup > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: min(94%, 1200px);
  padding-top: 80px;
  padding-inline: 16px;
  margin-bottom: 60px;
  margin-inline: auto;
}
  .pickup h2 {
    margin-block: 10px 15px;
    font-size: 0.9rem;
    line-height: 1.4;
  }

@media screen and (max-width: 767px) {
  .pickup > ul {
    display: block;
  }
  .pickup li {
    margin-bottom: 30px;
  }
}


/* -------------- article -------------- */

.article h2 {
  font-size: 1.5rem;
  margin-block: 30px 10px;
}
.article ul {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 10px;
}
  .article li {
    font-size: 1.0rem;
  }
  .article img {
    margin-bottom: 20px;
  }
  .text {
    padding-bottom: 30px;
    padding-inline: 40px;
    line-height: 1.7;
    white-space: pre-line;
  }

@media screen and (max-width: 767px) {
  .article {
    margin-bottom: 50px;
  }
  .article h2 {
    font-size: 1.25rem;
  }
  .text {
    padding-bottom: 20px;
    padding-inline: 0;
  }
}

/* ---------------------------------------
  aside
--------------------------------------- */
.sidebar {
  padding-top: 20px;
}
  .sidebar h3 {
    font-size: 1.125rem;
    margin-bottom: 30px;
  }


/* -------------- author -------------- */
.author {
  text-align: center;
  margin-bottom: 60px;
}
  .author img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin-bottom: 30px;
  }
    .author h3 {
      margin-bottom: 16px;
    }
    .author .profile {
      font-size: 0.875rem;
      line-height: 1.6;
      text-align: left;
    }


/* -------------- ranking -------------- */
.ranking {
  margin-bottom: 60px;
  text-align: center;
}
  .ranking h3 {
    margin-bottom: 20px;
  }
  .ranking li {
    margin-bottom: 20px;
  }
    .ranking img {
      margin-bottom: 12px;
    }
    .ranking h4 {
      font-size: 0.875rem;
      font-weight: normal;
    }


/* -------------- archive -------------- */
.archive {
  text-align: center;
}
  .archive ul {
    border-bottom: solid  1px #666;
  }
    .archive li {
      font-size: 0.875rem;
      border-top: solid  1px #666;
      padding: 20px;
      text-align: left;
    }


/* ---------------------------------------
  footer
--------------------------------------- */
.footer {
  padding-block: 50px 20px;
  background-color: #F7F7F7;
  font-size: 0.875rem;
}
  .footer_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    padding-bottom: 50px;
  }
  .footer_content h3 {
    font-size: 1.125rem;
    margin-bottom: 30px;
  }
  .footer_content p {
    line-height: 1.6;
    text-align: justify;
  }
  .copyright {
    text-align: center;
  }

@media screen and (max-width: 767px) {
  .footer_content {
    display: block;
    padding-bottom: 20px;
  }
  .item {
    margin-bottom: 50px;
  }
  .footer_content h3 {
    margin-bottom: 20px;
  }
}
  

/* -------------- about -------------- */
  .about_list {
    margin-block: 20px;
  }
    .about_list li {
      margin-bottom: 16px;
    }
    .about_list .arrow {
      position: relative;
      display: inline-block;
      padding-left: 12px;
      color: #333;
    }
    .about_list .arrow::before {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 0 6px 8px;
      border-color: transparent transparent transparent #333;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -8px;
    }


/* -------------- menu -------------- */
.menu_list {
  border-bottom: solid  1px #777;
}
  .menu_list > li {
    border-top: solid  1px #777;
    padding: 15px;
    text-align: left;
  }
白描画（はくびょうが）

筆の線だけで制作された絵画であり、白画ともいう。
白描画は色彩をともなわず、あくまで筆線のみで完成された作品をさす。