Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

              
                <header class="sliding-header" id="top">
  <h1>マークアップの<br class="break_narrow">違いと間違い</h1>
  <p>酒井優(@glatyou)</p>
</header>
<main class="sliding-main break">
  <p>マークアップのしかたは人それぞれ</p>
  <p>じゃあテキトーに書いても<br class="break_narrow">表示されれば一緒じゃない?</p>
  <p>HTMLの書き方が違うことに実際に<br class="break_narrow">どのような違いがあり、<br class="break_wide">どのようなものが<br class="break_narrow">間違いになるのかを考えます</p>


  <h2>自己紹介</h2>
  <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/129831/icon-webcre8.png" alt="黒い星の中に数字の8のマークがアイコンです。" width="100"><br class="break_narrow">酒井優といいます。<br class="break_narrow">マークアップエンジニアです。<br>Webデザイナーや講師や<br class="break_narrow">ライターもしています。
  </p>


  <h2>HTMLの書き方が人に<br class="break_narrow">よって違うのはなぜ?</h2>
  <ul>
    <li>問題があっても見過ごされてしまう書き方だから(構文の間違い)</li>
    <li>表現が似がちな別の意味を表す書き方だから(デザインの解釈の間違い)</li>
    <li>コンテンツを別の意味に見なした書き方だから(コンテンツの解釈の違い)</li>
    <li>詳しさが違う書き方だから(妥当性の違い)</li>
    <li>同じ意味を持つ別の書き方だから(実現方法の違い)</li>
  </ul>
  <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/129831/dist23-image-01.png" alt="記事一覧ページに、タイトルのついた複数の別ページのコンテンツを一覧する目的のコンテンツ内で、コンテンツをカード型にレイアウトし、そこにアイキャッチ画像、タイトル、日付、タグが配置されているデザイン"></p>
  <p>たったこれだけのUIでもいろんな<br class="break_narrow">マークアップがあり得る</p>


  <h2>問題があっても<br class="break_narrow">見過ごされてしまう書き方</h2>
  <ul>
    <li>タイプミスしてしまう</li>
    <li>タグを閉じ忘れてしまう</li>
    <li>非推奨な要素や属性を指定してしまう</li>
    <li>必須の属性を指定漏れしてしまう</li>
    <li><strong>コンテンツモデルを間違う</strong></li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  &lt;img src="https://placekitten.com/g/320/180" alt=""&gt;
  <mark>&lt;p&gt;</mark>
    &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
    &lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;
  <mark>&lt;/p&gt;</mark>
&lt;/section&gt;</code></pre>
  <ul>
    <li><strong><code>p</code>要素の中にフレージング・コンテンツでないフロー・コンテンツを含むことはできない</strong></li>
    <li><code>p</code>要素は段落であり、1つのつながった文章に使うのがふさわしい</li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  &lt;img src="https://placekitten.com/g/320/180" alt=""&gt;
  <mark>&lt;div&gt;</mark>
    &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
    &lt;p&gt;&lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;&lt;/p&gt;
  <mark>&lt;/div&gt;</mark>
