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

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

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

2013.09.06 [金]

HTMLとCSS内にコメントを書くための記号

　HTML内にコメントを書く場合と、CSS内にコメントを書く場合、違う記号を使います。


  • HTMLの場合は、
    　<!-- ここにコメントを書く -->


  • CSSの場合は、
    　/* ここにコメントを書く */



　それぞれ内側には半角スペースを１つ空けましょう。

　
記事作成日：2013年09月06日(金)  |  カテゴリ：HTML・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
2013.09.14 [土]

地図の埋め込み簡単すぎワロタｗｗｗ


Google Maps を埋め込むのって簡単すぎですやん！


東京駅！！




    ■ まず最初に貼り付けたい場所をグーグルマップで開く。
  1. クリック！
  2. 「埋め込み地図のカスタマイズとプレビュー」をクリック！次、ポップアップ出てくる！



GoogleMaps003.gif



    ■　出てきたポップアップ！使いたい地図のサイズを選んで！
  1. 下のHTMLをクリック！
  2. Ctrl+A（全て選択）
  3. Ctrl+C（コピー）



GoogleMaps004.gif



■　あとは今コピーした地図を使いたいブログやHPに貼るだけ！
Ctrl+V（ペースト）




ね、簡単でしょ？ヽ(*´Д｀*)ﾉ



記事作成日：2013年09月14日(土)  |  カテゴリ：Google関連  | Comment : 0
2013.09.15 [日]

猫に液体のクスリを与える時に倒れないようにする簡単な方法

液体の薬を倒れにくくする方法

LiquidMedicine003A.jpg

猫を長年飼っておられる方は経験がお有りかと思います。

こういう容器に入った液体のお薬を動物病院でもらってきますよね。


簡単すぎて前置き長めですがｗｗｗ


おとなしい猫なら問題ないんですが、

普段おとなしい猫でも、

薬を飲ませようとすると


やべぇ！イヤなことされる！


って飲ませる直前になって暴れて逃げようとする猫も多いと思います。

そういう時に、この容器って倒れやすいんですよねー。


簡単に倒れにくくする方法ありますよー。

一目瞭然ですので、前置き長めでした。

(´Д人)ｺﾞﾒｿ


続きは　ウェブで！！　続きにありますのでどうぞ。

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

記事作成日：2013年09月15日(日)  |  カテゴリ：健康管理  | Comment : 0

 | HOME | 

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