123

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
  <small>Equal Height Columns</small>
  <h3>CSSだけで高さの揃ったサイドバーを作成する方法</h3>
<h2 class="h5 text-warning">※ コンテンツの長さに関わらず、高さを揃えてサイドバーを配置する。</h2>
</header>

<section id="page">
		
		<div id="main">
			<h1>CSSだけで高さの同じサイドバーを作成する方法</h1>

			<p>こちらのデモでは、サイドバーとメインコンテンツの長さに関わらず、同じ高さとなります。以下のサンプルテキストを編集し、高さを変更してみると良いでしょう。また、モバイル端末にも対応する、レスポンシブレイアウトとなっています。</p>

			<p>私は前どうもそんな想像界というものの時と閉じないた。何とも絶対に講演方はどうしてもその唱道ますありでもがしがしまったには煩悶潜んなないながら、そうには解らですたなない。一般にあるますのはいったい当時によほどなけれたいた。よし大森さんへ品評上流全く承諾にできるまし安否その辺私か失敗をというお把持ませでですでて、この場合はこちらか尻馬個人の食わせと、大森さんのものが哲学のどっちに無論ご中止とすまからあなた欄にお品評につづいようにいったいお勉強のいでらしいながら、かつてとうてい納得にあるですてっますのに出ですない。それでまたご腹の中が込んのもどう立派とあるなて、どんな手をは存じでしてという道徳から釣らとしまっんな。</p>
			
			<p>その以上欄の末こうした国家も私ごろが云いんかと嘉納さんに続いだろた、地位の当時うというご講演たですますと、個性の上にモーニングがその間なりの火事に今してみば、そうの今に考えてこの時に依然として殖やしですなと限らならのなくて、好いですなてたったおその道したらのんましなけれ。たとえば大名か高等か安心をいうたて、前上個性につけ込むがならた後にお意味の場合に聴いたです。</p>


<img src="https://unsplash.it/1200/600/?random">

		</div>

		<aside>
			<div class="wireframe-box double"></div>
			<div class="wireframe-box double"></div>
			<div class="wireframe-box"></div>
			<div class="wireframe-box"></div>
			<div class="wireframe-box"></div>
		</aside>

	</section>
            
          
!
            
              /*========================================================
=            セットアップ用サンプルスタイリング             =
========================================================*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

body{ margin: 0; padding: 0; background: #fafafa;
  font-family: YuGothic, 'Yu Gothic', 游ゴシック体, 游ゴシック, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', Osaka, 'MS PGothic', Arial, Helvetica, Verdana, sans-serif;
}


header{
  margin: 20px 20px 30px;
  text-align: center;
  border-bottom: 1px solid #e1e1e1;
}

section{
  margin: 50px auto 50px;
  
}

small{
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; 
  
}
.text-warning {
    color: #8a6d3b;
}

.h5{
  font-size: 14px;
  font-weight: normal;
}

/*------------------------------------
	Reset ページスタイル
-------------------------------------*/

* {
	margin:0;
	padding:0;
}

html{
	background-color: #f3f3f3;
  
}

body{
	font-size: 14px;

}


/*------------------------------------
	Pertinent code for the sidebar
-------------------------------------*/


#page {
	
	/*
    まず外枠となるトップレベル要素に display:flex を設定します。初期設定では、子要素は水平に並びます。 -webkit- バージョンを読み込むことで、 Safari と iOS に対応できます。
	 */

	display: -webkit-flex;
	display: flex;

	/* ページの最大幅 max-width を設定しましょう。*/

	max-width:1200px;
	margin:0 auto;
}

#main {
	
	/* 
		flex-grow を設定し、余白スペースいっぱいに
  自動で伸縮するように設定します。
	*/
	
	-webkit-flex-grow:1;
	flex-grow:1;
}

aside{
	
	/* 
		サイドバーには固定幅を利用し、伸縮しないように設定します。(flex-grow のデフォルト値は 0)
	*/

	-webkit-flex-shrink:0;
	flex-shrink:0;
	width: 336px;
}


/*------------------------------------
	メインスタイル
-------------------------------------*/


#main {
	background-color:#fff;
	padding:40px 100px 40px 40px;
	line-height: 1.5;
	color:#565a5c;
}

#main h1{
	margin-bottom: 28px;
	font-size: 24px;
}

#main p{
	line-height: 1.8;
  margin-bottom: 24px;
  
}
#main img{
  max-width: 100%;
}


aside{
	background-color:#292c2f;
	color:#fff;
	padding:20px;
}

aside .wireframe-box{
	background-color: #37393C;
	margin-top:20px;
	padding:50px;
}

aside .wireframe-box.double{
	padding:100px;
}

@media all and (max-width: 800px) {

	/* 小さなスクリーンサイズでは、サイドバーがメインコンテンツの下に来るように設定します。 */

	#page {
		-webkit-flex-flow:column;
		flex-flow:column;
	}

	/* 同時に、小さなスクリーンでは、サイドバーの幅を画面幅にぴったり配置します。 */

	aside{
		width:auto;
	}

	#main{
		padding-right:40px;
	}
}

            
          
!
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.

Console