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

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

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

2015.05.16 [土]

CSS追加設定記録04【このブログ用】

基本的にこのブログ用のもの

　現在CSSに書き込んでいるものをそのままコピペしておく。

classで指定するlist-style-type

.entry_body ul li { margin: 1em;list-style: disc outside;line-height: 1.6em;}
.entry_body ol li { margin: 1em;list-style: decimal outside; line-height: 1.6em;}

.entry_body ul.circle li {padding-left: 1ex;list-style-type: circle;}

.entry_body ul.nomark li,
.entry_body ol.nomark li {padding-left: 1ex;list-style-type: none;}

classで指定する枠線borderと、padding設定

.wakudott0 {border:1px dotted #ccc;}
.wakudash0 {border:1px dashed #ccc;}
.wakusolid0 {border:1px solid #ccc;}

.wakudott {margin:1em;padding:0.5em 1em;border:1px dotted #ccc;}
.wakudash {margin:1em;padding:0.5em 1em;border:1px dashed #ccc;}
.wakusolid {margin:1em;padding:0.5em 1em;border:1px solid #ccc;}

.wakudott2 {margin:1em 0;padding:0 1em;border:1px dotted #ccc;}
.wakudash2 {margin:1em 0;padding:0 1em;border:1px dashed #ccc;}
.wakusolid2 {margin:1em 0;padding:0 1em;border:1px solid #ccc;}

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

.wakudott3 {margin:1em 0;border:1px dotted #ccc;}
.wakudash3 {margin:1em 0;border:1px dashed #ccc;}
.wakusolid3 {margin:1em 0;border:1px solid #ccc;}

.wakudott4 {margin:1em 0;border:3px dotted #ddd;}
.wakudash4 {margin:1em 0;border:3px dashed #ddd;}
.wakusolid4 {margin:1em 0;border:3px solid #ddd;}

.wakudott5 {margin:1em;padding:1em;border:1px dotted #ccc;}
.wakudash5 {margin:1em;padding:1em;border:1px dashed #ccc;}
.wakusolid5 {margin:1em;padding:1em;border:1px solid #ccc;}

.wakudott6 {margin:1em 0;padding:1em;border:1px dotted #ccc;}
.wakudash6 {margin:1em 0;padding:1em;border:1px dashed #ccc;}
.wakusolid6 {margin:1em 0;padding:1em;border:1px solid #ccc;}

.wakudott7 {margin:1em 0;padding:1em;border:3px dotted #ddd;}
.wakudash7 {margin:1em 0;padding:1em;border:3px dashed #ddd;}
.wakusolid7 {margin:1em 0;padding:1em;border:3px solid #ddd;}

.wakudott8 {margin:1em 0;padding:1em;border:6px dotted #ddd;}
.wakudash8 {margin:1em 0;padding:1em;border:6px dashed #ddd;}
.wakusolid8 {margin:1em 0;padding:1em;border:6px solid #ddd;}

.wakudott9 {padding:1em; border:6px dotted #ddd;}
.wakudash9 {padding:1em; border:6px dashed #ddd;}
.wakusolid9 {padding:1em; border:6px solid #ddd;}

.wakudott10 {padding:1em; border:1px dotted #ccc;}
.wakudash10 {padding:1em; border:1px dashed #ccc;}
.wakusolid10 {padding:1em; border:1px solid #ccc;}

字下げ

.jisage p,
.indent p {text-indent: 1em;}


幅指定

.w5em {width:5em;}


classで指定するpadding設定

.semai {margin:0 auto;width:400px;}
.semaku {margin:0 auto;width:350px;}
.saranisemaku {margin:0 auto;width:300px;}

.wakunasi {padding:0;}
.sirowaku {padding:0 1em;}

.wakunasi2 {padding:0 0 2em;}
.sirowaku2 {padding:0 1em 2em;}
.semai2 {padding:0 2em 2em;}
.semaku2 {padding:0 3em 2em;}
.yorisemaku2 {padding:0 4em 2em;}
.saranisemaku2 {padding: 0 5em 2em;}

.sirowaku3 {padding:0 1em;}
.semai3 {padding:0 2em;}
.semaku3 {padding:0 3em;}
.yorisemaku3 {padding:0 4em;}
.saranisemaku3 {padding: 0 5em;}

.sirowaku4 {padding:1em;}
.semai4 {padding:2em;}
.semaku4 {padding:3em;}
.yorisemaku4 {padding:4em;}
.saranisemaku4 {padding:5em;}

.wakunasi5 {padding:0 0 1em;}
.sirowaku5 {padding:0 1em 1em;}
.semai5 {padding:0 2em 1em;}
.semaku5 {padding:0 3em 1em;}
.yorisemaku5 {padding:0 4em 1em;}
.saranisemaku5 {padding: 0 5em 1em;}

.yokowaku5px {padding:0 5px;}
.yokowaku10px {padding:0 10px;}

記事作成日：2015年05月16日(土)  |  カテゴリ：このブログ用CSS  | Comment : 0
2015.01.25 [日]

ミニミニタイトル、空白【自分用】

←これミニミニタイトル

　大きな段落ではなく、小さな段落やタイトルに使う。
.miniminititle,
.entry_body h4 {
　 font-family: Meiryo, sans-serif;
　 text-align:left;
　 line-height:1.4em;
　 border-left:7px solid #dddddd;
　 border-bottom:1px solid #dddddd;
　 font-size:120%;
　 margin:1em 0px 0.5em;
　 padding:2px 5px !important;
　 color:#999999;
}

　▶▶　クリックして続きを読む　◀◀　

記事作成日：2015年01月25日(日)  |  カテゴリ：このブログ用CSS  | Comment : 0
2015.01.22 [木]

table設定、このブログ用CSS

table、CSSのコピペ

　必要なtableをclassで設定している。
　少しずつ増えてるので、自分でわかりやすいようにこちらにまとめて置いておく。
<table>
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb01">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb02">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb03">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb04">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb05">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb06">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb07">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb08">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb09">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb10">
"Table" TH"Table" TH
"Table" TD"Table" TD
<table class="tb11">
"Table" TH"Table" TH
"Table" TD"Table" TD
記事作成日：2015年01月22日(木)  |  カテゴリ：このブログ用CSS  | Comment : 0
2014.05.20 [火]

CSS追加設定記録02【自分用】

CSSに新しい設定を追加

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


　▶▶　クリックして続きを読む　◀◀　

記事作成日：2014年05月20日(火)  |  カテゴリ：このブログ用CSS  | Comment : 0
2013.09.13 [金]

CSS追加設定記録01【自分用】

hr　　<p class=""></div>

.hrcolor02 {
　　 border-top: 5px dashed #000000;
　　 background-color: #ffd700;
　　 border-bottom: 5px solid #eeeeee;
}


  • 罫線本体はtopで、太さ5px、破線、黒色（#000000）
  • 背景色に、黄色（#ffd700）
  • 罫線bottomに、太さ5px、直線、色は（#eeeeee）

pre,code,font-family

【font-family: monospace;】

.hrcolor02 {
　background-color: #ffff00;
　border-top: 5px dashed #000000;
　border-bottom: 5px solid #eeeeee;
}

【font-family: sans-serif;】

.hrcolor02 {
　background-color: #ffff00;
　border-top: 5px dashed #000000;
　border-bottom: 5px solid #eeeeee;
}

【font-family: serif;】

.hrcolor02 {
　background-color: #ffff00;
　border-top: 5px dashed #000000;
　border-bottom: 5px solid #eeeeee;
}


「monospace」よりも、「meiryoUI」か、「メイリオ」がやっぱり好きなんだなー。

【font-family: 'Meiryo UI','Osaka', sans-serif;】

.hrcolor02 {
　background-color: #ffff00;
　border-top: 5px dashed #000000;
　border-bottom: 5px solid #eeeeee;
}

あるいは「Segoe UI」か、「Segoe」が好きだな。

【font-family: 'Segoe UI','Segoe', monospace;】

.hrcolor02 {
　background-color: #ffff00;
　border-top: 5px dashed #000000;
　border-bottom: 5px solid #eeeeee;
}

背景色の指定（枠有り・枠無し）

.ivory0 {background-color: #fffff0;}

.mintcream0 {background-color: #f5fffa;}

.ghostwhite0 {background-color: #f8f8ff;}

.whitesmoke0 {background-color: #f5f5f5;}

.snow0 {background-color: #fffafa;}

.cornsilk0 {background-color: #fff8dc;}

.pinkwhite0 {background-color: #fef9fb;}

.flamingopink0 {background-color: #f5b2ac;}

.flesh0 {background-color: #fad09e;}

.jaunebrillant0 {background-color: #ffdc00;}

.babyblue0 {background-color: #bbe2f1;}

.haiiro0 {background-color: #f5f5f5;}



※ダークカラー化に伴い、background-colorは全て「#111」へ変更しました。2022年7月



background-color　<div class=""></div>

.ivory {
　margin: 5px;
　padding: 10px;
　background-color: #fffff0;
　border: 1px dashed #cccccc;
}

.mintcream {
　margin: 5px;
　padding: 10px;
　background-color: #f5fffa;
}

.ghostwhite {
　margin: 5px;
　padding: 10px;
　background-color: #f8f8ff;
　border: 1px dashed #cccccc;
}

.whitesmoke {
　margin: 5px;
　padding: 10px;
　background-color: #f5f5f5;
}

.snow {
　margin: 5px;
　padding: 10px;
　background-color: #fffafa;
　border: 1px dashed #cccccc;
}

.cornsilk {
　margin: 5px;
　padding: 10px;
　background-color: #fff8dc;
}

背景の白色と判別がしにくい薄い色には、

「border: 1px dashed #cccccc」

を付けた。


※2014年5月7日(水)追記

.pinkwhite {
　margin: 0px;
　padding: 20px;
　background-color: #fef9fb;
　border: 1px dashed #cccccc;
}

.flamingopink {
　margin: 0px;
　padding: 20px;
　background-color: #f5b2ac;
　border: 1px dashed #cccccc;
}

.flesh {
　margin: 0px;
　padding: 20px;
　background-color: #fad09e;
　border: 1px dashed #cccccc;
}

.jaunebrillant {
　margin: 0px;
　padding: 20px;
　background-color: #ffdc00;
　border: 1px dashed #cccccc;
}

.babyblue {
　margin: 0px;
　padding: 20px;
　background-color: #bbe2f1;
　border: 1px dashed #cccccc;
}

※2014年05月20日追記：背景の色はwhitesmokeだが、marginとpaddingが違う。

.haiiro {
　margin:5px;
　padding:10px;
　background-color:#f5f5f5;
　border:none;
}

.white {
background-color: #ffffff;
}

フォント指定　<div class=""></div>

.mono { font-family: monospace;}

.sans { font-family: sans-serif;}

.serif { font-family: serif;}

※2014年05月20日変更

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

.SegoeUI { font-family: 'Segoe UI','Segoe', monospace;}

※2014年05月20日追記

.meiryo { font-family: 'Meiryo','Osaka', sans-serif;}
  • CSSで指定しておくことで使いやすく。
  • ここにこうして書いておくことで、いつでも簡単に見て思い出せるように。
  • こうやって手間を掛けて使っておくことで、より強く記憶に残せるだろう効果を期待して。

<pre></pre>と、<code></code>内の記述は基本的に「等幅フォント」になるので、

　<pre>
　　<code class="">
　　　そのまま表示したいHTMLなどをここに書き込む
　　</code>
　</pre>


という具合に、codeの方へCSSで決めたフォントを指定することで簡単に思い通りのフォントに変更出来る。


<pre>
　<code>
　　このフォントの種類は等幅？
　</code>
</pre> 
<pre>
 　<code class="normal_font">
 　　このフォントの種類は等幅？
 　</code>
 </pre>
このフォントの種類は等幅？ このフォントの種類は等幅？

記事作成日：2013年09月13日(金)  |  カテゴリ：このブログ用CSS  | Comment : 0

 | HOME | 

©2012 でん⚡きかいでん
Design by 七月亭