cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<h2>東京</h2>

<div class="ticker-wrap">
<div class="ticker">
  <div class="ticker__item"><a href="#">CSSだけでニュースティッカー</a></div>
  <div class="ticker__item">いろいろなニュース</div>
  <div class="ticker__item">CSSは難しい</div>
  <div class="ticker__item">今日はいい天気だ</div>
 
</div>
</div>

<p>東京(とうきょう、英語: Tokyo)は、日本の関東平野中央部の東京湾に面する地域、もしくは同域に存在する世界都市である。都市圏として世界最大の人口・経済力を擁しており、現在の日本の事実上の首都である。

江戸幕府の所在地・江戸が慶応4年7月(1868年9月)に「東京」に名称変更された。都が京都から明治2年3月28日に「東京」に遷されている。</p>

<p>
  1868年に江戸(江戸幕府の所在地)から名称変更された。東京奠都を経て、現在では事実上の首都機能を担っている都市である。場所は関東平野にあり東京湾に面している。

「東京」という名称を用いる構想は江戸時代後期の佐藤信淵の書にあり、大久保利通がその書の影響を受けつつ「東京」とすることを建言した。→#名称の由来

1868年(慶応4年)に府制を施行、東京府となった。

1878年(明治11年)に伊豆諸島、1880年(明治13年)に小笠原諸島を編入。

1889年(明治22年)5月1日には、東京15区を東京府から分立して東京市とした。

1893年(明治26年)4月1日に、東京府及び神奈川県境域変更に関する法律により、多摩地域は神奈川県から東京府へ編入されてほぼ現在の東京都の境域が確定した。

東京市は、1923年(大正12年)の関東大震災によって人口が増加した周辺の町村を1932年(昭和7年)に合併し35区になった。市域は最終的には現在の東京都区部とほぼ同地域となった。

1938年(昭和13年)6月に内務省が「東京都制案要綱」発表し、1943年(昭和18年)1月に政府が「東京都制案」を帝国議会に提出し可決されたことを受け、同年7月1日に東京都制が施行され、東京府と東京市を廃止する形で東京都に統合された。35区は1947年(昭和22年)3月15日に東京22区に再編され、同年5月3日の地方自治法施行により同法の定める特別区となった。同年8月1日、旧練馬町ほか4村の区域が板橋区から分離して練馬区となって東京23区となり、現在に至っている。

現在は、東京には、23特別区・26市・5町・8村の基礎自治体がある。人口は(2010年時点で)1316万人。

現在(2010年代時点)、国際連合の統計によると、東京は世界最大の都市と評価されており、川崎・横浜などとともに世界最大の人口を有する都市圏(約3500万人)を形成している。都市単位の経済規模 (GDP)ではニューヨークを凌ぎ、世界最大である。日本の森ビル傘下の民間研究所が2017年に発表した「世界の都市総合力ランキング」では、ロンドン・ニューヨークに次ぐ世界3位と評価された。また、アメリカのシンクタンクが2017年に発表した総合的な世界都市ランキングでは、ロンドン・ニューヨーク・パリ・シンガポールに次ぐ世界5位と評価された。

英国情報誌モノクル (MONOCLE) による「世界の住みやすい都市ランキング」では、2013年版では5位、2014年版では2位[7]、2015年版では1位。
</p>

<p>Ticker content c/o <a href="http://hipsum.co/">Hipsum.co</a></p>

            
          
!
            
              * {
  box-sizing: border-box;
}

@keyframes ticker {
  0% {
    transform: translate(0, 0);
    visibility: visible;
  }
  100% {
    transform: translate(-100%, 0);
  }
}
.ticker-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 2rem;
  background-color: rgba(0, 0, 0, 0.9);
  padding-left: 100%;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 30s;
}
.ticker-wrap .ticker__item,
.ticker-wrap .ticker__item a{
  display: inline-block;
  padding: 0 2rem;
  font-size: 1rem;
  color: white;
}

.ticker-wrap:hover .ticker{
  animation-play-state: paused;
}

h1, h2, p {
  padding: 0 5%;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console