jp us
未分類 > css sample

css sample

灰色の枠の中はコードです。これを記事に貼り付けると、
<strong class="r_l">直下のピンク枠のように表示されます。</strong>

灰色の枠の中はコードです。これを記事に貼り付けると、
直下のピンク枠のように表示されます。

shop.eqbo.jpのテーマ オリジナルのcss (main.css) 記事で使うものだけ抜粋

hタグの装飾

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h3 class="subtitle" style="width:100%;"><span>h3.subtitle>span width:100%;</span></h3>
<h1 class="deco00">h1.deco00</h1>
<h2 class="deco01">h2.deco01</h2>
<h3 class="deco02">h3.deco02</h3>
<h4 class="deco03">h4.deco03</h4>
<h5 class="deco04">h5.deco04</h5>
<h5 class="deco05">h5.deco05</h5>

h1

h2

h3

h4

h5

h3.subtitle>span width:100%;

h1.deco00

h2.deco01

h3.deco02

h4.deco03

h5.deco04
h5.deco05

※ これらのクラスはh1-h5全てに使用できるが、文字の大きさは統一されてしまう

span

<span>span (no class)</span>
<span class="l_k">span.l_k</span> <span class="l_b">span.l_b</span>
<br> <span class="l_g">span.l_g</span> <span class="l_r">span.l_r</span>
<br> <span class="n_k">span.n_k</span> <span class="n_b">span.n_b</span>
<br> <span class="n_g">span.n_g</span> <span class="n_r">span.n_r</span> <span class="n_o">span.n_o</span>
<br> <span class="s_k">span.s_k</span> <span class="s_b">span.s_b</span>
<br> <span class="s_g">span.s_g</span> <span class="s_r">span.s_r</span> <span class="s_o">span.s_o</span>

span (no class)
span.l_k span.l_b

span.l_g span.l_r

span.n_k span.n_b

span.n_g span.n_r span.n_o

span.s_k span.s_b

span.s_g span.s_r span.s_o

b

<b class="b">b.b :#0068b7</b>
<br> <b class="n">b.n :#00a1e9</b>
<br> <b class="g">b.g :#69821b</b>
<br> <b class="r">b.r :#c9171e</b>
<br> <b class="o">b.o :#abb1b5</b>
<br> <strong class="r">strong.r</strong>

b.b :#0068b7

b.n :#00a1e9

b.g :#69821b

b.r :#c9171e

b.o :#abb1b5

strong.r

※ これらはbタグの代わりに、strongタグでも利用できる。

<b class="k_l">b.k_l :#333333</b>
<br> <b class="b_l">b.b_l :#0068b7</b>
<br> <b class="n_l">b.n_l :#00a1e9</b>
<br> <b class="g_l">b.g_l :#69821b</b>
<br> <b class="r_l">b.r_l :#c9171e</b>
<br> <b class="o_l">b.o_l :#abb1b5</b>
<br> <strong class="r_l">strong.r_l</strong>

b.k_l :#333333

b.b_l :#0068b7

b.n_l :#00a1e9

b.g_l :#69821b

b.r_l :#c9171e

b.o_l :#abb1b5

strong.r_l

※ これらはbタグの代わりに、strongタグでも利用できる。

p

<p class="b">p.b</p>
<p class="n">p.n</p>
<p class="g">p.g</p>

p.b

p.n

p.g

※ マウスオーバーで装飾が変わる

記事内で使用する全画面画像（1440pxを720pxにする）

<span class="l_b">↓「メディアの追加」から、フルサイズで1440pxを埋め込んだデフォルトの状態</span>
<img src="http://shop.eqbo.jp/wp-content/uploads/2018/06/css_img_sample.jpg" alt="" width="1440" height="778" class="aligncenter size-full wp-image-29179" />
<br><br>
<span class="l_r">↓上記タグを加工し、このサイトの横幅いっぱいに合わせるクラスを指定した状態</span>
<div class="img-720x2"><img src="http://shop.eqbo.jp/wp-content/uploads/2018/06/css_img_sample.jpg" class="" /></div>



↓「メディアの追加」から、フルサイズで1440pxを埋め込んだデフォルトの状態

