スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

ついにCSS2.1が「かんこく」へ

CSS3.0がグイグイきているこの時期にようやく勧告だなんて、

転校生というもの珍しさからチヤホヤされていた少年が、
新しい転校生が来たもんだから、だんだん影が薄くなってきたために
アリを食べる的な無茶をしちゃうようなものです。

ん~なんか違うか・・・

CSS 2.1仕様が「勧告」ステージに


  
スポンサーサイト

テーマ : ITニュース
ジャンル : ニュース

文字を自動に横移動させる方法

第2回 サトリヒロシのCSS講座
今回は文字を自動に横移動させる方法です。
PC上で文字を自動で横移動させる場合
文字を<marquee>というタグを使うだけで簡単に移動させることが出来ます。

例1
<marquee>文字が横に移動する</marquee>

こんなに簡単なのにこの機能はPC上ではあまりみかけませんよね?
その理由は

文字を止める方法がない

そのためユーザビリティの面で問題があります(詳細は省略)。それを嫌って使われないのです。
しかし、このタグを使うメリットが大きいものがあります。それは携帯電話です。

携帯は画面が小さく、長い文章は勝手に改行されてします。
そのため、marqueeタグをうまく利用すれば、ある程度長い文章を1行に入れることができるのです。
嫌われ者のmarqueeタグが活躍できる場所があってよかった!

と、思いきや
なんと、docomo、au、SoftBankでそれぞれ動きが違ったり、ましてや動かないなんてことがあります。

しかし、それを解消する方法があります!それは、

display:-wap-marquee;です。

ここでようやくCSS講座になりました(笑)
これを移動したい文字に追加するとmarqueeタグと同じ動きします。

例2
<span style="display:-wap-marquee;">文字が横に移動する</span>

あれ?動いてないぞ!どうなってるんだ!?

その理由は、このCSSは携帯専用のCSSなんです。そのため、PC上では動きません。
確認したい方はお手数ですが携帯からご覧ください。
ただし、これだけだと1回しか動かなかったりするので
-wap-marquee-loop:infinite;なんて書いたりもするんですが、長くなるので詳細は後日書きます。

以上で第2回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ!

次回は、憎きInternetExplorer6をやっつける!です。



  

テーマ : WEBデザイン
ジャンル : コンピュータ

CSSで行間を空ける方法

第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 = 0em
になるため、行間がなくなったというわけです。
もちろんemの部分はpxや%などでも問題ありません。
これで。読みやすい文章が作れるようになりましたね!

以上で第1回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ!

次回は文字を自動に横移動させる方法です。



  

テーマ : WEBデザイン
ジャンル : コンピュータ

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。