HTML & CSS 覚書　（自己確認用）

html覚書

ブロックライン要素

<div>　［内容のひとかたまり］　</div>
h1～h6　⇒見出し
<p>　［段落］　</p>
<pre>　［整形済み］　<pre>
<blockquote>　［引用］　</blockquote>
<hr>　［水平線］

インライン要素

<br>　⇒［単独で改行］
<em>　［アクセント］　</em>
<strong>　［重要強調］　</strong>
<b>　［太字］　</b>
<i>　［斜体（イタリック）］　</i>
<small>　［注釈（小文字）］　</small>
<sub>　［下付文字］　</sub>
<sup>　［上付文字］　</sup>
<mark>　［マーカー（ブラウザ対応少）］　</mark>
<del>　［削除された部分］　</del>
<span>　［ある範囲を指定］　</span>
<a href="～.htm">　［リンク先の名称］　</a>

リスト、テーブル

<ol>　［順序リスト定義］　</ol>
<ul>　［非順序リスト定義］　</ul>
<li>　［上二つのリスト項目］　</li>

<dl>　［説明用リスト定義］　</dl>
<dt>　［説明用リスト項目］　</dt>
<dd>　［説明用リスト項目の解説］　</dd>

<table>　［テーブル定義］　</table>
<caption>　［キャプションを付ける］　</caption>
<tr>　［横一行分の定義］　</tr>
<th>　［縦の見出し］　</th>
<td>　［データ内容］　</td>

画像埋込

その他コンテンツの埋込

<imbed>　［動画、音声ファイルなどプラグインデータの埋込］
<object>　［より広範な外部データの埋込］　</object>
<video>　［動画再生］　</video>
<audio>　［音声再生］　</audio>

特定の用法

タグの記述

<は、<
>は、>
に置き換える。複数行の場合は、
<pre></pre>タグで囲む。

非表示コメントの記述

title属性

title="今どきツールチップで遊べるかも"

Cascading Style Sheets

記述法

外部cssファイルで統一

<head>
<title>これは関係ない、ただのタイトル</title>
<link rel="stylesheet"href="ファイルのURL.css"type="text/css">
</head>

各htmlファイル内

各タグ内

<p style="color:green; background-color:red;">
語るべき事
</p>

特定の範囲に設定

h1.midoriyou 　　⇒<h1 class="midoriyou">
h1.#tokuteino　　⇒<h1 id="tokuteino">
.midoriyou 　　　⇒<すべてのタグ class="midoriyou">
.#tokuteino　　　⇒<特定のタグ id="tokuteino">

　基本は、［class］は［html］内で幾つものタグに使用して構わない。
［id］は厳密には1つの［html］内に一つだけ置くべきもの。

テキスト

基本

color:　［色（「#123456」など）］　;

font-size:　[pt,em,ex,px,％など]　;

font-weight:　[下参照]　;

bold　　　⇒太字
bolder　　⇒より太く
ligter　　⇒より細く
100～900　⇒フォントによっていくつかの段階

text-indent:　段落のインデント一文字［1em］or［％］など　;

font-family:'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳＰゴシック', 'MS PGothic', sans-serif;

水平位置

text-align:　［下参照］　;

left 　　⇒左寄せ
right 　　⇒右寄せ
center 　　⇒センタリング
justify　　⇒均等割付

行送り、行間

line-height:　[12ptの時12ptや1em指定で行間無し、％も可]　;

線の修飾

text-decoration:　［下参照］　;

overline ⇒上線
underline ⇒下線
line-through ⇒取消線

二重線などは、[border]を使用する。波線やカラーもあるが、対応ブラウザが限られている。点滅もあるが、ブラウザが拒否している場合が多い。

斜体文字

font-style:　［italic］または［oblique］　;

背景

背景色

background-color:　［色（「#123456」など）］　;

background-image:url("yuuyakeiro.gif");
　　⇒画像の繰り返し、スクロール、位置なども設定可能

ボックス

基本

border-color:　［色（「#123456」など）］　;

border-style:　［下参照］　;

solid 　　⇒直線
double　　⇒二重線
groove　　⇒溝線
ridge 　　⇒稜線（りょうせん）
inset 　　⇒沈み込み線
outset　　⇒浮き上がり線
dotted　　⇒点線
dashed　　⇒破線

border-width:　［太さ指定、下参照］　;

10px　⇒一つ指定は全部同じ太さ
10px 20px　⇒［上下10px＋左右20px］
10px 20px 30px 40px⇒［上10、右20、下30、左40px］

設定をまとめる場合

border:［widthの値］半角［style］半角［color］;

幅と高さ

height:　［高さ指定］　;

width:　［幅指定］　;

マージンはボーダーの外側領域

margin:10px;
　　　⇒全部同じ間隔
margin:10px 20px;
　　　⇒上下10px＋左右20px
margin:10px 20px 30px 40px;
　　　⇒上10、右20、下30、左40px

　もちろん％など他の単位での使用も可能。マイナスの値も可能。

パディングはボーダーとコンテンツの間

padding:10px;
　　　⇒全部同じ間隔
padding:10px 20px;
　　　⇒上下10px＋左右20px
padding:10px 20px 30px 40px;
　　　⇒上10、右20、下30、左40px

　マイナスの値は不可能。

位置

基本

position:　［設定しないと次が作用しない］　;

relative　⇒通常表示位置からの位置変化
absolute　⇒親要素（普通左上位置）からの絶対位置
fixed 　⇒上に加えて、スクロールしても動かない

top:　［親要素上端からの位置］　;
bottom:　［親要素下端からの位置］　;
left:　［親要素左端からの位置］　;
right:　［親要素右端からの位置］　;

回り込み

flot:　［下参照］　;

left 　⇒ボックスが左、文字が右に回り込み
right　⇒ボックスが右、文字が左に回り込み

positionで絶対位置指定をしていると作動しない

clear:　［下参照］　;

left 　⇒上の［left］を解消
right　⇒上の［right］を解消
both 　⇒上のどちらも解消

HTML & CSS 覚書 （自己確認用）