Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                p 最終更新 2016/06/12 red一部更新
#body-in
	#main
		.article
			h1 見出しテスト h1 heading
			h2 見出しテスト h2 heading
			h3 見出しテスト h3 heading
			h4 見出しテスト h4 heading
			h5 見出しテスト h5 heading
			h6 見出しテスト h6 heading
			hr
			h1 見出しテスト h1 heading
				small サブテキスト
			h2 見出しテスト h2 heading
				small サブテキスト
			h3 見出しテスト h3 heading
				small サブテキスト
			h4 見出しテスト h4 heading
				small サブテキスト
			h5 見出しテスト h5 heading
				small サブテキスト
			h6 見出しテスト h6 heading
				small サブテキスト
			hr
			h3 見出しテスト(通常)
			h3.center 見出しテスト(センター)
			h3.right 見出しテスト(ライト)
			hr
			h3.balloon 見出しテスト(吹き出し)
			h3.balloon.center 見出しテスト(吹き出し・センター)
			h3.balloon.right 見出しテスト(吹き出し・ライト)
			hr
			h3.balloon.center 見出しテキスト(センター)
				small サブテキスト
			hr
			h3.pileup 見出しテスト(重ね)
			h3.pileup 長いタイトルの場合はどうなるかのテスト(重ね)
			p 重ねの見出しは必ず1行で納まるように調整の事
			hr
			h3.stripe 見出しテスト(ストライプ)
			h3.stripe.vertical 見出しテスト(縦ストライプ)
			h3.stripe.horizontal 見出しテスト(縦ストライプ)
			hr
			h3.checked 見出しテスト(チェック)
			hr
			h3.topBottom 見出しテスト(上下ライン)
			hr
			h3 見出しテスト
				small サブテキスト
			h3.center 見出しテスト
				small サブテキスト
			h3.right 見出しテスト
				small サブテキスト
			hr
			h2 吾輩は猫である 
				small 夏目漱石
			h3 一
			p 吾輩は猫である。名前はまだ無い。
			p どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。
			h3 二
			p 吾輩は新年来多少有名になったので、猫ながらちょっと鼻が高く感ぜらるるのはありがたい。
			p 元朝早々主人の許へ一枚の絵端書が来た。これは彼の交友某画家からの年始状であるが、上部を赤、下部を深緑りで塗って、その真中に一の動物が蹲踞っているところをパステルで書いてある。
			h4.balloon.center とあるレビュー
			p 漱石はたいへんな落語好きだったらしい。当時の三代目小さんに惚れ込んで「小さんは天才である。」かなんか言ってた。
			h5.pileup.right そこで思ったこと
			p 落語好きの人ならみんな一読して分かると思うけど、この小説は全体の包括的な構成の仕方が完全に落語なんですよね。
			h5.pileup 更にその構成
			p メインのこれといったプロットは特に無くて、いちいち各エピソードが全体に対して[余談]みたいな軽い役割を演じる骨組みになってる。
			h6.topBottom.center 結論
			p 会話の内容も一見、くだらないんだけどその実、漱石流のエスプリが効いててそれでちゃんと情緒ある江戸前の明治の噺になっている。落語を文学にする、という彼の実験じゃないかな 
			hr
			h3.topBottom.right
				a(href="//wp-simplicity.com/",target="_blank") //wp-simplicity.com/
				small Simplicity公式
			p 見出しにaタグを設置した場合は、もちろん見出し部分全体にかかるので要注意(これはデフォルトの動作)
			hr
			h3.underline Simplicity公式
				small
					a(href="//wp-simplicity.com/", target="_blank") //wp-simplicity.com/
			hr
			h3.dashed.center Simplicity公式
				small
					a(href="//wp-simplicity.com/", target="_blank") //wp-simplicity.com/
			hr
			h3.underline 見出しテスト(下線)
			h3.dashed 見出しテスト(破線)
			h3.dotted 見出しテスト(点線)
			hr
			h3.balloon.center.red 見出しテキスト(センター)
				small サブテキスト
			h3.dashed.center.red Simplicity公式
				small
					a(href="//wp-simplicity.com/", target="_blank") //wp-simplicity.com/
			h3.underline.left.red Simplicity公式
				small
					a(href="//wp-simplicity.com/", target="_blank") //wp-simplicity.com/
			h3.dotted.right.red Simplicity公式
				small
					a(href="//wp-simplicity.com/", target="_blank") //wp-simplicity.com/
			h3.topBottom.right.red
				a(href="//wp-simplicity.com/",target="_blank") //wp-simplicity.com/
				small Simplicity公式
              
            
!

CSS

              
                $font-base : 16px !default;
$line-height-base: 1.625 !default;
$line-height-computed: floor( $font-base * $line-height-base ) !default;

$h1-font-size: $font-base * 1.875; //30px
$h2-font-size: $font-base * 1.625; //26px
$h3-font-size: $font-base * 1.375; //22px
$h4-font-size: $font-base * 1.125; //18px
$h5-font-size: $font-base; //16px
$h6-font-size: $font-base * 0.875; //14px

