リアkira☆女子コラムコラムの見た目とCSSについて

目次

基本 h2,h3,h4,p

大見出し <h2>

中見出し <h3>

小見出し <h4>

本文 <p> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

フォントサイズ font-size

class=”fs18″ で font-size:18px;

fs12,fs14,fs16,fs18,fs20,fs24,fs28,fs32

文字色 color

class=”wight”

class=”black”

class=”gray”

class=”pink”

class=”red”

class=”yellow”

class=”blue”

背景色 background

class=”bg_white”

class=”bg_black”

class=”bg_light_gray”

class=”bg_gray”

class=”bg_pink”

class=”bg_red”

class=”bg_yellow”

class=”bg_blue”

class=”bg_light_blue”

強調表示 strong,em,mark

<strong>

<em>

<mark>

border

class=”border” 囲い線

class=”bt_dash” 上線

class=”bb_dash” 下線

間隔 margin,padding

■margin

class=”m10″ で margin:10px;
m0,m10,m20

class=”mt20″ で margin-top:20px;
mt0,mt5,mt10,mt15,mt20,mt30

class=”mr20″ で margin-right:20px;
mr0,mr5,mr10,mr20

class=”mb20″ で margin-bottom:20px;
mb0,mb5,mb10,mb20

class=”ml20″ で margin-left:20px;
ml0,ml5,ml10,ml20

■padding

class=”p10″ で padding:10px;
p0,p10,p20

class=”pt20″ で padding-top:20px;
pt0,pt5,pt10,pt15,pt20,pt30

class=”pr20″ で padding-right:20px;
pr0,pr5,pr10,pr20

class=”pb20″ で padding-bottom:20px;
pb0,pb5,pb10,pb20

class=”pl20″ で padding-left:20px;
pl0,pl5,pl10,pl20

横幅 width

class=”w20″ width:20%;

class=”w30″ width:30%;

class=”w40″ width:40%;

class=”w50″ width:50%;

class=”w80″ width:80%;

class=”w90″ width:90%;

class=”w100″ width:100%;

text-align

class=”center” 中心揃え

class=”left” 左揃え

class=”right” 右揃え

flort

 class=”float_l” でフロートレフト

class=”float_r” でフロートライト 

■フロート解除

フロート要素は class=”cfix” をつけた要素で囲って下さい。

リスト list

<ul class=”list”><li><⁄li><⁄ul>

ulにclass=”list”をつけると中のliに中黒とmarginがつきます。

  • ダミーテキスト
  • ダミーテキストダミーテキスト
  • ダミーテキスト
  • ダミーテキストダミーテキストダミーテキスト

ulにclass=”check”をつけると中のliにチェックアイコンとPCで下線がつきます。

  • ダミーテキスト
  • ダミーテキストダミーテキスト
  • ダミーテキスト
  • ダミーテキストダミーテキストダミーテキスト

その他 other

class=”sub_tit” サイト共通の中見出し

■ボタンCSS

class=”contact_btn”

class=”contact_btn free”

class=”contact_btn heart”

class=”more_btn”

■YouTubeをレスポンシブで表示

youtube埋め込みの<ifram>>要素を<div class=”youtube_wrap”>で囲むと、youtubeの画面がレスポンシブ対応になります

アイコンフォント

Font Awesomeが使えます。

ハートアイコン

<i class=”fa fa-heart red fs28″><⁄i>classをつければ色やサイズも変わります。

<< リアkira☆女子コラムTOPへ戻る

関連するカテゴリ

関連するコラム

  • 関連記事はありません。