CSS3で今使えそうなタグ

Pocket

CSS3やらHTML5やらで、これから覚える事がいっぱいのWEBデザイナー業界ですね。

まだ先だと思っていても、もうすでに実装している所も多く、Web-kit系では実用性もかなり高いです。

スマートフォンサイトを作るなら、覚えていなきゃ話にならないんじゃないかというところまで来ています。

そんな中、自分もちょくちょく勉強しはじめてはいるのですが、なかなか使う機会も無いのでメモ程度にここに書き記していこうと思いますw

ブラウザも考えて今使っても大丈夫なタグ

ブラウザ間での表示も考えるとどうしても手が出にくい環境ではあるのですが、近年はIE6等は見なかったものとしてサイト制作に励んでいる方も多いのでは?と思い、以下にそういう方ならどんどん使える物をリストアップしてみました。

img[src =”./img/”] {
}
属性値の始まりが一致した場合
要素「img」属性名「src」開始文字列「./img/」に対してのスタイルを指定できます。 対応ブラウザ:「IE7以降」「firefox2.0以降」「chrome4.1以降」「safari3.2以降」「opear9.5以降」
img[src$=”.jpg”] {
}
属性値の終わりが一致した場合
要素「img」属性名「src」終了文字列「.jpg」に対してのスタイルを指定できます。 対応ブラウザ:「IE7以降」「firefox2.0以降」「chrome4.1以降」「safari3.2以降」「opear9.5以降」
img[title*=”numb”] {
}
属性値の一部に含まれる文字が一致した場合
要素「img」属性名「title」含まれる文字「numb」があった場合のスタイルを指定できます。 対応ブラウザ:「IE7以降」「firefox2.0以降」「chrome4.1以降」「safari3.2以降」「opear9.5以降」
word-wrap:break-word
word-wrap:normal
英単語の途中でも行を折り返す
英単語やURLの途中でも行を折り返す(break-word)、折り返さない(normal)を指定できる。 対応ブラウザ:「IE6以降」「firefox3.6以降」「chrome4.1以降」「safari3.2以降」「opear10.5以降」

と、これくらいは今使ってもいいんじゃないかなと個人的には思いましたw

僕も、これからどんどん勉強して行くのでメモ&検証しながら頑張っていこうと思います!

Pocket

Comments