でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

2014.05.20 [火]

CSSに新しい設定を追加

　したので、まとめておく。

枠線

.wakudott {
	　margin:1em;
	　padding:0.5em 1em;
	　border:1px dotted #cccccc;
	}

.wakudash {
	　margin:1em;
	　padding:0.5em 1em;
	　border:1px dashed #cccccc;
	}

.wakusolid {
	　margin:1em;
	　padding:0.5em 1em;
	　border:1px solid #cccccc;
	}

.wakudashusuku {
	 margin:5px auto;
	 padding:1em;
	 border:1px dashed #cccccc;
	 color:#8e8e8e;
	 font-size:85%;
	 line-height:1.6em;
	 }

.sirowaku {
	 margin:0em;
	 padding:0.5em 1em;
	 border:0px solid #ffffff;
	 }

　.sirowakuだけは枠に線が無いし、上下にも空きが無いが、boxとして囲って左右の幅を1em内側に詰めている。
　ミニタイトルなどを設置した後の文章に設定することで、タイトルよりもわずかに狭い幅で文章全体を設置することができる。

揃え

.mannaka {
text-align:center;
margin:0px auto;
}

※preとセンター揃えを併用する場合、コード内を見やすくタブやスペースでインデントした状態だと、位置がずれる。タブやスペースは消すこと。

.migi { text-align:right;}

.hidari { text-align:left;}

.semai {
　width:400px;
　margin:0px auto;
}

.semaku {
　width:350px;
　margin:0px auto;
}

.saranisemaku {
 width:300px;
 margin:0px auto;
}

.sonomama {
 white-space:pre;
 line-height:1.2em;
}

※preはnormal（枠の端で折り返す）設定にしてあるので、改行も非改行もスペースも全てそのまま表示させたい時にはこれを使う。

※2015年02月26日追記
　.sonomama に line-height:1.2em; を追加。
　アスキーアート（AA）を崩さずに表示させるために追加。
　上記コード表示にも使用されている。
　ライン間が狭くなって1.2emがコード表示にもちょうどいいかもしれない。

フォントカラー指定

.ATcolor,
.pink { color:#ff66cc; }

.ATfont,
.ookimepink {
　color:#ff66cc;
　font-size:120%;
}

.usuku {
　color:#8e8e8e;
　font-size:85%;
　line-height:1.4em;
}

.usuku2 {
　color: #8e8e8e;
　font-size: 85%;
　line-height: 1.2em;
}

.usuji {
　color:#cccccc;
　font-size:85%;
　line-height:1.4em;
}

.usuji2 {
　color: #ccc;
　font-size: 85%;
　line-height: 1.2em;
}

.usuku3 {
　color: #aaaaaa;
　font-size: 85%;
　line-height: 1.2em;
}

.comme {
　padding-left: 1em;
　color: #aaa;
　text-indent: -1em;
　font-size: 85%;
　line-height: 1.4em;
}

フォントサイズ指定

.fontsize50 {font-size:50%;line-height:1.4em;}

.fontsize60 {font-size:60%;line-height:1.4em;}

.fontsize70 {font-size:70%;line-height:1.4em;}

.fontsize80 {font-size:80%;line-height:1.4em;}

.fontsize90 {font-size:90%;}

.fontsize100 {font-size:100%;}

.fontsize120 {font-size:120%;}

.fontsize140 {font-size:140%;}

.fontsize160 {font-size:160%;}

.fontsize180 {font-size:180%;}

.fontsize200 {font-size:200%;}

.fontsize220 {font-size:220%;}

.fontsize240 {font-size:240%;}

.fontsize260 {font-size:260%;}

.fontsize280 {font-size:280%;}

.fontsize300 {font-size:300%;}

.ookiku120 { font-size: 120%;}

.ookiku140 { font-size: 140%;}

.ookiku160 { font-size: 160%;}

.ookiku180 { font-size: 180%;}

.newookime { font-size:110%;line-height:1.5em;}

.ookiku { font-size: 120%;}

.ookime { font-size: 160%;}

.tiisame { font-size:85%;line-height:1.4em;}

.tiisaku { color:#8e8e8e;font-size:80%;line-height:1.4em;}

フォント指定（追加）

.meiryo {
font-family:
'Meiryo','Osaka',sans-serif;
}

背景カラー指定（主に文字用）

.haikeipinku0 {background-color: #ffe8e8;}

.haikeiao0 {background-color: #d6f0ff;}

.haikeikiiro0 {background-color: #fffec4;}

.haikeipinku {
　background-color:#ffe8e8;
　margin:0px 5px;
　padding:0px 5px;
　border:1px solid #ffbcbc;
}

.haikeiao {
　background-color:#d6f0ff;
　margin:0px 5px;
　padding:0px 5px;
　border:1px solid #00a5ff;
}

.haikeikiiro {
　background-color:#fffec4;
　margin:0px 5px;
　padding:0px 5px;
　border:1px solid #efeb00;
}

ミニタイトル

　↑これのこと。

.minititle {
　text-align:left;
　border-left:15px solid #02a8da;
　border-bottom:1px solid #02a8da;
　font-size:140%;
　margin:1em 0px;
　padding:5px 10px !important;
　color:#999999;
}

h2　ミニタイトル

.entry_body h2 {
 text-align:left;
 border-left:15px solid #0099f2;
 border-bottom:1px solid #0099f2;
 font-size:140%;
 margin:1em 0px;
 padding:5px 10px !important;
 color:#999999;
}

この記事をシェア X でポスト Facebook はてブ LINE Bluesky

関連記事