↓上記タグを加工し、このサイトの横幅いっぱいに合わせるクラスを指定した状態

dl

<dl>
<dt>dt.dl01</dt>
<dd>幅32cm、奥行32cm、全高38cm</dd>
<dt>総重量</dt>
<dd>約 5kg (本体＋ランプ)</dd>
</dl>
<dl class="dl01">
<dt>dt.dl01</dt>
<dd>幅32cm、奥行32cm、全高38cm</dd>
<dt>総重量</dt>
<dd>約 5kg (本体＋ランプ)</dd>
</dl>
<dl class="dl02">
<dt>dt.dl02</dt>
<dd>幅32cm、奥行32cm、全高38cm</dd>
<dt>総重量</dt>
<dd>約 5kg (本体＋ランプ)</dd>
</dl>

dt.dl01
幅32cm、奥行32cm、全高38cm
総重量
約 5kg (本体＋ランプ)
dt.dl01
幅32cm、奥行32cm、全高38cm
総重量
約 5kg (本体＋ランプ)
dt.dl02
幅32cm、奥行32cm、全高38cm
総重量
約 5kg (本体＋ランプ)

ol

<ol>
<li>ol</li>
<li>テスト</li>
</ol>
<ol class="nm01">
<li>ol.nm01</li>
<li>テスト</li>
</ol>

  1. ol
  2. テスト
  1. ol.nm01
  2. テスト

ul

<ul>
<li>ul</li>
<li>テスト</li>
</ul>
<ul class="blg">
<li>ul.blg</li>
<li>テスト</li>
</ul>

  • ul
  • テスト
  • ul.blg
  • テスト

table

<table>
<tbody>
<tr>
<th>素</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>素</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl001">
<tbody>
<tr>
<th>tbl001</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl001</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl002">
<tbody>
<tr>
<th>tbl002</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl002</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl003">
<tbody>
<tr>
<th>tbl003</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl003</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
<table class="tbl004">
<tbody>
<tr>
<th>tbl004</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>tbl004</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>

素 見出し 見出し
素 内容 内容
tbl001 見出し 見出し
tbl001 内容 内容
tbl002 見出し 見出し
tbl002 内容 内容
tbl003 見出し 見出し
tbl003 内容 内容
tbl004 見出し 見出し
tbl004 内容 内容

liner

p.liner_s
<p class="liner_s">&nbsp;</p>
p.liner_d
<p class="liner_d">&nbsp;</p>
p.liner_w
<p class="liner_w">&nbsp;</p>
p.liner_s
<p class="liner_g">&nbsp;</p>
hr
<hr>
hr.liner_s
<hr class="liner_s">
hr.liner_d
<hr class="liner_d">
hr.liner_w
<hr class="liner_w">
hr.liner_g
<hr class="liner_g">

p.liner_s

 

p.liner_d

 

p.liner_w

 

p.liner_g

 

hr

hr.liner_s

hr.liner_d

hr.liner_w

hr.liner_g

申し込み系ボタン

<div class="button-contact">
<a class="pure-button pure-button-goto" href="#"><i class="fa fa-envelope"></i> div.button-contact>a.pure-button.pure-button-goto </a>
</div>

div.button-contact>a.pure-button.pure-button-goto

注文フォームに移動するボタン（cssではないが、各注文フォーム入り口のリンクで使用）

<h5 class="deco03"><a name="buy"></a>
<span>購入方法--例ではブレスライトのフォーム(order_blyg.html)に移動</span>
</h5>
[order_link pdname="order_blyg"]
<br class="clr">


購入方法–例ではブレスライト注文フォーム(order_blyg.html)に移動



CSSライブラリ pure css

公式サイト・詳細なサマリーは こちら（英語）

日本語紹介記事：Yahoo Pure を使ってみる

ボタン

<a class="pure-button" href="#">a.pure-button</a>
<button class="pure-button">button.pure-button</button>
<br>
<a class="pure-button pure-button-primary" href="#">a.pure-button.pure-button-primary</a>
<a class="pure-button" href="#" style="font-size:150%;">フォントサイズで大きいボタンも作成可能</a>


a.pure-button