.article {
	//初期化
	h1,h2,h3,h4,h5,h6 {
		font-size: 16px;
		margin: 0;
		padding: 0;
		border: none;
		line-height: 1;
	}
	
	h1,h2,h3,h4,h5,h6 {
		margin-top: $line-height-computed;
		margin-bottom: $line-height-computed;
		line-height: 1.1;
	}
	
	h1 {
		font-size: $h1-font-size;
	}
	h2 {
		font-size: $h2-font-size;
	}
	h3 {
		font-size: $h3-font-size;
	}
	h4 {
		font-size: $h4-font-size;
	}
	h5 {
		font-size: $h5-font-size;
	}
	h6 {
		font-size: $h6-font-size;
	}
	
	h1,h2,h3,h4,h5,h6 {
		display: flex;
		flex-flow: column wrap;
		&.center {
			text-align: center;
		}
		&.right {
			text-align: right;
		}

		&.balloon {
			position: relative;
			margin: 5px 5px $line-height-computed;
			padding: ($line-height-computed / 2) $line-height-computed ;
			border-radius: 5px;
			background-color: #ccc;
			//box-shadow: 0 0 1px 4px #fff, 0 0 8px 5px #000;
			
			&::before {
				position: absolute;
				top: 100%;
				left: 30px;
				content: '';
				width: 0;
				height: 0;
				border: 10px solid transparent;
				border-top: 15px solid #ccc;
			}
			&.center {
				text-align: center;
				&::before {
					left: 50%;
					transform: translateX(-50%);
				}
			}
			&.right {
				text-align: right;
				&::before {
					left: unset;
					right: 30px;
				}
			}
		}
		&.pileup {
			position: relative;
			text-shadow: -2px -2px 6px #fff, 2px -2px 6px #fff,-2px 2px 6px #fff, 2px 2px 6px #fff, -4px -4px 6px #fff, 4px -4px 6px #fff,-4px 4px 6px #fff, 4px 4px 6px #fff;
			z-index: 1;
			
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 100%;
				height: 1px;
				background-color: #333;
				z-index: -1;
			}
		}
		&.underline {
			position: relative;
			padding-bottom: ($line-height-computed / 2);
			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 2px;
				background-color: #333;
			}
		}
		&.dashed {
			position: relative;
			padding-bottom: ($line-height-computed / 2);
			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 2px;
				background: linear-gradient(90deg, #333, #333 50%, transparent 50%, transparent 100%);
				background-size: 16px 10px;
			}
		}
		&.dotted {
			position: relative;
			padding-bottom: ($line-height-computed / 2);
			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 2px;
				background: linear-gradient(90deg, #333, #333 50%, transparent 50%, transparent 100%);
				background-size: 4px 2px;
			}
		}
		&.stripe {
			padding: .5em .75em;
			background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
			color: #fff;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
			
			&.vertical {
				color: #fff;
				background: repeating-linear-gradient(
					to right,
					#222,
					#222 10px,
					#333 10px,
					#333 20px
  			);
			}
			
			&.horizontal {
				color: #fff;
				background: repeating-linear-gradient(
					to bottom,
					#222,
					#222 5px,
					#333 5px,
					#333 10px
  			);
			}
		}
		&.checked {
			position: relative;
			color: #fff;
			padding: ($line-height-computed / 2) $line-height-computed ;
			z-index: 2;
			
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: repeating-linear-gradient(
					to bottom,
					rgba(34,34,34, .5),
					rgba(34,34,34, .5) 5px,
					rgba(19,17,17, .5) 5px,
					rgba(19,17,17, .5) 10px
  			);
				z-index: -1;
			}
			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: repeating-linear-gradient(
					to left,
					rgba(34,34,34, .5),
					rgba(34,34,34, .5) 5px,
					rgba(19,17,17, .5) 5px,
					rgba(19,17,17, .5) 10px
  			);
				z-index: -1;
			}
		}
		&.topBottom {
			padding: ($line-height-computed / 2) ($line-height-computed / 2);
			border: 1px solid #333;
			border-left: 0;
			border-right: 0;
		}
		
		&.red {
			color: #fff;
			background-color: #f00;
			&::before,
			&::after {
				border-top-color: #f00;
			}
			small,
			.small {
				color: #ccc;
			}
		}
		&.dashed.red {
			color: #f00;
			background-color: transparent;
			
			small,
			.small {
				color: #FF7B7B;
			}
			
			&::before {
				background: linear-gradient(90deg, #f00, #f00 50%, transparent 50%, transparent 100%);
				background-size: 16px 10px;
			}
		}
		
		&.underline.red {
			color: #f00;
			background-color: transparent;
			
			small,
			.small {
				color: #FF7B7B;
			}
			
			&::before {
				background-color: #f00;
			}
		}
		
		&.dotted.red {
			color: #f00;
			background-color: transparent;
			
			small,
			.small {
				color: #FF7B7B;
			}
			
			&::before {
				background: linear-gradient(90deg, #f00, #f00 50%, transparent 50%, transparent 100%);
				background-size: 4px 2px;
			}
		}
		
		&.topBottom.red {
			color: #f00;
			background-color: transparent;
			border-color: #f00;
			
			small,
			.small {
				color: #FF7B7B;
			}
		}
		
		//small
		.small,
		small {
			font-size: 70%;
			color: #999;
		}
		
		a {
			color: inherit;
			text-decoration: none;
		}
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console