[UI] シンプルなワンカラムの『step by step』HTMLデザインテンプレート

『step by step』以外でも簡単なサイトで良いなら、会社サイトとかにも使えると思います。

DEMO

step one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

step two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

step three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

step four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

HTML

 
step one
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.


 
step two
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.


 
step three
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.


 
step four
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et nunc sed urna vestibulum auctor vehicula fermentum ligula. Donec sapien sem, blandit ut lacus quis, laoreet rhoncus tellus. Ut fringilla.

CSS

.step {
 position: relative;
 padding: 3em;
 background: #fff;
}
.step:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
 top: 100%;
 left: 50%;
 border:40px solid transparent;
 border-top:40px solid #fff;
 margin-left: -40px;
 z-index: 100;
}
.step h2, .step p {
 margin: .5em 0;
 font-family: 'Raleway', sans-serif;
 text-align: center;
 color: #fff;
}
.step h2 {
 font-size: 4em;
 font-weight: 800;
 text-transform: uppercase;
}
.step p {
 font-size: 1.5em;
 font-weight: 100;
}
.step1 {
 background: #47A447;
}
.step1:after {
 border-top-color: #47A447;
}
.step2 {
 background: #409AD5;
}
.step2:after {
 border-top-color: #409AD5;
}
.step3 {
 background: #FFCF00;
}
.step3:after {
 border-top-color: #FFCF00;
}
.step4 {
 background: #E00034;
}
.step4:after {
 border-top: none;
}

CSS対応状況

• CSS Generated content