ついにCSS2.1が「かんこく」へ
CSS3.0がグイグイきているこの時期にようやく勧告だなんて、
転校生というもの珍しさからチヤホヤされていた少年が、
新しい転校生が来たもんだから、だんだん影が薄くなってきたために
アリを食べる的な無茶をしちゃうようなものです。
ん〜なんか違うか・・・
CSS 2.1仕様が「勧告」ステージに
転校生というもの珍しさからチヤホヤされていた少年が、
新しい転校生が来たもんだから、だんだん影が薄くなってきたために
アリを食べる的な無茶をしちゃうようなものです。
ん〜なんか違うか・・・
CSS 2.1仕様が「勧告」ステージに
文字を自動に横移動させる方法
第２回 サトリヒロシのCSS講座
今回は文字を自動に横移動させる方法です。
PC上で文字を自動で横移動させる場合
文字を<marquee>というタグを使うだけで簡単に移動させることが出来ます。
例１
こんなに簡単なのにこの機能はPC上ではあまりみかけませんよね？
その理由は
文字を止める方法がない
そのためユーザビリティの面で問題があります（詳細は省略）。それを嫌って使われないのです。
しかし、このタグを使うメリットが大きいものがあります。それは携帯電話です。
携帯は画面が小さく、長い文章は勝手に改行されてします。
そのため、marqueeタグをうまく利用すれば、ある程度長い文章を1行に入れることができるのです。
嫌われ者のmarqueeタグが活躍できる場所があってよかった！
と、思いきや
なんと、docomo、au、SoftBankでそれぞれ動きが違ったり、ましてや動かないなんてことがあります。
しかし、それを解消する方法があります！それは、
display:-wap-marquee;です。
ここでようやくCSS講座になりました（笑）
これを移動したい文字に追加するとmarqueeタグと同じ動きします。
例２
<span style="display:-wap-marquee;">文字が横に移動する</span>
あれ？動いてないぞ！どうなってるんだ！？
その理由は、このCSSは携帯専用のCSSなんです。そのため、PC上では動きません。
確認したい方はお手数ですが携帯からご覧ください。
ただし、これだけだと1回しか動かなかったりするので
-wap-marquee-loop:infinite;なんて書いたりもするんですが、長くなるので詳細は後日書きます。
以上で第２回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ！
次回は、憎きInternetExplorer6をやっつける！です。
今回は文字を自動に横移動させる方法です。
PC上で文字を自動で横移動させる場合
文字を<marquee>というタグを使うだけで簡単に移動させることが出来ます。
例１
こんなに簡単なのにこの機能はPC上ではあまりみかけませんよね？
その理由は
文字を止める方法がない
そのためユーザビリティの面で問題があります（詳細は省略）。それを嫌って使われないのです。
しかし、このタグを使うメリットが大きいものがあります。それは携帯電話です。
携帯は画面が小さく、長い文章は勝手に改行されてします。
そのため、marqueeタグをうまく利用すれば、ある程度長い文章を1行に入れることができるのです。
嫌われ者のmarqueeタグが活躍できる場所があってよかった！
と、思いきや
なんと、docomo、au、SoftBankでそれぞれ動きが違ったり、ましてや動かないなんてことがあります。
しかし、それを解消する方法があります！それは、
display:-wap-marquee;です。
ここでようやくCSS講座になりました（笑）
これを移動したい文字に追加するとmarqueeタグと同じ動きします。
例２
<span style="display:-wap-marquee;">文字が横に移動する</span>
あれ？動いてないぞ！どうなってるんだ！？
その理由は、このCSSは携帯専用のCSSなんです。そのため、PC上では動きません。
確認したい方はお手数ですが携帯からご覧ください。
ただし、これだけだと1回しか動かなかったりするので
-wap-marquee-loop:infinite;なんて書いたりもするんですが、長くなるので詳細は後日書きます。
以上で第２回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ！
次回は、憎きInternetExplorer6をやっつける！です。
CSSで行間を空ける方法
第１回 サトリヒロシのCSS講座
今回はCSSで行間を空ける方法です。
やり方は簡単！
行間を空けたい箇所に
line-height:XXem;（XXには数値を入れる）
と指定するだけです。
例
<span style="line-height:1em;">指定なし</span>
<span style="line-height:1em;">指定なし</span>
<span style="line-height:2em;">指定あり</span>
<span style="line-height:2em;">指定あり</span>
このブログはもともとline-heightが指定してあるので
普通の記事ではきちんとノートの罫線に沿って文字が並びますが
line-height:1emと書くことで指定してある行間をなくすことができます。
そもそもline-heightとは行の高さを指定するものなのです。
つまり、line-heightで指定した値から文字の大きさを引いた値が上下均等に行間として割り振られるのです。
なのでline-height:1emと指定すると、
line-height:1em − 文字の大きさ:1em ＝ ０em
になるため、行間がなくなったというわけです。
もちろんｅｍの部分はｐｘや％などでも問題ありません。
これで。読みやすい文章が作れるようになりましたね！
以上で第1回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ！
次回は文字を自動に横移動させる方法です。
今回はCSSで行間を空ける方法です。
やり方は簡単！
行間を空けたい箇所に
line-height:XXem;（XXには数値を入れる）
と指定するだけです。
例
<span style="line-height:1em;">指定なし</span>
<span style="line-height:1em;">指定なし</span>
<span style="line-height:2em;">指定あり</span>
<span style="line-height:2em;">指定あり</span>
このブログはもともとline-heightが指定してあるので
普通の記事ではきちんとノートの罫線に沿って文字が並びますが
line-height:1emと書くことで指定してある行間をなくすことができます。
そもそもline-heightとは行の高さを指定するものなのです。
つまり、line-heightで指定した値から文字の大きさを引いた値が上下均等に行間として割り振られるのです。
なのでline-height:1emと指定すると、
line-height:1em − 文字の大きさ:1em ＝ ０em
になるため、行間がなくなったというわけです。
もちろんｅｍの部分はｐｘや％などでも問題ありません。
これで。読みやすい文章が作れるようになりましたね！
以上で第1回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ！
次回は文字を自動に横移動させる方法です。
