Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- layout|レイアウトと連番のみです。 -->
<ul class="counter-list">
<li class="counter-item">
  <p>サンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</li>
<li class="counter-item">
  <p>サンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</li>
<li class="counter-item">
  <p>サンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</li>
</ul>

<!-- DesignSample|サンプル画像とテキストが入っています。 -->
<ul class="counter-list">
<li class="counter-item">
    <div class="heading"><span class="en">COMPANY</span><h2 class="ja">会社概要</h2></div>
    <p><img src="https://dl.dropbox.com/s/qswj9fkc9zlja6c/20210529_a.jpg?dl=0" alt=""></p>
    <p class="ttl">大切にしているのは自然にお客様らしさを引き出すこと</p>
    <p class="copy">地域に根ざして20年。常に私たちはお客様に寄り添ってまいりました。そしてこれからも、お客様の魅力を全国に伝えるべく、「らしさ」を引き出せる環境・コミュニケーション作りに尽力いたします。</p>
</li>
<li class="counter-item">
    <div class="heading"><span class="en">STAFF</span><h2 class="ja">スタッフ紹介</h2></div>
    <p><img src="https://dl.dropbox.com/s/qswj9fkc9zlja6c/20210529_a.jpg?dl=0" alt=""></p>
    <p class="ttl">一緒に働く個性豊かなスタッフをご紹介いたします。</p>
    <p class="copy">魅力を引き出し伝えるには、デザインの力が必要不可欠です。しかし、それ以上にディレクター・デザイナー・エンジニアの全員が一致団結した組織力であなたのビジネスを全力で応援いたします。</p>
</li>
<li class="counter-item">
    <div class="heading"><span class="en">RECRUIT</span><h2 class="ja">採用情報</h2></div>
    <p><img src="https://dl.dropbox.com/s/qswj9fkc9zlja6c/20210529_a.jpg?dl=0" alt=""></p>
    <p class="ttl">弊社では共に学び・働く仲間を募集しております。</p>
    <p class="copy">誰でも一人で仕事をすることはできません。私たちは個人の能力はもちろんですが、スタッフみんなで協力して進められるメンバーを募集しています。</p>
</li>
</ul>


              
            
!

CSS

              
                /*------- layout -------*/
.counter-list {
  position: relative;
	display: flex;
	justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  padding: 10% 8%;
}
li.counter-item {
		list-style: none;
	  flex: 0 1 30%;
}
.counter-item {
	counter-increment: sample; /* 任意の名前を指定|今回はsample */
	position: relative;
	padding-top: 70px;
}
.counter-item::before {
	content: counter(sample, decimal-leading-zero);
  /* ゼロ1つ付き */
  /*content: counter(sample);*/
  /*1/2/3|ゼロ無し */
  /*content: '0' counter(sample, decimal-leading-zero);*/
  /*001/002/003|ゼロ2つ付き */
	position: absolute;
	width: 100%;
	height: auto;
	top:  0;
	left:  0;
	font-size: 8.6rem;
	line-height: 1.0;
  font-family: 'Playfair Display', serif;
	color: #dbdbdb;
	z-index: -1;
}
.counter-item:nth-child(1)::after,
.counter-item:nth-child(2)::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	top:  0;
	left:  108.33333%;
	background-color: #999;
}
/*------768px以下------*/
@media screen and (max-width: 768px){ 
  .counter-list {
    flex-direction: column;
  }
  .counter-item:not(:last-child) {
    margin-bottom: 40px;
  }
  .counter-item:nth-child(1)::after,
  .counter-item:nth-child(2)::after {
    width: 100%;
    height: 1px;
    top:  calc(100% + 20px);
    left:  0;
  }
}


/*------- detail|飾りのサンプルテキスト -------*/
.heading {
  margin-bottom: 24px;
}
.heading .en {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  line-height: 1.0;
  padding-bottom: 4px;
}
.heading .ja {
  font-size: 1.2rem;
  line-height: 1.0;
  letter-spacing: 0.1em;
}
.ttl {
	font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 12px;
}
.copy {
  line-height: 1.4;
}
.copy:first-letter{
  font-size: 2.2rem;
  padding: 4px 6px 0;
  line-height: 1;
  float: left;
}



/*------------------------*/
/*------------------------*/
/*------- BASE -------*/
body {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック", "YuGothic", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", sans-serif;
	font-size: 16px;
  color: #333;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
  margin:0;
	font-weight: normal;
}
p img {
  max-width: 100%;
  margin-bottom: 10px;
}
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap);

              
            
!

JS

              
                
              
            
!
999px

Console