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.

            
                <div class="wrapper">
<h1><img src="https://dl.dropbox.com/s/natdxtp1n00xbzf/html5.png" alt="html5かるた"></h1>
    <div id="slider">
      <ul class="sp-slides">
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">HTML自体のタグ</p>
            <div class="answer">
              <p><b class="category">ルート要素</b></p>
              <p><small>manifest属性でキャッシュさせるファイルを定義できる</small></p>
              <p class="tag">答え:<span>html</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">ページ自体のメタ情報をまとめるタグ</p>
            <div class="answer">
              <p><b class="category">ドキュメントのメタデータ</b></p>
              <p><small>例外を除きtitle要素が一つだけ必須</small></p>
              <p class="tag">答え:<span>head</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">ページ自体の題名のタグ</p>
            <div class="answer">
              <p><b class="category">ドキュメントのメタデータ</b></p>
              <p><small>HTMLメールなどでは件名が代わりになるので省略可能</small></p>
              <p class="tag">答え:<span>title</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">外部ファイルとのリンクのタグ</p>
            <div class="answer">
              <p><b class="category">ドキュメントのメタデータ</b></p>
              <p><small> type="text/css"は省略可能</small></p>
              <p class="tag">答え:<span>link</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">主にCSSをページ内に書き込むタグ</p>
            <div class="answer">
              <p><b class="category">ドキュメントのメタデータ</b></p>
              <p><small>scoped属性で親要素内のみにCSSを適用できる</small></p>
              <p class="tag">答え:<span>style</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">ページ自体のメタ情報のタグ</p>
            <div class="answer">
              <p><b class="category">ドキュメントのメタデータ</b></p>
              <p><small>title, base, link, style, script要素で表現できない全てのメタ情報を表す</small></p>
              <p class="tag">答え:<span>meta</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">主にJavaScriptをページに埋め込むタグ</p>
            <div class="answer">
              <p><b class="category">スクリプティング</b></p>
              <p><small>type属性は"text/javascript"のときのみ省略可能。JavaScript以外も指定できる</small></p>
              <p class="tag">答え:<span>script</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">見出しのタグ1</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>主にセクショニング・ルートの見出しとして使われる</small></p>
              <p class="tag">答え:<span>h1</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">文章の段落のタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>会話文にも使われる。フレージング・コンテンツしか入れることが出来ない</small></p>
              <p class="tag">答え:<span>p</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">順番の決まったリストのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>reversed属性で逆順のリストも作れる。CSS3でマーカーの自由度が増している</small></p>
              <p class="tag">答え:<span>ol</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">順番の決まってないリストのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>type属性は廃止された。順同リストではあるがCSSで番号を振ることもできる</small></p>
              <p class="tag">答え:<span>ul</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">リストの内容のタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>ol,ul要素以外にmenu要素の子にもなる</small></p>
              <p class="tag">答え:<span>li</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">項目に関する記述リストのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>単語の定義以外にも単なる項目への説明にも使えるようになった</small></p>
              <p class="tag">答え:<span>dl</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">項目に関する記述リストの項目のタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>用語の定義などに使う場合は子要素にdfn要素を置く</small></p>
              <p class="tag">答え:<span>dt</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">項目に関する記述リストの記述のタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>p要素と違い、フロー・コンテンツをなんでも置ける</small></p>
              <p class="tag">答え:<span>dd</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">特定の意味を持たないブロックのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>レイアウトのためだけに用いる。div=division(分割・区画)の意</small></p>
              <p class="tag">答え:<span>div</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">テキストや画像に埋め込むリンクのタグ</p>
            <div class="answer">
              <p><b class="category">テキストレベルの意味づけ</b></p>
              <p><small>divなどのフロー・コンテンツも入れられる</small></p>
              <p class="tag">答え:<span>a</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">文章内の重要性の高いテキストのタグ</p>
            <div class="answer">
              <p><b class="category">テキストレベルの意味づけ</b></p>
              <p><small>strong要素を入れ子にして重要性のレベルも明示できる</small></p>
              <p class="tag">答え:<span>strong</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">文章内の特定の意味を持たないテキストのタグ</p>
            <div class="answer">
              <p><b class="category">テキストレベルの意味づけ</b></p>
              <p><small>何かの意味を持つ他のフレージング・コンテンツに該当しない場合のみ使う</small></p>
              <p class="tag">答え:<span>span</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">文章内の改行のタグ</p>
            <div class="answer">
              <p><b class="category">テキストレベルの意味づけ</b></p>
              <p><small>詩など、改行がコンテンツの一部となる場合に使う</small></p>
              <p class="tag">答え:<span>br</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <div class="face front">
              <p class="text">写真や画像のタグ</p>
              <div class="answer">
                <p><b class="category">組込コンテンツ</b></p>
                <p><small>figcaption要素を持つfigure要素の子の場合などでalt属性を省略できる</small></p>
                <p class="tag">答え:<span>img</span></p>
              </div>
            </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">表組み自体のタグ</p>
            <div class="answer">
              <p><b class="category">テーブルデータ</b></p>
              <p><small>border属性やcaption要素を持つことでレイアウト目的でないことを示すことが出来る</small></p>
              <p class="tag">答え:<span>table</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">表組み内の行のタグ</p>
            <div class="answer">
              <p><b class="category">テーブルデータ</b></p>
              <p><small>デフォルトでunicode-bidi:isolate(文章方向の独立)が設定されている</small></p>
              <p class="tag">答え:<span>tr</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">表組み内の行の内容のタグ</p>
            <div class="answer">
              <p><b class="category">テーブルデータ</b></p>
              <p><small>セクショニング・ルートである為内容にセクションがある場合見出しが必要</small></p>
              <p class="tag">答え:<span>td</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">表組み内の行の見出しのタグ</p>
            <div class="answer">
              <p><b class="category">テーブルデータ</b></p>
              <p><small>使用することでレイアウト目的のtable要素でないことを示すことが出来る</small></p>
              <p class="tag">答え:<span>th</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">コンテンツのヘッダー情報をまとめるタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>見出し、リード、目次、ナビゲーションなどを入れる</small></p>
              <p class="tag">答え:<span>header</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">コンテンツのフッター情報をまとめるタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>address、フッターリンク、補足情報などを入れる</small></p>
              <p class="tag">答え:<span>footer</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">引用するコンテンツのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>cite属性にURLを指定することでどこから引用されたコンテンツかを示せる</small></p>
              <p class="tag">答え:<span>blockquote</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">見出しと内容をまとめるセクションのタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>見出しのある段落(章や節)というような意味なので見出しはほぼ必須</small></p>
              <p class="tag">答え:<span>section</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">リンクをまとめるセクションのタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>含まれるリンクがページ内か通常のリンクか、主要かそうでないかを問わず使用出来る</small></p>
              <p class="tag">答え:<span>nav</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">単独で扱える記事のようなセクションのタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>ブログの記事や、ページの本文とその見出しが入る</small></p>
              <p class="tag">答え:<span>article</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">本筋から逸れる解説などのセクションのタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>「関連する記事の紹介」のような補助的なコンテンツや、広告などにも使える</small></p>
              <p class="tag">答え:<span>aside</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">コンテンツの作者の連絡先のタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>ルートまたは記事等、親要素についての作者の連絡先を示す</small></p>
              <p class="tag">答え:<span>address</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">本文を補足するコンテンツのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>図表、画像、コード等、どのフロー・コンテンツも入れられる</small></p>
              <p class="tag">答え:<span>figure</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">figureタグにつけるキャプションのタグ</p>
            <div class="answer">
              <p><b class="category">コンテンツのグループ化</b></p>
              <p><small>figureの内容がいくつあってもキャプションは一つになる</small></p>
              <p class="tag">答え:<span>figcaption</span></p>
            </div>
          </div>
        </li>
        <li class="sp-slide">
          <div class="sp-image">
            <p class="text">ブラウザに表示する内容全体のタグ</p>
            <div class="answer">
              <p><b class="category">セクション</b></p>
              <p><small>background,vlinkなどの属性は廃止されている</small></p>
              <p class="tag">答え:<span>body</span></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
            
          