&lt;/section&gt;</code></pre>
  <ul>
    <li>仕様をよく確認し、基本的にはバリデーターを使う</li>
    <li><strong>見過ごされてしまうということは逆に言えば品質管理できるのは実装者だけなのでしっかりチェックする</strong></li>
    <li>仕様によって定義の違うもの、安定していないものは案件ごとにルールを決める</li>
  </ul>


  <h2>表現が似がちな別の<br class="break_narrow">意味を表している書き方</h2>
  <ul>
    <li><strong>よくあるパターンの使い回しをしてしまう</strong></li>
    <li>CSSフレームワークや既存デザインのスタイルを使うための間違った意味付けをしてしまう</li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  <mark>&lt;p&gt;&lt;img src="https://placekitten.com/g/320/180" alt="写真:4匹の猫がこちらを見つめている。"&gt;&lt;/p&gt;</mark>
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;</code></pre>
  <ul>
    <li>記事のカードUIが「利用者がリンク先記事の内容をザッピングするUIである」と定義されていたとする</li>
    <li>記事のカードUIの画像はサムネイル(記事のイメージであり、カードとリンク先が確かに同一の内容であることを伝えるアイコン)であり、その画像単体で記事の内容が伝わることはあっても、伝えるためにあるものではない</li>
    <li><strong>この場合、カードUIの画像は装飾であり、コンテンツとしてマークアップすべきではない</strong></li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  <mark>&lt;img src="https://placekitten.com/g/320/180" alt=""&gt;</mark>
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;</code></pre>
  <ul>
    <li><strong>テキストやコンテンツを作る制作者がコンテンツの意図も含めて設定し、できていなければ相談して決める</strong></li>
    <li>デザインだけを見るのではなく、そのウェブサイトにおいてどんなデザインがどんな役割を持つべきものなのかを考える</li>
  </ul>


  <h2>コンテンツを別の意味に<br class="break_narrow">見なした書き方</h2>
  <ul>
    <li><strong>設計段階でのコンテンツの役割設定が曖昧な場合の解釈の違い</strong></li>
    <li>コンテキストによる役割の違いを表すかどうかの判断の違い</li>
    <li>順序や包含関係の解釈の違い</li>
  </ul>
  <pre><code class="language-html"><mark>&lt;li class="card"&gt;</mark>
  &lt;img src="https://placekitten.com/g/320/180" alt=""&gt;
  &lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;
  &lt;span&gt;2018/09/19&lt;/span&gt;
<mark>&lt;/li&gt;</mark></code></pre>
  <ul>
    <li><strong>カードUIを「記事一覧セクション内の記事紹介セクション」として見ればカードはサブセクションだと言える</strong></li>
    <li><strong>カードUIを「記事タイトルの列挙」のような情報量のコンテンツとして見ればカードはリスト項目だと言える</strong></li>
    <li><code>article</code>(のRSSの一部配信に相当する投稿とすること)もあり得るが、タイトルと日付だけの情報ブロック自体を投稿とするには情報量が不足している</li>
    <li><code>li > section</code>もあり得るが、セクションは一覧のサブセクションとしてすでに分かれているのでリストアイテムとするのは冗長</li>
  </ul>
  <pre><code class="language-html"><mark>&lt;section class="card"&gt;</mark>
  &lt;img src="https://placekitten.com/g/320/180" alt=""&gt;
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;span&gt;2018/09/19&lt;/span&gt;&lt;/p&gt;
<mark>&lt;/section&gt;</mark></code></pre>
  <ul>
    <li><strong>コンテンツ自体は同じでも文脈に応じてコンテンツの役割は変わるため、マークアップも違うこともあり得る</strong></li>
    <li>コンテンツが持つ役割や粒度に不相応な表現を与えられている場合、その表現で良いのかどうかも検討する</li>
  </ul>


  <h2>詳しさが違う書き方</h2>
  <ul>
    <li><strong>専用の要素を使わず抽象的な要素(<code>div</code>、<code>span</code>、<code>input</code>要素など)を使っている</strong></li>
    <li>性質を表す属性を指定していない(<code>lang</code>属性など)</li>
    <li>初期値があるもの、暗黙的に定義されている要素や属性をあえて指定する必要はない(ルール次第)</li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  &lt;img src="https://placekitten.com/g/320/180" alt=""&gt;
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;<mark>&lt;span&gt;2018/09/19&lt;/span&gt;</mark>&lt;/p&gt;
&lt;/section&gt;</code></pre>
  <ul>
    <li><strong>日時を表すフレーズには<code>time</code>要素を用いる</strong></li>
    <li>特にフレーズ要素は活用できる機能こそ少ないが、情報の意図が明確になる</li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  &lt;img src="https://placekitten.com/g/320/180" alt=""&gt;
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;<mark>&lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;</mark>&lt;/p&gt;
&lt;/section&gt;</code></pre>
  <ul>
    <li>要素の機能(属性など)、意味(暗黙のロールなど)、文脈(コンテンツモデルやカテゴリー)に合った適切な要素を用いる</li>
    <li><strong>そのコンテンツの意味を機械や制作者同士に対して明確にするため、詳しく書けるなら詳しくマークアップすればよい</strong></li>
    <li>意味付けには文章で置き換えられる表現も多いため、スタイルやマークアップを増やすより文章による言い換えを検討してもよい</li>
  </ul>


  <h2>同じ意味を持つ<br class="break_narrow">別の書き方</h2>
  <ul>
    <li><strong>CSSやJSの書きやすさのための調整</strong></li>
    <li>更新・運用のしやすさのための調整</li>
    <li>CSSフレームワークなどのための調整</li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  <mark>&lt;img src="https://placekitten.com/g/320/180" alt=""&gt;</mark>
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;</code></pre>
  <ul>
    <li>サムネイルは装飾である</li>
    <li><strong><code>alt=""</code>が指定された<code>img</code>要素による画像とCSSの<code>background-image</code>プロパティーによる画像はいずれも装飾</strong></li>
  </ul>
  <pre><code class="language-html">&lt;section class="card"&gt;
  &lt;h2&gt;&lt;a href=""&gt;猫が飼い主のことを見つめているときの気持ち&lt;/a&gt;&lt;/h2&gt;
  &lt;p&gt;&lt;time datetime="2018-09-19"&gt;2018/09/19&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;

