クラス
文字色クラス
文字色を指定するクラス。<span class="red">文字色が赤</span>のように使用する。
| クラス | 説明 |
|---|---|
| red | 文字色が赤 |
| green | 文字色が緑 |
| blue | 文字色が青 |
| yellow | 文字色が黄 |
| pink | 文字色がピンク |
| black | 文字色が黒 |
| white | 文字色が白 |
背景色クラス
背景色を指定するクラス。<p class="b-red">背景色が赤</p>のように使用する。
| クラス | 説明 |
|---|---|
| b-red | 背景色が赤 |
| b-green | 背景色が緑 |
| b-blue | 背景色が青 |
| b-yellow | 背景色が黄 |
| b-pink | 背景色がピンク |
| b-black | 背景色が黒 |
| b-white | 背景色が白 |
文字の大きさクラス
文字の大きさを指定するクラス。<p class="big">文字が大きい</p>のように使用する。
| クラス | 説明 |
|---|---|
| big | 文字が大きい |
| mini | 文字が小さい |
| mininote | 文字が小さい＋文字が薄い |
文字揃えクラス
文字を揃えるクラス。<p class="center">文字をセンタリング</p>のように使用する。
| クラス | 説明 |
|---|---|
| left | 左揃え |
| center | 中央揃え |
| right | 右揃え |
表示クラス
| クラス | 説明 |
|---|---|
| inline | インラインとして表示する |
| block | ブロックとして表示する。ブロックはセンタリングされる |
| inline-block | インラインブロックとして表示する |
| none | 表示しない |
インラインとインラインボックスは横方向へ並んでいきます。ブロックは縦方向へ並んでいきます。
CSSの専門的なことなので、詳しくは検索して調べてください。
機能性クラス
| クラス | 説明 |
|---|---|
| popup | 画像をポップアップさせる。imgタグやaタグに付与する |
| sortable | テーブルをソート可能にする ※tableタグ限定で、このテーブルのように1行目がthであること |
情報ボックス
注意や警告を表示する情報ボックス。インラインブロックです。
<p class="infobox-green"></p>
<p class="infobox-blue"></p>
<p class="infobox-yellow"></p>
<p class="infobox-red"></p>
バッジ
注目する文字を表示するバッジ。インラインです。
<span class="badge-blue"></span>
<span class="badge-green"></span>
<span class="badge-red"></span>
<span class="badge-black"></span>
<span class="badge-gold"></span>
<span class="badge-silver"></span>
<span class="badge-bronze"></span>
クラスの複数指定
クラスは空白で区切ると複数指定することができます。
クラスを複数指定する例 <span class="red b-red">文字色と背景色を同時に赤色にする</span>
タグ
インラインタグ
| タグ | 説明 |
|---|---|
| <b></b> | 強調 |
| <em></em> | 強調 |
| <strong></strong> | 強調(赤字) |
| <mark></mark> | マーカー |
| <code></code> | print "Hello World"; |
| <kbd></kbd> | Ctrl＋K |
| <var></var> | $_SERVER['HTTP_HOST'] |
<img>
記事内の最上位にあるimgはブロックになり、センタリングされて表示されます。
imgをインラインとして表示したい場合はdiv等の中に入れるとよいでしょう。
<h2></h2>
記事のメインタイトルがH1なので、記事内の見出しはH2から始めることにします。
<h3></h3>
H3見出し
<ul><li></li></ul>
- 1番目の項目
- 2番目の項目
- 3番目の項目
- 3-1番目の項目
- 3-2番目の項目
- 4番目の項目
<ol><li></li></ol>
- 1番目の項目
- 2番目の項目
- 3番目の項目
- 3-1番目の項目
- 3-2番目の項目
- 4番目の項目
<table></table>
| - | G1 | G2 | G3 |
|---|---|---|---|
| 日本 | 23 | 36 | 67 |
| イギリス | 33 | 45 | 67 |
| アイルランド | 12 | 7 | 45 |
| フランス | 27 | 26 | 58 |
| アメリカ | 110 | 140 | 205 |
テーブルはセンタリングされます。中身のテキストもセンタリングされます。
中身を左揃えにしたい場合は<td class="left">としてください。
<hr>
<blockquote></blockquote>
ここには引用文が入ります。ここには引用文が入ります。ここには引用文が入ります。ここには引用文が入ります。
<pre><span class="pre-title"></span></pre>
HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>デザイン見本</title> <link href="base-blog.css" rel="stylesheet"> <link href="blog.css" rel="stylesheet"> <script src="jquery-1.9.1.js"></script> </head>
ツールのコードハイライトを利用して作ります。
タイトルをクリックすると中身をテキストファイルとしてダウンロードできます。(タイトル名.txt)
タイトルに拡張子をつければ、その拡張子でダウンロードさせることができます。
ソーシャル埋め込み
各サイトで発行されるHTMLタグを直接貼り付けるだけで利用できます。
YouTube埋め込み
Twitter埋め込み
下館バイパスのバイパス区間7.6キロメートル全線が10月7日(火)に開通します。
http://t.co/QW5IIgKTGZ
— 道路開通情報 (@road_open) 2014, 9月 19Yahoo地図埋め込み
おわりに
ここで紹介したデザインは全てblog.cssに記載されています