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.

            
              <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>学校教育法に規定された以下の教育機関において、1年以上の教育課程に在籍する方。
学校[小学校、中学校、高等学校、中等教育学校、大学、高等専門学校、盲学校、 聾学校、養護学校、専修学校[一般課程(専修学校)、高等課程(高等専修学校)、専門課程(専門学校)]各種学校</p>
  <h4>キャンセルについて</h4>
  <p>当日、仕事や病気でご都合が悪くなった場合は、代理出席が可能ですので、どなたか代わりの方にご出席いただけないか、ご検討ください。また、代理出席がNGの場合、Peatixにてキャンセル処理をお願いします。返金・キャンセル手数料については以下の通りです。</p>
  <h4>当日でも参加できますか?</h4>
  <p>事前のお申し込みなしでも当日受付は可能です。
ただし、必要事項の記入などの手続きがございますので、受付でお時間を取らせてしまったり、お好みの席でセミナーを受けて頂くことが難しくなります。
また事前登録の方を優先してご案内しており、当日受付の場合は、立ち見も予想されますので、できる限り、お早めに事前登録をしていただくくことをおすすめします。</p>
</section>
            
          
!
            
              h2 {
  background: #f5323c;
  color: #fff;
  padding: 10px 20px;
  position: sticky;
  top: 0;
}
            
          
!
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