<dl>
Skeletonでは、dlやその子要素に指定するクラスはありません。
<dl>
<dt>Definition term</dt>
<dd>Definition decription</dd>
</dl>- Definition term
- Definition decription
<em>
<em>
The quick brown fox jumps over the lazy dog.
</em>The quick brown fox jumps over the lazy dog.
<h1>
Skeletonでは、h1 に指定するクラスはありません。
<h2>The Picture of Dorian Gray</h2><h2>
Skeletonでは、h2 に指定するクラスはありません。
<h2>To Kill a Mockingbird</h2>To Kill a Mockingbird
<h3>
Skeletonでは、h3 に指定するクラスはありません。
<h3>Pride and Prejudice</h3>Pride and Prejudice
<h4>
Skeletonでは、h4 に指定するクラスはありません。
<h4>The Book Thief</h4>The Book Thief
<h5>
Skeletonでは、h5 に指定するクラスはありません。
<h5>Animal Farm</h5>Animal Farm
<h6>
Skeletonでは、h6 に指定するクラスはありません。
<h6>Gone with the Wind</h6>Gone with the Wind
.u-max-full-width
<img class="u-max-full-width" src="600x600.png">
.u-full-width
<img class="u-full-width" src="600x600.png"><input>
<label for="first_name">First name</label>
<input type="text" placeholder="John" id="first_name"><label>
<input type="checkbox">
<span class="label-body">checkbox</span>
</label><label>
<input type="radio" name="gender" value="m" checked>
<span class="label-body">男性</span>
</label>
<label>
<input type="radio" name="gender" value="f">
<span class="label-body">女性</span>
</label><input type="submit" value="Submit">
<input type="reset" value="Reset">.u-full-width
<label for="last_name">Last name</label>
<input type="text" placeholder="Doe" id="last_name" class="u-full-width"><input class="u-full-width" type="submit" value="Submit">
<input class="u-full-width" type="reset" value="Reset">.button-primary
<input class="button-primary" type="submit" value="Submit">
<input class="button-primary" type="reset" value="Reset"><ol>
Skeletonでは、olやその子要素に指定するクラスはありません。
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item
<ol>
<li>Nested ordered list item</li>
</ol>
</li>
</ol>- Ordered list item
- Ordered list item
- Ordered list item
- Nested ordered list item
<pre>
Skeletonでは、preタグに指定するクラスはありません。
<pre>pre</pre>pre
<pre><code>pre code</code></pre>pre code<select>
<select>
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select>.u-full-width
<select class="u-full-width">
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select><strong>
<strong>
The quick brown fox jumps over the lazy dog.
</strong>The quick brown fox jumps over the lazy dog.
<table>
<table>
<caption>メディアクエリ</caption>
<thead>
<tr>
<th>メディア</th>
<th>寸法</th>
</tr>
</thead>
<tbody>
<tr>
<td>mobile</td>
<td>≥0px</td>
</tr>
<tr>
<td>phablet</td>
<td>≥400px</td>
</tr>
<tr>
<td>tablet</td>
<td>≥550px</td>
</tr>
<tr>
<td>desktop</td>
<td>≥750px</td>
</tr>
<tr>
<td>desktop HD</td>
<td>≥1000px</td>
</tr>
<tr>
<td>desktop extra HD</td>
<td>≥1200px</td>
</tr>
</tbody>
</table>| メディア | 寸法 |
|---|---|
| mobile | ≥0px |
| phablet | ≥400px |
| tablet | ≥550px |
| desktop | ≥750px |
| desktop HD | ≥1000px |
| desktop extra HD | ≥1200px |
.u-full-width
<table class="u-full-width">
<caption>中等部1年</caption>
<thead>
<tr>
<th>姓</th>
<th>名</th>
</tr>
</thead>
<tbody>
<tr>
<td>佐藤</td>
<td>愛桜</td>
</tr>
<tr>
<td>戸高</td>
<td>美湖</td>
</tr>
</tbody>
</table>| 姓 | 名 |
|---|---|
| 佐藤 | 愛桜 |
| 戸高 | 美湖 |
<textarea>
<label for="ta">textarea</label>
<textarea placeholder="textarea" id="ta"></textarea>.u-full-width
<label for="tafw">textarea</label>
<textarea placeholder="textarea" id="tafw" class="u-full-width"></textarea><u>
<u>
The quick brown fox jumps over the lazy dog.
</u>The quick brown fox jumps over the lazy dog.
<ul>
Skeletonでは、ulやその子要素に指定するクラスはありません。
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item
<ul>
<li>Nested unordered list item</li>
</ul>
</li>
</ul>- Unordered list item
- Unordered list item
- Unordered list item
- Nested unordered list item
.u-pull-left
ボックスを左フロートにする (float: left) には、Skeleton CSS フレームワークの u-pull-left クラスを指定する。ボックスを左フロートにした場合、後続の要素は右側へ回り込む。
<div style="width:100px" class="u-pull-left">1</div>
<div style="width:100px" class="u-pull-left">2</div>
<div style="width:100px" class="u-cf">3</div>1
2
3
.u-pull-right
ボックスを右フロートにする (float: right) には、Skeleton CSS フレームワークの u-pull-right クラスを指定する。ボックスを右フロートにした場合、後続の要素は左側へ回り込む。
<div style="width:100px" class="u-pull-right">1</div>
<div style="width:100px" class="u-pull-right">2</div>
<div style="width:100px" class="u-cf">3</div>1
2
3
.u-cf
フロートを解除するには、Skeleton CSS フレームワークの u-cf クラスを指定する。
<div style="width:100px" class="u-pull-left">1</div>
<div style="width:100px" class="u-pull-left">2</div>
<div style="width:100px" class="u-cf">3</div>1
2
3