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

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

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>
`このフォントの種類は等幅？`	`このフォントの種類は等幅？`