Pen Settings

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

     

Vendor Prefixing

About Vendor Prefixing

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

     

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.

Powered by Algolia
About External Resources

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.

If the stylesheet 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 CSS 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.

Learn more

+ add another resource

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

Powered by Algolia
About External Resources

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.

Learn more

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

Next Step Leave tour

HTML

            
              <section>
  <h2>概要</h2>
  <h3>CSS Nite in HIROSHIMA, Vol.10
「ウェブ制作の今と、これから」</h3>
  <p>コンテンツ設計やウェブ制作における実装方法の多様化が進む昨今、日本でのウェブ制作業界の実情がどうなっているのだろうと疑問に思ったり、2、3年後、ウェブ制作で求められるスキルがどうなっているのかを想像して今後の方向性に不安を感じたりしたことはありませんか？</p>
  <p>近年ではユーザーの課題を解決するコンテンツの提供と、サイトの使いやすさや設計力が重要視されるようになっています。</p>
</section>

<section>
  <h2>セッション・出演者紹介</h2>
  <h3>3つのレイヤーで考えるクリエイティブにおける「文字」の扱い</h3>
  <p>ウェブやプリントメディアなど、媒体を問わず、何かを伝えるのに大きな役割を占めているのが「文字」。</p>
  <p>この文字を「どのような言葉で伝えるのか？（テキスト）」、「どんなフォントで表現するのか（フォント）」、「どのように文字間や行間を調整するのか（タイポグラフィ、組版）」の3つのレイヤーで考えるとスッキリします。</p>
  <p>「読みやすさ」とは、すなわち「伝わりやすさ」。
早く、正確に、そして、誤読や迷いがなく、スムーズにテキストを伝えるためのノウハウを総ざらいしつつ、急激に増えているウェブフォントを使う上での“お作法”について考えます。</p>
  <h3>CSSの最新テクニックを使って、一歩先取るコーディング</h3>
  <p>CSSは日々進化しています。これまで当たり前のように使っていたプロパティも、今ではさらに便利なもので対応できるようになっています。</p>
  <p>要素の横並びにclearfixは不要！ スクロールすると付いてくるヘッダーもJavaScript不要！ 画像のトリミングだってCSS1行でOK！ 最新のCSSを使って、より手軽に有用なコーディングに挑戦しましょう。</p>
  <h3>For every people achieve more : マイクロソフトの Inclusive Design について</h3>
  <p>"Empower every person on the planet to achieve more"(この星のすべての人がより多くを達成するように手助けする)
これは、現在のマイクロソフトのミッションステートメントです。</p>
  <p>このミッションステートメントの中に "every person on the planet" とあるように、マイクロソフトはすべての人々が身体的能力の差にかかわらず IT がもたらす恩恵を享受できる世界を目指しています。その思想は製品のデザインにも込められており、そのデザインコンセプトは Inclusive Design と呼ばれています。</p>
  <p>このセッションでは Inclusive Design とはなにか、そしてそれらが製品にどのように実装されているか、について紹介します。</p>
</section>
<section>
  <h2>よくある質問</h2>
  <h3>お申し込みに関して</h3>
  <h4>Q: CSS Nite in HIROSHIMAの最新情報を知りたいのですが？</h4>
  <p>CSS Nite in HIROSHIMAの最新情報はfacebook、Twitterで発信しています。</p>
  <h4>申し込み完了メールで、Peatixのアプリを勧められましたが、スマートフォンを持っていません。</h4>
  <p>当日受付は、お名前で照合します。アプリは必要ありませんのでご安心ください。</p>
  <h4>学割はどこまでが適用されますか？</h4>
  <p>学校教育法に規定された以下の教育機関において、１年以上の教育課程に在籍する方。
学校［小学校、中学校、高等学校、中等教育学校、大学、高等専門学校、盲学校、 聾学校、養護学校、専修学校［一般課程（専修学校）、高等課程（高等専修学校）、専門課程（専門学校）］各種学校</p>
  <h4>キャンセルについて</h4>
  <p>当日、仕事や病気でご都合が悪くなった場合は、代理出席が可能ですので、どなたか代わりの方にご出席いただけないか、ご検討ください。また、代理出席がNGの場合、Peatixにてキャンセル処理をお願いします。返金・キャンセル手数料については以下の通りです。</p>
  <h4>当日でも参加できますか？</h4>
  <p>事前のお申し込みなしでも当日受付は可能です。
ただし、必要事項の記入などの手続きがございますので、受付でお時間を取らせてしまったり、お好みの席でセミナーを受けて頂くことが難しくなります。
また事前登録の方を優先してご案内しており、当日受付の場合は、立ち見も予想されますので、できる限り、お早めに事前登録をしていただくくことをおすすめします。</p>
</section>
!

CSS

            
              h2 {
  background: #f5323c;
  color: #fff;
  padding: 10px 20px;
  position: sticky;
  top: 0;
}
!

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