でんきかいでんのブログ

電子工作、ミシン、ペンタブレット、で使える、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。こだわり系テンキーレス有線キーボードの使用感レビューなど。

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

2018.01.21 [日]

色の数値表(白黒系のみ)

HTML・CSSで色を表現したい時に16進数(#00FF00など)を使うが、


最近では透過表現もできるようになり、そういう場合はRGB数値 rgba(255,255,255,0.8)が必要になった。


ので、白黒だけだが、わかりやすい一覧表を置いとく。


%表示はPhotoshopスウォッチ上でのグレー%だ。



ColorNumber001.png

この画像はPNGで保存してUPしてあるので、スポイトで抽出しても同じ色のはず。


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.04.04 [土]

CSS text-align:justify;

justifyというのを使ったことが

 なかったので試しに使ってみることにしました。
 
 春の今日を、こうしたいくらがすべてに忘れだけ、今上にそれだけほか何三一時間でしでもの人々から、あなたかいうだ払底にしませ次第はいくら黙っせことですて、かつてこう兄になくて、その訳をはおりのに必要だろ詳しく蒙りですで。けれどもざっとほか一五十個がししもはあるたという正直ん吹聴で経っば、家来よりどんなためそのうちにあっでしまうたので。ちゃんとに文学で働やっまし十四時間今にいるて、私かしないて切らたというのを全くすれたのだから、はたして向くのの自由でしば、余計萍が存じてなりて来るたませ。主義があると打ち壊さて私かないのをあろようにあるしもしましでから、また仕方は好いものをいるて、私から見識に推しいるて二日と二年は二年はそんなに申し上げるつつおきでもます事でしょ。昨日るでしか認め文学に伴って、その道徳は軽快やかましくっ同等よろしかろと好いたらのですはならですで、ない他のためにきませモーニングませなっと心得からいるまし気うあり。及びそれは自由ですがしませ訳ですも悪い、自由自在たて知れまし方なかろと存じがだれの否の気のその自己が説明しといるならたら。

 上下のテキストは 【すぐ使えるダミーテキスト】 で生成。

 春の今日を、こうしたいくらがすべてに忘れだけ、今上にそれだけほか何三一時間でしでもの人々から、あなたかいうだ払底にしませ次第はいくら黙っせことですて、かつてこう兄になくて、その訳をはおりのに必要だろ詳しく蒙りですで。けれどもざっとほか一五十個がししもはあるたという正直ん吹聴で経っば、家来よりどんなためそのうちにあっでしまうたので。ちゃんとに文学で働やっまし十四時間今にいるて、私かしないて切らたというのを全くすれたのだから、はたして向くのの自由でしば、余計萍が存じてなりて来るたませ。主義があると打ち壊さて私かないのをあろようにあるしもしましでから、また仕方は好いものをいるて、私から見識に推しいるて二日と二年は二年はそんなに申し上げるつつおきでもます事でしょ。昨日るでしか認め文学に伴って、その道徳は軽快やかましくっ同等よろしかろと好いたらのですはならですで、ない他のためにきませモーニングませなっと心得からいるまし気うあり。及びそれは自由ですがしませ訳ですも悪い、自由自在たて知れまし方なかろと存じがだれの否の気のその自己が説明しといるならたら。

 なるほど、
 text-align:justify;
 を使うと、
 「本来改行する文字で改行はする」、
 「同じ文字数で改行する」、
 けれども
 「”その行によって最後に微妙な空間ができてしまう”のをなくす効果がある」
 のですね。


 知らなかった。


2015.02.13 [金]

word-break,word-wrap,white-space

単語・文字・文章の改行規則

 基本的に全て英語に対する指定であって、日本語に対して禁則を指定することはできない。
 日本語は単語の途中でも改行されて枠外に飛び出さないが、keep-all,pre,nowrap を指定した時だけは枠外に飛び出す。


word-break : ____ ;

枠内の改行方法の指定。

  • normal
    改行される。(デフォルト)
    (日本語は単語の途中であっても改行され、飛び出さない。)
    ただし長い英単語だと枠から飛び出す。
  • kepp-all
    1行が改行されず、枠外に飛び出す。
  • break-all
    枠内の改行は全て無視され、全て続けて表記されるが、単語の途中でも全て折り返されて枠外には飛び出さない。
  • loose
  • break-strict

word-wrap : ____ ;

 枠の中で単語が長すぎて収まらない場合、単語の途中でも改行するかどうかを指定する。
(どちらにせよ日本語は飛び出さない。)

  • normal
    単語が長くて収まり切らない場合、枠から飛び出す。(デフォルト)
  • break-word
    単語が長すぎて枠の端で収まらない時だけ、単語の途中で改行される。

white-space : ____ ;

 ソースコード中の改行、非改行規則の指定

  • normal
    連続した半角スペース、タブ、改行を、1つの半角スペースとして表示する。<br>は無視されるが、枠の端では自動改行される。
  • pre
    改行もスペースもソースコードに書かれたそのままを表示。<br>は使えるが、枠の端で自動改行はされず、1文が長ければ枠外へ飛び出す。
  • nowrap
    改行指定<br>は無視されて改行されず、1文が長ければ枠外へ飛び出す。
  • pre-wrap
    基本的にpre同様、半角スペース改行などソースコードがそのまま表示されるが、枠外へは飛び出さず、自動改行される。
  • pre-line
    基本的にnormal同様、連続した半角スペース、タブが1つの半角スペースとして表示され、枠の端で自動改行もされるが、<br>でも改行が可能。

2015.02.11 [水]

a:link { の順序

順番は重要だった

 今まで全然気にしてなかったんですが、実は並べる順番が重要でした。
 CSS内で、ちゃんとこう並べないとダメだったんです!
a:link { }
a:visited { }
a:hover { }
a:active { }

 ▼▼ 続きを読む ▼▼ 

2015.02.04 [水]

インライン要素ブロック要素

display:

  1. .dis-in { display:inline; background-color:#eeeeee; }
  2. .dis-bl { display:block; background-color:#eeeeee; }
  3. .dis-inb { display: inline-block; background-color:#eeeeee; }

 ▼▼ 続きを読む ▼▼ 

 | HOME |  OLD »