<style>
body {
margin: 0;
padding: 0.5em 1em 0 1em; /* 内側の余白の大きさ (上, 下, 左, 右) */
}
.p1 {
box-sizing: border-box; /* p タグの大きさを枠線(border)や余白(padding)を含めた大きさにする */
min-width: 450px; /* p タグの最小幅 */
max-width: 650px; /* p タグの最大幅 */
padding: 0.5em 0.5em; /* 枠線の内側の余白の大きさ (上下, 左右) */
margin: 0.5em 0; /* 枠線の外側の余白の大きさ (上下, 左右) */
border: 1px solid #f99; /* 大きさ確認用の赤い枠線 (線の太さ、種類、色) */
background: #fff; /* 背景色 */
color: #000; /* 文字の色 */
font-size: 12pt; /* 文字の大きさ */
font-family: "BIZ UDPGothic"; /* フォントの種類, "BIZ UD明朝", "Meiryo" など */
line-height: 1.8; /* 行間 */
text-align: justify; /* 均等割り付け。文章の行末を揃える。 */
text-indent: 1em; /* 段落の先頭の文字を 1文字インデントする。 */
}
h1 {
margin: 0.2em 0; /* 余白の大きさ (上下,左右) */
letter-spacing: 0.1em; /* 文字の間隔の調整。 */
}
</style>
<body>
<h1>h1 見出しサンプル</h1>
<p class="p1">
リチャード・トレビシックが1804年に鉄製レール上を走る蒸気機関車の
走行に成功したが、この頃は馬車鉄道用のもろい鋳鉄レールを使用して
いたため本格的な実用化までには至らなかった。
その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、
運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と
進んだ。<br/>
あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50
</p>
</body>
<style>
.div1 {
border: 1px solid #999; /* divの枠の線の太さ、種類、色 */
background: #eef; /* 背景色 */
padding: 0.6em 0.7em; /* 枠の内側の余白の大きさ, 上下、左右を個別に指定した例 */
margin: 1em 0 4em 1em; /* div の周囲の余白の大きさ, 上、下、左、右を個別に指定した例 */
width: 400px; /* div の幅 */
height: 120px; /* div の高さ */
line-height: 1.8; /* 文章の行間調整 */
font-size: 1em; /* 文字の大きさ、1em は親要素の font-size に対して 1倍の大きさ */
font-family: Meiryo; /* フォント */
text-align: justify; /* 均等割り付け。文章の行末を揃える。 */
}
/* マウスが div の上に来たときの設定 */
.div1:hover {
background: #ff9;
cursor: pointer; /* マウスカーソルを指先表示に */
}
/* マウスをクリックしたときの設定 */
.div1:active {
background: #f99;
}
</style>
<div class="div1">
div の中<br/>
<br/>
マウスを div 上に重ねると色が変わる (div:hover)。<br/>
クリックすると色が変わる (div:active)。<br/>
</div>
<ul>
<li>ul リスト1</li>
<li>ul リスト2</li>
<li>ul リスト3</li>
</ul>
<ol>
<li>ol リスト1</li>
<li>ol リスト2</li>
<li>ol リスト3</li>
</ol>
<!--
ul は li～/li 中でネストさせます。
ul の直下に ul を置くと JavaScript の処理でトラブルになるかも？
-->
<ul>
<li>リスト1</li>
<li>リスト2
<ul>
<li>リスト2-1</li>
<li>リスト2-2
<ul>
<li>リスト2-2-1</li>
<li>リスト2-2-2</li>
</ul>
</li>
<li>リスト2-3</li>
</ul>
</li>
<li>リスト3</li>
</ul>
<style>
ul {
margin: 0.5em; /* 周囲の余白の大きさ */
padding: 0.5em 1em; /* 上下,左右, 左でインデントの大きさ */
width: 300px; /* ul の幅 */
list-style-type: none; /* 箇条書きマーク, none, disc, decimal など */
border: 1px solid #99f; /* ul の枠線 */
}
ul li {
margin: 0.5em 0 0 0; /* li の周囲の余白, 上、右、下、左 */
border-width: 0 0 1px 0; /* li の枠線の幅、上、右、下、左 */
border-style: dotted; /* 線の種類, 破線 */
border-color: #999;
font-size: 10.5pt;
line-height: 1.8;
}
/* マウスカーソルがきたときの表示 */
ul li:hover {
background: #ccf; /* 背景色 */
text-decoration: underline; /* テキストに下線を入れる */
text-decoration-style: solid; /* 下線の種類、破線 */
text-decoration-color: #333; /* 下線の種類、破線 */
cursor: pointer; /* マウスカーソルを指先の表示にする */
}
</style>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>
<h2>float: left; で li 要素を左右に並べる</h2>
<style>
.ul1 {
padding: 0;
}
.ul1 li {
float: left; /* li を左から右に並べる */
list-style-type: none;
border: 1px solid #999;
width: 180px;
height: 50px;
text-align: center;
line-height: 50px; /* height と同じ値にすると上下中央になる。ただし1行のテキストの場合だけ使える。 */
}
</style>
<ul class="ul1">
<li>li リスト1</li>
<li>li リスト2</li>
<li>li リスト3</li>
</ul>
float 解除前のテキスト
<div style="clear:both;"></div><!-- float解除 -->
float 解除後のテキスト
<dl>
<dt>dt,用語1</dt>
<dd>dd,説明1</dd>
<dt>dt,用語2</dt>
<dd>dd,サンプルテキスト</dd>
<dt>dt,用語3</dt>
<dd>dd,サンプルテキスト<br/>サンプルテキスト</dd>
</dl>
<style>
dl {
/* border: 1px solid #f66; 領域確認用の赤い枠線。 */
}
dt {
font-size: 110%; /* 文字の大きさ */
font-weight: bold; /* 太い文字にする */
border-bottom: 1px solid #99c; /* 下線を入れる */
}
dd {
margin: 0.5em 1em 1em 2em; /* 外側の余白 (上, 右, 下, 左) */
line-height: 1.8; /* 行間 */
}
</style>
<dl>
<dt>用語1</dt>
<dd>用語の説明1。</dd>
<dt>用語2,見出し</dt>
<dd>あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40</dd>
<dt>用語3,見出し</dt>
<dd>
サンプル文章。
リチャード・トレビシックが1804年に鉄製レール上を
走る蒸気機関車の走行に成功した。
サンプルテキスト、サンプルテキスト
</dd>
</dl>
<table>
<caption>テーブルサンプル</caption>
<thead>
<tr>
<th>見出し1</th><th>見出し2</th><th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td>
</tr>
</tbody>
</table>
<style>
#TABLE1 {
border-collapse: collapse; /* セルの間をなしにする */
border: 2px solid #666; /* 枠線の太さ、線の種類、色 */
margin: 0 auto; /* テーブルを左右中央にセンタリング */
}
/* 表の題名の装飾 */
#TABLE1 caption {
padding: 0.4em 0; /* 内側の余白の大きさ, 上下 左右 */
font-size: 14pt; /* 文字の大きさ */
font-weight: bold; /* 太い文字にする */
letter-spacing: 0.3em; /* 文字の間隔 */
}
/* 1行目のセルの装飾 */
#TABLE1 th {
border: 1px solid #666;
background: #ccc;
padding: 0.3em 0; /* セルの内側の余白の大きさ 上下、左右 */
}
/* 2行目以降のセルの装飾 */
#TABLE1 td {
width: 150px; /* セルの幅 */
border: 1px solid #999;
background: #f8f8f8;
padding: 0.2em 0;
text-align: center; /* テキストをセンタリング */
}
/* セルにマウスカーソルがきたときの設定 */
#TABLE1 td:hover {
background:#f66; /* 背景色を変更 */
}
</style>
<table id="TABLE1">
<caption>テーブルサンプル</caption>
<thead>
<tr>
<th>見出し1</th><th>見出し2</th><th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td>
</tr>
<tr>
<td>2-1</td><td>2-2</td><td>2-3</td>
</tr>
<tr>
<td>3-1</td><td>3-2</td><td>3-3</td>
</tr>
</tbody>
</table>
<h2>div タグ内にテキストを配置する</h2>
<style>
.div1 { /* すべてのdivに共通のスタイル */
border: 1px solid #999; /* 枠線 */
margin: 1em 0; /* 外側の余白の大きさ (上下, 左右) */
background: #fcc; /* 背景色 */
}
.div11 {
text-align: left; /* 左寄せにする */
}
.div12 {
text-align: center; /* センタリングする */
}
.div13 {
text-align: right; /* 右寄せにする */
}
</style>
<!-- class 名は複数の名前を同時に指定することができます。-->
<div class="div1 div11">
左寄せ<br/>
text-align: left;<br/>
</div>
<div class="div1 div12">
センタリング<br/>
text-align: center;<br/>
</div>
<div class="div1 div13">
右寄せ<br/>
text-align: right;<br/>
</div>
<h1>文字間隔の調整 CSS letter-spacing</h1>
<style>
p {
padding: 0.5em;
border: 1px solid #ccc;
margin: 0 0 1.5em 0;
}
</style>
<b>指定なし</b>
<p>サンプルテキスト</p>
<b>letter-spacing: 0.5em;</b>
<p style="letter-spacing:0.5em">サンプルテキスト</p>
<b>letter-spacing: 1em;</b>
<p style="letter-spacing:1em">サンプルテキスト</p>
<b>letter-spacing: 1.5em;</b>
<p style="letter-spacing:1.5em">サンプルテキスト</p>
<b>letter-spacing: 2em;</b>
<p style="letter-spacing:2em">サンプルテキスト</p>
<pre style="padding:0.6em; background:#ddf; line-height:1.7;">
◎ノート
文字間隔は letter-spacing で調整する。
半角スペースや &nbsp; で調整しない。
</pre>
<style>
.div1 {
box-shadow: 3px 3px 4px #999; /* 右,下,ぼかし,色 */
margin: 20px;
width: 200px;
border: 1px solid #999;
padding: 0.5em;
line-height: 1.7;
font-family: Meiryo;
}
</style>
<div class="div1">
div1<br/>
サンプルテキスト<br/>
サンプルテキスト<br/>
サンプルテキスト<br/>
</div>
<style>
.div1 {
border-radius: 10px; /* 角を丸くする */
box-shadow: 1px 1px 3px #ddd; /* ドロップシャドー */
margin: 20px;
width: 200px;
border: 1px solid #999;
padding: 0.5em;
line-height: 1.8;
font-family: Meiryo;
}
</style>
div の角を丸くする (CSS border-radius)<br/>
div に影を付ける (CSS box-shadow)<br/>
<div class="div1">
div1<br/>
サンプルテキスト<br/>
サンプルテキスト<br/>
サンプルテキスト<br/>
</div>
<style>
:root {
/* グラデーション画像のパラメータを適当に編集してみる */
/* 横縞のグラデーション画像 */
--gradation-h: repeating-linear-gradient(
0deg,
#b76,
#b76 13px,
#6bd 13px,
#333 20px
);
/* 縦縞のグラデーション画像 */
--gradation-v: repeating-linear-gradient(
90deg,
#eee,
#eee 2px,
#9cc 2px,
#9aa 20px,
#333 27px,
#eee 30px,
#eee 32px
);
}
/* すべての div に共通のスタイル */
.div0 {
width: 400px;
height: 128px;
margin: 0 5px 0 0;
}
.div1 {
/* 先に指定した画像が上になる点に注意。 */
background-image: var(--gradation-h), var(--gradation-v);
}
.div2 {
background-image: var(--gradation-v), var(--gradation-h);
}
</style>
横縞のテクスチャ<br/>
<div class="div0" style="background: var(--gradation-h)"></div>
縦縞のテクスチャ<br/>
<div class="div0" style="background: var(--gradation-v)"></div>
<!--
background-blend-mode の値
color-burn, multiply, darken, lighten,
screen, overlay, color-dodge, hard-light, soft-light,
difference, exclusion, hue, saturation, color, luminosity
-->
div1
<div class="div0 div1" style="background-blend-mode: color-burn;"></div>
div2
<div class="div0 div2" style="background-blend-mode: color-burn;"></div>