a.pure-button.pure-button-primary
フォントサイズで大きいボタンも作成可能

隠したいものをかんたんに隠す（応募フォームの受付期間外に多用していた）

<div class="button-contact">
<a class="pure-button pure-button-goto" href="#"> 見えている </a>
<a class="pure-button pure-button-goto" href="#" hidden> 見えない </a>
</div>

見えている

グリッドレイアウト（divの箱を並べてレイアウトを決める）

<style>
.pure-g div{text-align: center; background-color: seashell;}
</style>
<div class="pure-g">
<div class="pure-u-1-3"><p>1/3 ３等分</p></div>
<div class="pure-u-1-3"><p>1/3 ３等分</p></div>
<div class="pure-u-1-3"><p>1/3 ３等分</p></div>
</div>
<br>
<div class="pure-g">
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
<div class="pure-u-1-3"><p>2/6 6等分*2</p></div>
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
<div class="pure-u-1-6"><p>1/6 6等分</p></div>
</div>

1/3 ３等分

1/3 ３等分

1/3 ３等分

1/6 6等分

1/6 6等分

2/6 6等分*2

1/6 6等分

1/6 6等分

テーブル

<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
</tbody>
</table>

# Make Model Year
1 Honda Accord 2009
1 Honda Accord 2009

フォームをきれいに表示する(記事の中ではほとんど使わない)

<form class="">
<input type="email" placeholder="メール">
<input type="password" placeholder="パスワード">
<br>
<label for="remember"><input id="remember" type="checkbox"> チェックを入れる</label>
<button type="submit" class="">ボタン</button>
</form>
<br>
<form class="pure-form">
<input type="email" placeholder="メール">
<input type="password" placeholder="パスワード">
<br>
<label for="remember"><input id="remember" type="checkbox"> チェックを入れる</label>
<button type="submit" class="pure-button pure-button-primary">ボタン</button>
</form>











アイコンフォントライブラリ font awesome

アイコンを探すには こちら

アイコンをクリックするとタグがコピーされる。それを記事に貼り付けるだけ

日本語紹介記事：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

<style>
.shoukai {font-size: 240%;}
</style>
<pre class="shoukai">
<i class="fa fa-address-book"></i> "fa fa-address-book"
<i class="fa fa-comment" style="color:hotpink;"></i> "fa fa-comment"
<i class="fa fa-spinner fa-spin"></i> "fa fa-spinner fa-spin"
<i class="fa fa-bus fa-rotate-90"></i> "fa fa-bus fa-rotate-90"
</pre>

 "fa fa-address-book"
 "fa fa-comment"
 "fa fa-spinner fa-spin"
 "fa fa-bus fa-rotate-90"

便利なスクリプト

<script type="text/javascript">
jQuery(function () {
//jQueryのスクリプトを挿入したい場合は、この中に記述する。
//また、ネットで紹介されている$("#test") などのように、$から始める記法は、
//WordPressとの兼ね合い上、使用できない。
//「$」の部分を「jQuery」と書き直し、使用すること。 jQuery("#test")
});
</script>

<div class="check_reg">
<input type="checkbox" id="input_reg">
<label for="input_reg">チェックを入れると下の要素が現れます</label>
</div>
<div class="toggle_reg">
<a class="pure-button pure-button-goto" href="#"> div.toggle_reg内の要素が現れました </a>
</div>
<script type="text/javascript">
jQuery(function(){
jQuery('div.toggle_reg').css('display','none');
jQuery('div.check_reg input').change(function(){
jQuery('div.toggle_reg').stop(true, true).slideToggle('slow');
});
});
</script>


div.toggle_reg内の要素が現れました

<script type="text/javascript">
jQuery(function () {
jQuery('#pay_daibiki').remove(); //注文フォームから、代金引換を消す
jQuery('#pay_credit').remove(); //注文フォームから、クレジットカード決済を消す
jQuery('#other_send').attr('hidden','hidden'); //注文フォームから、「別の発送先」を消す

//ページ下部↓にあるはずの青いtwitter,facebookボタンが消える
jQuery('#footer_sns_button').remove(); //フッターのSNSボタン(twitter,fb)を消す
});
</script>


 

お問い合わせフォーム