HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
header.header ヘッダー
.container#container
main.main
h1 メインコンテンツ
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed diam in elit tincidunt fringilla. Duis vulputate elementum enim, eget aliquam purus bibendum id. Vestibulum ultricies gravida sollicitudin. Nullam tristique suscipit arcu vel tincidunt. Sed posuere erat nunc, dictum feugiat elit porta ut. Nunc pulvinar eros felis, nec euismod nisi pharetra vel. Integer laoreet risus nec elit fermentum vehicula. Ut feugiat porttitor sagittis. Donec turpis mi, aliquet id magna non, consequat dapibus tortor. Phasellus feugiat eu nisl eu molestie. Ut gravida ipsum ac elit interdum cursus. Mauris faucibus sem sem, non imperdiet libero gravida et. Curabitur sed diam nulla. Sed lectus sapien, imperdiet convallis quam sit amet, dictum tincidunt tellus. Aliquam condimentum a leo eget rutrum.
p Curabitur consectetur orci et tempus varius. Vivamus sed nisl tincidunt, placerat arcu et, feugiat dolor. Praesent vestibulum felis vitae lacus luctus, quis tincidunt augue aliquam. Proin urna purus, tincidunt id nunc sed, rutrum finibus sem. Donec efficitur arcu eget ultrices aliquam. Suspendisse ultrices diam sit amet interdum pharetra. Donec nec metus rhoncus augue dignissim mattis. Vestibulum ac ante bibendum, vehicula ex sit amet, ultricies diam. Mauris mi nunc, viverra ultricies purus in, scelerisque vestibulum urna. Pellentesque eleifend efficitur justo, ut tincidunt velit fringilla id. Curabitur augue turpis, interdum in efficitur facilisis, vehicula ac lectus. Nulla mauris ante, maximus id ex iaculis, tristique semper dui.
p Aliquam suscipit vulputate mattis. Etiam pretium sed odio vitae cursus. Sed tortor est, fringilla vitae ornare in, vestibulum et purus. Proin id nisi tincidunt, tincidunt elit non, aliquam lectus. Suspendisse viverra pharetra ligula, et blandit tellus. Pellentesque nunc erat, blandit sed interdum vel, vulputate quis magna. Praesent tincidunt quam convallis, aliquam orci nec, suscipit purus. Morbi hendrerit condimentum magna vitae tincidunt. Nulla malesuada purus non laoreet condimentum. Ut luctus feugiat laoreet.
p Fusce posuere orci feugiat vulputate sollicitudin. Morbi congue aliquam gravida. Mauris pulvinar eu metus eget vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum in massa vel lectus lobortis faucibus et a ex. Nam tincidunt dolor sit amet enim rutrum, vitae fringilla velit volutpat. Nullam rhoncus enim ex, lobortis molestie sapien bibendum sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non interdum sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque non turpis luctus, dapibus tellus et, egestas urna.
p Suspendisse dapibus ex ac cursus malesuada. Vestibulum a ex maximus, interdum eros a, lobortis felis. Curabitur fringilla, libero eget interdum iaculis, magna ex lacinia est, vel volutpat tortor velit id nisi. Nunc et nibh in nibh euismod imperdiet. Nulla facilisi. Aenean sollicitudin mi congue consectetur accumsan. Nam hendrerit mauris vel diam pellentesque fringilla. Aenean auctor blandit nisi, sed consequat mi mattis sit amet. Curabitur nunc nunc, tristique non lobortis vitae, varius interdum libero. Cras venenatis libero nisi, vitae facilisis purus tincidunt in. Donec eu pharetra libero. Donec cursus purus pulvinar, tincidunt nibh vitae, consequat tellus. Nam at congue neque.
p Suspendisse aliquet placerat semper. Pellentesque at porta arcu. Nunc eu velit quis ex auctor aliquet. Cras efficitur venenatis dui et viverra. Nam augue nulla, auctor eu lectus eu, accumsan tristique neque. Nulla faucibus tincidunt velit, ut aliquam est ullamcorper varius. Integer ut tellus vitae magna tempus ultricies. Sed condimentum aliquet urna non blandit. Mauris dui diam, tincidunt vitae pretium ut, hendrerit vitae odio. Curabitur bibendum, elit nec tempor condimentum, metus metus auctor ex, at varius ante massa ut lacus. Etiam egestas nibh pellentesque mollis facilisis.
p Quisque maximus lorem vel erat dignissim luctus. Nunc et turpis eros. Sed in fermentum orci. Praesent eget bibendum lectus, nec ultrices velit. Sed interdum pharetra eros, at accumsan sem ultrices id. Proin ante sem, tempus in sem in, tempor venenatis neque. Duis porttitor augue non elit faucibus porta. Mauris ultrices quam at ligula vulputate efficitur. Aliquam malesuada interdum justo at fermentum. In scelerisque sapien et fermentum mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec placerat velit, sit amet ornare sapien. Aliquam at efficitur mauris. Aliquam vestibulum arcu faucibus suscipit imperdiet.
p Vivamus sagittis nunc sed gravida semper. Nulla at ligula in orci mattis bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Vivamus pulvinar nulla a justo mollis dictum. Integer molestie massa mollis tincidunt tristique. Phasellus at pulvinar neque, eu facilisis diam. Proin erat quam, lacinia id pretium ac, faucibus a lorem. Nullam at viverra eros, in pharetra tortor. Donec vitae leo non orci sodales interdum. Proin faucibus gravida hendrerit.
p Vestibulum eleifend, leo vitae condimentum efficitur, mauris neque condimentum nisl, ultrices molestie magna eros et metus. In aliquam ac dui a convallis. Pellentesque ornare gravida lorem, sed maximus purus aliquam a. Suspendisse eu rutrum purus, id pellentesque ligula. Pellentesque ut nibh in velit mollis ullamcorper nec ut nibh. Suspendisse fringilla vel mi eu cursus. Nulla dictum mollis auctor. In hendrerit, urna ac tristique iaculis, tortor libero iaculis odio, quis molestie eros augue sit amet quam. Vestibulum id posuere mi. Cras pellentesque erat ultrices, posuere massa nec, varius dolor.
p Sed sit amet pellentesque lorem, vel blandit tellus. In elementum enim sit amet mauris bibendum placerat at eget nunc. Donec ac nunc in metus euismod ultricies et nec tortor. Aenean ultrices lobortis blandit. In viverra nisl in luctus rutrum. Maecenas euismod ipsum quis diam commodo, id interdum orci semper. Duis a placerat nunc. Nam in porttitor ex. Phasellus dignissim lacus vitae nulla pellentesque feugiat. Mauris eu lorem enim. Vestibulum ut aliquam orci. In euismod magna sed lorem bibendum cursus. Nam convallis nisi at velit egestas, a facilisis felis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tincidunt, urna volutpat sollicitudin fringilla, tellus arcu mollis odio, sed pharetra elit velit vel dolor.
p Phasellus eget eros quis urna ultrices sodales. Sed nec lacinia elit. Fusce velit arcu, tristique vitae suscipit ac, consequat et mi. Aliquam lectus tellus, aliquet nec condimentum ut, malesuada nec dolor. Nulla sed bibendum libero. Sed quis tellus dictum, porta orci eu, rutrum metus. Nullam pellentesque congue pulvinar. Mauris sit amet metus dolor.
p Fusce in magna porttitor, vestibulum ligula id, eleifend nibh. Nullam ut nibh nulla. Vestibulum imperdiet diam finibus lorem molestie malesuada. Donec vitae suscipit urna. Mauris consequat congue enim ut viverra. Donec nulla magna, egestas ut aliquam vel, scelerisque ut sem. Cras accumsan metus vel sapien sollicitudin, sagittis dignissim nulla auctor. Pellentesque tincidunt sit amet mi dictum ornare. Nulla facilisi. Sed pulvinar vehicula ante et accumsan.
p Pellentesque non orci vel est hendrerit hendrerit sit amet vitae turpis. Quisque ornare commodo odio, quis gravida nisi dictum id. Suspendisse leo nulla, aliquet non fringilla non, hendrerit quis eros. Sed ut porta turpis. Proin a scelerisque mi. Maecenas velit nunc, fermentum nec bibendum id, interdum non arcu. Integer faucibus dolor eget interdum varius. Aliquam id egestas nibh.
p Aliquam nec tortor nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris fringilla dolor dui, ac blandit purus porta ac. Vestibulum eget tortor vitae nibh porta laoreet. Vivamus ac justo eleifend, ultricies orci non, suscipit sem. Nunc tempus id nibh ac malesuada. Mauris non tortor tortor. Cras et posuere orci. Duis vitae mattis neque. Aliquam ut varius sem. Duis sodales lacinia ex eget molestie.
aside.aside#aside
h2 サイドバー
ul
-for( var i = 1 ; i < 8 ; i++ )
li
a(href="") リンク
footer.footer フッター
*{
box-sizing:border-box;
}
body{
min-width:600px;
}
.header{
width: 100%;
background-color: #ddd;
height: 150px;
display: flex;
align-items:center;
justify-content:center;
font-size: 20px;
}
.footer{
width: 100%;
background-color: #333;
height: 500px;
display: flex;
align-items:center;
justify-content:center;
font-size: 20px;
color:#fff;
margin-top: 40px;
}
.container{
width: calc(100% - 30px);
max-width: 1000px;
margin:40px auto 0;
position: relative;
padding-left: 200px;
}
$offsetY:20px;
.aside{
width: 150px;
padding-bottom: 40px;
position: absolute;
left: 0;
top: 0;
transition:.5s top ease;
max-height:calc(100vh - #{$offsetY});
overflow:auto;
&.is-end{
top: auto;
bottom: 0;
}
h2{
font-weight: bold;
font-size: 18px;
border-bottom: 1px solid #000;
padding-bottom: 0.25em;
margin-bottom: 0.25em;
}
li{
line-height: 2;
}
}
.main{
h1{
font-weight: bold;
font-size: 24px;
line-height: 1.3;
margin-bottom: 0.6em;
}
p{
font-size: 16px;
line-height: 2;
}
}
(function(){
const container = document.getElementById('container');
const aside = document.getElementById('aside');
const offsetY = 20;
container.style.minHeight = aside.clientHeight + 'px';
window.addEventListener('scroll',()=>{
const containerRect = container.getBoundingClientRect();
const isReachBottom = (aside,containerRect,offsetY)=>{
if( aside.clientHeight < window.innerHeight ){
if(containerRect.bottom <= aside.clientHeight + offsetY){
return true;
}else{
return false;
}
}else{
if(containerRect.bottom < window.innerHeight - offsetY){
return true;
}else{
return false;
}
}
}
if( isReachBottom(aside,containerRect,offsetY) ){
aside.style.top = '';
aside.classList.add('is-end');
}else if( containerRect.top < offsetY ){
aside.classList.remove('is-end');
const y = containerRect.top*-1 + offsetY;
aside.style.top = y+'px';
}else{
aside.classList.remove('is-end');
aside.style.top = '';
}
});
})();
Also see: Tab Triggers