<mark>.card::before {
  display: block;
  background-image: url("https://placekitten.com/g/320/180");
  content: "";
}</mark></code></pre>
  <ul>
    <li><strong>同じ意味を表す書き方が複数ある場合、運用のしやすさや技術的制約を踏まえていずれかでマークアップすればよい</strong></li>
    <li>知っている書き方でやりたいことがうまくいかない場合は意味を変えずに違う書き方ができるかを考える</li>
    <li>要素によるレイアウトの調整などでマークアップが冗長になることもあるがそれほど気にしなくてもよい</li>
  </ul>


  <h2>まとめ</h2>
    <p>ウェブサイトに制作者や利用者として<br>慣れ親しんだ人はコンテンツについて<br>漠然とした認識でも制作、利用しうる</p>
  <p>しかしはっきりと定義、共通認識が<br>形成されないままだとふわっとしたまま<br>ウェブサイトが制作され、しかも<br>何度も同じことを繰り返してしまう</p>
  <p><strong>正しい構文をし<br class="break_narrow">意味のあるコンテンツを作り<br>伝わる表現を与え<br class="break_narrow">ウェブサイトを運用していく</strong></p>
  <p>HTMLを書くということは<br class="break_narrow">翻訳のようなもので、<br class="break_narrow">コンテンツがなんであっても、<br class="break_narrow">作った人が表現したいことを<br class="break_narrow">できる限り過不足なく<br class="break_narrow">ウェブコンテンツという形に<br class="break_narrow">することが大事</p>
  <p>作家やアナウンサーが<br class="break_narrow">正しい言葉を使うように<br>ウェブコンテンツには正しい<br class="break_narrow">マークアップを使おう</p>
</main>
<footer class="sliding-footer">
  <p>ご清聴ありがとうございました</p>
</footer>
<nav class="sliding-nav">
  <ul>
    <li><a href="#top">最初へ</a></li>
    <li><button id="direction_prev" class="sliding-nav_prev">前へ</button></li>
    <li><button id="direction_next" class="sliding-nav_next">次へ</button></li>
  </ul>
</nav>

              
            
!

CSS

              
                // sliding
.sliding {
  margin: 0;
  padding: 0;
  height: calc(var(--vh, 1vh) * 100);
  font-size: 3vw;
  font-family: "TsukuARdGothic-Regular", fot-tsukuardgothic-std, sans-serif;
  font-feature-settings: "palt";
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  body {
    position: relative;
    margin: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    overflow-x: hidden;
  }
  input,
  textarea,
  select,
  button {
    font-size: 1rem;
    font-feature-settings: "palt";
  }
  a {
    text-decoration: none;
    color: cornflowerblue;
  }
  @media (max-aspect-ratio: 1/1) {
    font-size: calc(var(--vh, 1vh) * 4);
  }
  @media (max-aspect-ratio: 1/2) {
    font-size: calc(var(--vh, 1vh) * 3);
  }
}

