フォントサイズ例:
フォントサイズ:8px
フォントサイズ:12px
フォントサイズ:16px
フォントサイズ:20px
フォントサイズ:24px
フォントサイズ:30px

 

フォントサイズCSS一覧:
.fz10 {font-size: 10px;}
.fz11 {font-size: 11px;}
.fz12 {font-size: 12px;}
.fz14 {font-size: 14px;}
.fz16 {font-size: 16px;}
.fz18 {font-size: 18px;}
.fz20 {font-size: 20px;}
.fz21 {font-size: 21px;}
.fz22 {font-size: 22px;}
.fz23 {font-size: 23px;}
.fz24 {font-size: 24px;}
.fz25 {font-size: 25px;}
.fz26 {font-size: 26px;}
.fz27 {font-size: 27px;}
.fz28 {font-size: 28px;}
.fz29 {font-size: 29px;}
.fz30 {font-size: 30px;}

 

色指定例:
太字「class=”bold”」
太字「class=”strong”」
太字「class=”em”」
色:赤「class=”red”」
色:グレー「class=”gray”」
色:グレー2「class=”gray2″」
色:青「class=”blue”」

 

  1. 数字付き「ol class=”number”」
  2. 数字付き「ol class=”number”」
  3. 数字付き「ol class=”number”」
  • ドット付き「ul class=”dot”」
  • ドット付き「ul class=”dot”」
  • ドット付き「ul class=”dot”」
  • ドット付き2「ul class=”dot2″」
  • ドット付き2「ul class=”dot2″」
  • ドット付き2「ul class=”dot2″」
  • ハイフン付き「ul class=”hyphen”」
  • ハイフン付き「ul class=”hyphen”」
  • ハイフン付き「ul class=”hyphen”」

 

テーブル例:
■テーブル1「class=”tbl1″」

THTHTH
TDTDTD
TDTDTD

 

行の高さ例:

■行の高さ 28px「class=”lh28″」テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

■行の高さ 32px「class=”lh32″」テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

■行の高さ 36px「class=”lh36″」テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

 

配置例:

■左揃え「class=”tl”」テキストが入ります。

■中央揃え「class=”tc”」テキストが入ります。

■右揃え「class=”tr”」テキストが入ります。

 

マージン・パディング例:

マージントップ:80px

 

マージントップCSS一覧:
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt45 {margin-top: 45px;}
.mt50 {margin-top: 50px;}
.mt55 {margin-top: 55px;}
.mt60 {margin-top: 60px;}
.mt65 {margin-top: 65px;}
.mt70 {margin-top: 70px;}
.mt75 {margin-top: 75px;}
.mt80 {margin-top: 80px;}
.mt85 {margin-top: 85px;}
.mt90 {margin-top: 90px;}
.mt95 {margin-top: 95px;}
.mt100 {margin-top: 100px;}

マージンボトム:80px

 

マージンボトムCSS一覧:
.mb0 {margin-bottom: 0px;}
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb45 {margin-bottom: 45px;}
.mb50 {margin-bottom: 50px;}
.mb55 {margin-bottom: 55px;}
.mb60 {margin-bottom: 60px;}
.mb65 {margin-bottom: 65px;}
.mb70 {margin-bottom: 70px;}
.mb75 {margin-bottom: 75px;}
.mb80 {margin-bottom: 80px;}
.mb85 {margin-bottom: 85px;}
.mb90 {margin-bottom: 90px;}
.mb95 {margin-bottom: 95px;}
.mb100 {margin-bottom: 100px;}
.mb110 {margin-bottom: 110px;}
.mb120 {margin-bottom: 120px;}
.mb130 {margin-bottom: 130px;}
.mb140 {margin-bottom: 140px;}
.mb150 {margin-bottom: 150px;}

 

マージン左CSS一覧:
.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.ml35 {margin-left: 35px;}
.ml40 {margin-left: 40px;}
.ml45 {margin-left: 45px;}
.ml50 {margin-left: 50px;}
.ml55 {margin-left: 55px;}
.ml60 {margin-left: 60px;}
.ml65 {margin-left: 65px;}
.ml70 {margin-left: 70px;}
.ml75 {margin-left: 75px;}
.ml80 {margin-left: 80px;}
.ml85 {margin-left: 85px;}
.ml90 {margin-left: 90px;}
.ml95 {margin-left: 95px;}
.ml100 {margin-left: 100px;}

 

マージン右CSS一覧:
.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr25 {margin-right: 25px;}
.mr30 {margin-right: 30px;}
.mr35 {margin-right: 35px;}
.mr40 {margin-right: 40px;}
.mr45 {margin-right: 45px;}
.mr50 {margin-right: 50px;}
.mr55 {margin-right: 55px;}
.mr60 {margin-right: 60px;}
.mr65 {margin-right: 65px;}
.mr70 {margin-right: 70px;}
.mr75 {margin-right: 75px;}
.mr80 {margin-right: 80px;}
.mr85 {margin-right: 85px;}
.mr90 {margin-right: 90px;}
.mr95 {margin-right: 95px;}
.mr100 {margin-right: 100px;}

