<main>
  <h1>東京</h1>
  <p>
    東京は、日本の地名。関東平野中央部に位置し、東京湾に面する都市。日本の首都機能がある。 </p>

 <p>「東京」は、日本の首都であり広域的地方公共団体である東京都を指す場合と、特に東京都区部(東京23区)のみを指す場合とがある。 </p>

 <p><mark>日本における政治・経済・文化の中心</mark>である。政治面では、日本政府が本拠地としている。立法府である国会の議事堂、司法府の頂点である最高裁判所、行政府の長である内閣総理大臣の官邸、中央省庁街(「霞が関」)などは、いずれも東京の中心部である東京23区にある。 </p>
   
  <p>経済面では、日本の株式上場企業の本社のほとんどが東京に集中し、(東京圏では)購買力平価(PPP)を基にしても東京都市圏のGDPは1兆5369億ドル(2014年)であり、<mark>世界的な経済都市であり、大消費地でもある。 </mark></p>
    
<p>文化面では、たとえば現在では(東京都内に)千数百におよぶ劇場・ホール・ライブハウス類があり多数のアーティストたちが活動する場であり、ポップカルチャーなどの新しい文化の発信地でもあり、<mark>ミシュランガイドの星つきの飲食店の数は世界最多</mark>で食文化が華開いている場所でもある。 </p>

 <p>東京には、日本国内からだけでなく近隣の様々な国や世界各国から外国人が観光に訪れるようになった他、東京に移住した外国人が移民街を形成している。 </p>
 
<p>関東大震災や東京大空襲で焼け野原となったが、戦後の発展により現在は<mark>世界最大級のメトロポリス・世界都市</mark>となっている。 </p>
      
  <p>東京は明治期にも課題が山積みの都市であったが(#明治維新後の課題と都市政策を参照)、<mark>現在もさまざまな課題を抱えている都市</mark>である。
  </p>
  <p>by <a href="https://ja.wikipedia.org/wiki/東京">wikipedia</a></p>
</main>





<span>Default style by<img src="https://app.native-elements.dev/favicon.svg" width="20"> <a href="https://native-elements.dev" target="_blank">Native Elements</a></span>
mark {
  --color1: springgreen;
  --color2: springgreen;
  --bg-height: 40%;
    
  all: unset;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color1)), to(var(--color2)));
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  -webkit-animation: highlight 800ms 1 ease-out;
          animation: highlight 800ms 1 ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}


@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}


@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

/* DEMO RELATED CODE*/

main {
  width: min(50ch, 80%);
  margin: 0 auto;
  padding: 100px 0;
}

span {
  white-space: nowrap;
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-size: 0.8rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center
}

span img {
    margin: 0 0 0 4px;
  }
(function (document) {
  const markers = [...document.querySelectorAll('mark')];
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.style.animationPlayState = 'running';
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.8
  });
  
  markers.forEach(mark => {
    observer.observe(mark);
  });
})(document);

External CSS

  1. https://cdn.jsdelivr.net/npm/@native-elements/core@1/native-elements.css

External JavaScript

This Pen doesn't use any external JavaScript resources.