@mixin page {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  margin: 0;
  padding: 1em 1em 2em;
  box-sizing: border-box;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  text-align: center;
  overflow: hidden;
}

// sliding-main
.sliding {
  body > header,
  body > footer {
    @include page;
    background-color: #333;
    color: white;
  }
  main > * {
    @include page;
  }
  h2 {
    &::before {
      display: block;
      position: absolute;
      top: 0.5em;
      right: 0.5em;
      bottom: 0.5em;
      left: 0.5em;
      border: #888 2px solid;
      content: "";
    }
  }
  p {
    padding: 0 5%;
    margin: 0 auto;
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
    }
    @media (min-width: 768px) {
      padding: 0 10%;
    }
  }
  div {
    p {
      margin-bottom: 1.5em;
      width: 100%;
      text-align: left;
      line-height: 1.5;
    }
  }
  ul,
  ol,
  dl {
    align-items: flex-start;
    text-align: left;
    line-height: 1.5;
    padding: 0 10%;
    margin: 0 auto;
    @media (min-width: 768px) {
      padding: 0 10%;
    }
  }
  dt {
    margin-bottom: 0.5em;
    font-weight: bold;
    text-align: left;
  }
  dd {
    margin-bottom: 1.5em;
    font-size: 0.75em;
    text-align: left;
  }
  table {
    border: 0.1em #888 solid;
    border-collapse: collapse;
  }
  caption {
    font-size: 0.7em;
    margin-bottom: 0.7em;
  }
  thead {
    border-bottom: 0.1em #888 solid;
  }
  th:first-child {
    padding: 0.5em 1em;
    border-right: 0.2em #888 solid;
  }
  td {
    padding: 0.5em;
    border: 0.1em #888 solid;
    font-size: 0.5em;
  }
  figure {
    img {
      object-fit: cover;
    }
  }
  figcaption {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  small {
    font-size: 0.75em;
    color: #555;
  }
  pre {
    text-align: left;
  }
  code {
    font-family: courier-prime, monospace;
    white-space: pre-wrap;
  }
  :not(pre) code {
    background-color: #f5f2f0;
    margin: 0 0.2em;
    padding: 0.1em 0.3em 0;
    border-radius: 0.1em;
  }
  pre code {
    font-size: 0.75em;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

// sliding-nav
.sliding-nav {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  font-size: 0.75rem;
  font-family: source-han-sans-japanese, sans-serif;
  line-height: 1;
  ul {
    padding: 0;
    list-style-type: none;
  }
  button {
    border: none;
    background-color: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-family: source-han-sans-japanese, sans-serif;
    color: cornflowerblue;
  }
}
.sliding-nav_next::after {
  font-family: FontAwesome;
  content: "\f063";
  margin-left: 0.2em;
}
.sliding-nav_prev::after {
  font-family: FontAwesome;
  content: "\f062";
  margin-left: 0.2em;
}

// 改行
br.break_narrow {
  display: inline;
  @media (min-width: 768px) {
    display: none;
  }
}
br.break_wide {
  display: none;
  @media (min-width: 768px) {
    display: inline;
  }
}

// prismjs用カスタム
code[class*="language-"],
pre[class*="language-"] {
  text-shadow: none;
}
pre[class*="language-"] {
  padding: 1em 1em 2em;
  background-color: transparent;
}
pre code[class*="language-"] {
  display: block;
  padding: 1em;
  background-color: #f5f2f0;
}
pre[class*="language-"] {
  margin: 0;
}

              
            
!

JS

              
                let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
const direction_next = document.getElementById("direction_next");
const direction_prev = document.getElementById("direction_prev");
direction_next.addEventListener("click", ()=> {
  const scrollOver = window.pageYOffset % window.innerHeight;
  window.scrollBy({
    left: 0,
    top: window.innerHeight - scrollOver,
    behavior: 'smooth'
  });
});
direction_prev.addEventListener("click", ()=> {
  const scrollOver = window.pageYOffset % window.innerHeight;
  window.scrollBy({
    left: 0,
    top: (window.innerHeight + scrollOver) * -1,
    behavior: 'smooth'
  });
});

              
            
!
999px

Console