パディングトップ:80px

 

パディングトップCSS一覧:
.pt0 {padding-top: 0px;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt45 {padding-top: 45px;}
.pt50 {padding-top: 50px;}
.pt55 {padding-top: 55px;}
.pt60 {padding-top: 60px;}
.pt65 {padding-top: 65px;}
.pt70 {padding-top: 70px;}
.pt75 {padding-top: 75px;}
.pt80 {padding-top: 80px;}
.pt85 {padding-top: 85px;}
.pt90 {padding-top: 90px;}
.pt95 {padding-top: 95px;}
.pt100 {padding-top: 100px;}

パディングトップ:80px

 

パディングボトムCSS一覧:
.pb0 {padding-bottom: 0px;}
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb45 {padding-bottom: 45px;}
.pb50 {padding-bottom: 50px;}
.pb55 {padding-bottom: 55px;}
.pb60 {padding-bottom: 60px;}
.pb65 {padding-bottom: 65px;}
.pb70 {padding-bottom: 70px;}
.pb75 {padding-bottom: 75px;}
.pb80 {padding-bottom: 80px;}
.pb85 {padding-bottom: 85px;}
.pb90 {padding-bottom: 90px;}
.pb95 {padding-bottom: 95px;}
.pb100 {padding-bottom: 100px;}

 

パディング左CSS一覧:
.pl0 {padding-left: 0px;}
.pl5 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl15 {padding-left: 15px;}
.pl20 {padding-left: 20px;}
.pl25 {padding-left: 25px;}
.pl30 {padding-left: 30px;}
.pl35 {padding-left: 35px;}
.pl40 {padding-left: 40px;}
.pl45 {padding-left: 45px;}
.pl50 {padding-left: 50px;}
.pl55 {padding-left: 55px;}
.pl60 {padding-left: 60px;}
.pl65 {padding-left: 65px;}
.pl70 {padding-left: 70px;}
.pl75 {padding-left: 75px;}
.pl80 {padding-left: 80px;}
.pl85 {padding-left: 85px;}
.pl90 {padding-left: 90px;}
.pl95 {padding-left: 95px;}
.pl100 {padding-left: 100px;}

 

パディング右CSS一覧:
.pr0 {padding-right: 0px;}
.pr5 {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}
.pr25 {padding-right: 25px;}
.pr30 {padding-right: 30px;}
.pr35 {padding-right: 35px;}
.pr40 {padding-right: 40px;}
.pr45 {padding-right: 45px;}
.pr50 {padding-right: 50px;}
.pr55 {padding-right: 55px;}
.pr60 {padding-right: 60px;}
.pr65 {padding-right: 65px;}
.pr70 {padding-right: 70px;}
.pr75 {padding-right: 75px;}
.pr80 {padding-right: 80px;}
.pr85 {padding-right: 85px;}
.pr90 {padding-right: 90px;}
.pr95 {padding-right: 95px;}
.pr100 {padding-right: 100px;}

 

無線技術情報ページのページ内リンク用クラス
ターゲットになるタイトルタグに追記ください。
https://www.circuitdesign.jp/technical/musen-s/
h2の「電波の分類」「電波の呼称」の2箇所に「class=”pagelink”」を
追記してみました。
.pagelink span {margin: -100px 0 0 0!important; padding: 100px 0 0 0!important;}

<h2 class=”pagelink”><span id=”link”>無線技術情報用のページ内リンクターゲット</span></h2>

上記以外のページ内リンクターゲット

<h2 class=”pagelink2″ id=”link2″>上記以外のページ内リンクターゲット</h2>

 

レスポンシブした時にtableを横スクロールさせる
<div class=”spec_tbl”>
<table class=”tbl1″>
<tbody>
・・・・
・・・・
・・・・
</tbody>
</table>
</div>

THTHTHTHTHTH
TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。
TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。TD : テキストが入ります。

 

画像横並びのスタイル
クラス:clm03 を追加しました。
clm03の中の aタグ(またはdivタグ)を横に3個づつ均等に配置します。
3個以上は下段に追加されていきます。
レスポンシブすると窮屈になるので、横に2個づつ配置に切り替わります。
なお、クラス:clm02 も追加しました。
こちらは常時横に2個づつ配置用のCSSです。

3個づつ均等配置
<div class=”clm03″>
<div>・・・</div>
<div>・・・</div>
<div>・・・</div>
</div>

2個づつ均等配置
<div class=”clm02″>
<div>・・・</div>
<div>・・・</div>
<div>・・・</div>
</div>

3個づつ均等配置

 

2個づつ均等配置