今回は知っておくと便利なcssの小技 part13です。
バックナンバー
テキストが空の時のみ、『content』でURLを取得し表示させる
DEMO
リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法です。
ベタでURLを貼るようなリンク集…などには使えると思います。
HTML
|
1 |
<p><a href="https://www.google.co.jp/" target="_blank"></a></p> |
CSS
|
1 2 3 |
a[href^="http"]:empty::before { content: attr(href); } |
jsを仕込みそうなものですが、たったこれだけで完成です。
aタグの中のhrefがhttpで始まっている時、テキストが空だったらcontentでhrefの中を表示するという書き方ですね。
emptyってなかなか使う機会はなかったのですが結構便利です。
画像をcssのみで切り抜く
DEMO
CSSだけで画像を切り抜くことができます。とっても便利。
ただしIEは非対応なので気を付けてください…。
HTML
|
1 |
<p class="clip"><img src="img01.jpg"></p> |
CSS
|
1 2 3 4 5 |
.clip img{ width: 150px; height: 150px; object-fit: cover; } |
imgタグに対してobject-fit: coverプロパティを使用するととても簡単に切り抜きができます。
位置も調整することができます。
|
1 2 3 |
#c02 .clip img{ object-position: 100% 100%; } |
object-position: 左右の位置 上下の位置 で指定します。
今回の場合は右下端で写真が切り抜かれます。
IEが大丈夫だったらどんどん使っていきたいプロパティですね…。
