でんきかいでんのブログ

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

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

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; }

 ▼▼ 続きを読む ▼▼ 

2015.01.25 [日]

特定の行へジャンプするためのHTML

指定した行へジャンプするリンク

 「a name」で指定した場所へ、指定した行へジャンプする。

 同じページであればURLは不要。
 違うページなら「URL#名前」でその行へジャンプできる。
ジャンプ元 <a href="URL#名前"><⁄a>
ジャンプ先 <a name="名前"></a>

【例】

■ テスト01 : 下記の「テスト01」へ。

■ テスト02 : ▼続きを読む▼「テスト02」へ。

■ フォントカラー指定 : 別ページ「フォントカラー指定」へ。


テスト01


 ▼▼ 続きを読む ▼▼ 

2015.01.23 [金]

たまに使う特殊文字

ブログやHP上で見える化するために

 HTMLやCSSをウェブ上で ”文字で” 表示させようとしても、通常通りに書いたところで ”文字で” 表示させることはできません。

 むしろ知らずにブログ上に書いてしまうと、ページやサイト全体に影響が出てしまって、表示が全てメチャクチャになってしまうこともあります。(経験有り)

空白 &nbsp;
アンパサンド&&amp;
小なり<&lt;
大なり>&gt;
非常に小さい«&laquo;
非常に大きい»&raquo;
スラッシュ&frasl;
コピーライト©&copy;

 もっとたくさんありますが、自分がたまに使う特殊文字だけをここに表にしておきます。

 ※ 「<」 と 「>」 だけは <pre>< ⁄pre> <code><⁄code> を使っても自動的に読み込まれてしまうので、「&lt;」、「&gt;」 と、記述しないといけません。
 つまり、最低限この2つは知っておくべきだ、ということですね。

 ▼▼ 続きを読む ▼▼ 

2015.01.22 [木]

よく使うカラーコード

自分がよく使う色

 一般的なカラーコードは、検索すればいくつでも出てきますが、自分が一番よく使う重要なカラーコードは黒系の一番薄い色のいくつかです。

 ”font-color”とか、”background-color”に頻繁に使いますが、検索しても案外そういうカラーコードは出てきません。
 ので、ここに自分に必要なカラーコードの一覧表を作っておきます。

 ▼▼ 続きを読む ▼▼ 

2014.06.13 [金]

アイアンブルーっていい色だな



 「原色大辞典」という色辞典系のサイトが好きでよく利用してます。

 twitterで色の紹介も自動ツイートされてます。

アイアンブルーいい色ですね

 先ほど自動ツイートされていた

アイアンブルー


 という色がなかなか自分好みで気に入ったので、こうしてブログに残しておきます。


 カラーコードは、#192F60


 ですが、アイアンブルーはカラーネームではないのでカラーコードでないと使えません。



 同じカラーコードでも、このサイトでは


 日本の伝統色として「紺青」、

 世界の伝統色として「プルシャンブルー」、


と紹介されています。



 「原色辞典」内、「#192F60」検索結果ページ


 お気づきだとは思いますが、アイアンブルーは、この背景色です。

 ※カラーコードは大文字でも小文字でもどっちでも構いません。




 ▼▼ 続きを読む ▼▼ 

 | HOME |  OLD »

TOPへ