!
            
              @charset "UTF-8";
@CHARSET "UTF-8";

/*-------------------
 Base
-------------------*/
body,
html {
  color: #333333;
  font-family: メイリオ, Meiryo, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  height: 100%;
  overflow-x: hidden;
  line-height: 1.7em;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

p {
  margin: 0;
}

/*-------------------
 Main
-------------------*/

.wrapper {
  text-align: center;
  padding: 30px;
  margin: 0 auto;
  width: 80%;
}

h1 img {
  width: 150px;
  margin-bottom: 20px;
}

#slider {
  border: 4px solid #D84C27;
  padding: 50px 30px 30px;
  margin: 0 auto;
}

.sp-mask {
  cursor: text;
  height: 150px !important;
}

.text {
  font-size: 150%;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.category {
  font-weight: normal;
}

.category::before {
  content: "区分:";
}

.answer p small {
  font-size: 100%;
}

.tag {
  font-size: 80%;
}

.tag span {
  color: #fff;
}

            
          
!
            
              //Slider-pro
$(document).ready(function () {
  $('#slider').sliderPro({
    autoHeight: "true",
    autoplay: "false",
    draggable: "false",
    touchSwipe: "false",
    loop: "false",
    width: "auto"
  });
});

//ランダム表示
$(function () {
  var randomContent = [];
  $('.sp-slides .sp-slide').each(function () {
    randomContent.push($(this).html());
  });
  randomContent.sort(function () {
    return Math.random() - Math.random();
  });
  $('.sp-slides .sp-slide').empty();
  i = 0;
  $('.sp-slides .sp-slide').each(function () {
    $(this).append(randomContent[i]);
    i++;
  });
});
            
          
!
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