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 URL's 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 it's URL and the proper URL extention.
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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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.
<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;
}
Also see: Tab Triggers