見出しの設定では、本文内では<h2>〜<h4>までを用意しています。
コーディングルールについて
本ページでは、執筆系コンテンツで導入しているコーディングルールについての解説を行います。
見出しについて
各コンテンツの余白感について
下記のコンテンツには、margin-topに1em（１文字）分の余白を開ける設定をしています。
div, p, ul, table, dl
また、上記の次に来る見出しには、下記のmargin-topを割り振っています。
上にあるタグ + h2{margin-top: 60px;}
上にあるタグ + h3{margin-top: 50px;}
上にあるタグ + h4{margin-top: 90px;}
個別設定のmargin、paddingについて
margin、paddingは上下左右、marginのみ左右autoを用意しています。
.ma{margin: 0 auto;}
# margin-top
.mt0{margin-top: 0px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
# margin-right
.mr0{margin-right: 0px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr60{margin-right: 60px;}
# margin-bottom
.mb0{margin-bottom: 0px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
# margin-left
.ml0{margin-left: 0px;}
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml60{margin-left: 60px;}
# padding-top
.pt0{padding-top: 0px;}
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pt60{padding-top: 60px;}
# padding-right
.pr0{padding-right: 0px;}
.pr10{padding-right: 10px;}
.pr20{padding-right: 20px;}
.pr30{padding-right: 30px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.pr60{padding-right: 60px;}
# padding-bottom
.pb0{padding-bottom: 0px;}
.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pb60{padding-bottom: 60px;}
# padding-left
.pl0{padding-left: 0px;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}
.pl50{padding-left: 50px;}
.pl60{padding-left: 60px;}
文字サイズについて
font-sizeは最小を10pxとし、最大30まで2px刻みで用意しています。
.size10{font-size: 10px;} .size12{font-size: 12px;} .size14{font-size: 14px;} .size16{font-size: 16px;}
.size18{font-size: 18px;} .size20{font-size: 20px;} .size22{font-size: 22px;} .size24{font-size: 24px;}
.size26{font-size: 26px;} .size28{font-size: 28px;} .size30{font-size: 30px;}
ul系リストの処理について
- あああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
ただし、下記のコードを入れた場合挙動が変わります。
<ul class="orange">〜〜〜
- あああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="glay">〜〜〜
- あああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="none">〜〜〜
- あああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="number">〜〜〜
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="number number-black">〜〜〜
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="number number-orange">〜〜〜
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="number number-mini">〜〜〜
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="number number-black number-mini">〜〜〜
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
<ul class="number number-orange number-mini">〜〜〜
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- いいいいいいいいいいいいいいい
- ううううううううううううううう
youtube系iframeについて
youtubeなどの埋込iframeは、下記のように必ず処理してください。理由はレスポンシブでの対応を行うためです。
<div class="youtube">
<iframe src="〜〜〜"></iframe>
</div>
詳しくはこちら → https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c
画像の処理について
縦並びで画像を配置する際は、classで余白を設けるか、<p>で囲ってください。
左右にフロートさせる場合は、下記のレイアウトを心がけてください。
<div class="col_img">
<img src="〜〜" width="◯◯" class="△△">
<div>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
※画像の幅は必ずimg内で設定をしてください。
※画像のフロートは、<img>内にclassで設定してください。（class="right"、class="left"）
例
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="col_img">
<img src="/wp-content/uploads/2018/09/test.jpg" width="300" class="left">
<div>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<div class="col_img">
<img src="/wp-content/uploads/2018/09/test.jpg" width="300" class="right">
<div>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
テーブルについて
<table>での横幅を制御する場合、html上に直接記載をしてください。
| あああ | あああ |
|---|
<table width="100%">
| あああ | あああ |
|---|
また、下記のclassを設定した場合、スマホ閲覧時は1カラムで表示がされます。
<table class="_1colum_">
| あああ | あああ |
|---|
文字装飾について
文字の装飾は下記のclassを用意しています。
<mark>薄黄色の背景</mark> = 薄黄色の背景
<b class="red">赤色</b> = 赤色
<b class="blue">青色</b> = 青色
<b class="green">緑色</b> = 緑色
<b class="orange">オレンジ色</b> = オレンジ色
文字の位置は下記のclassです。
<p class="left">左寄せ</p>
左寄せ
<p class="center">中央寄せ</p>
中央寄せ
<p class="right">右寄せ</p>
右寄せ
カラムについて
原則として<div>で作成してください。2カラムから最大8カラムまで用意しています。
余白やボーダーなどの設定については、下記をご確認ください。
<div class="column _2_"> #2カラム
1
2
<div class="column _2_ space border"> #2カラム
※spaceでカラム間の余白を10px、borderで枠線
1
2
<div class="column _3_"> #3カラム
1
2
3
<div class="column _4_"> #4カラム
1
2
3
4
<div class="column _5_"> #5カラム
1
2
3
4
5
<div class="column _6_"> #6カラム
1
2
3
4
5
6
<div class="column _7_"> #7カラム
1
2
3
4
5
6
7
<div class="column _8_"> #8カラム
1
2
3
4
5
6
7
8
スマホのみ縦一列にする場合、class=”_1colum_”を設定してください。
<div class="column _8_ _1colum_">
1
2
3
4
5
6
7
8
