CSS追加設定記録01【自分用】
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;
}
.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>
<code class="">
そのまま表示したいHTMLなどをここに書き込む
</code>
</pre>
という具合に、codeの方へCSSで決めたフォントを指定することで簡単に思い通りのフォントに変更出来る。
<pre> <code> このフォントの種類は等幅? </code> </pre> |
<pre> <code class="normal_font"> このフォントの種類は等幅? </code> </pre> |
このフォントの種類は等幅? |
このフォントの種類は等幅?
|
- 関連記事
-
-
CSS追加設定記録01【自分用】 2013/09/13
-
CSS追加設定記録02【自分用】 2014/05/20
-
table設定、このブログ用CSS 2015/01/22
-
ミニミニタイトル、空白【自分用】 2015/01/25
-
CSS追加設定記録04【このブログ用】 2015/05/16
-
コメントの投稿