知っておくと便利なcssの小技 part13

  • はてブ

今回は知っておくと便利なcssの小技 part13です。

バックナンバー


テキストが空の時のみ、『content』でURLを取得し表示させる

blogimg
DEMO

リンクのテキストがHTML上で空の時に、contentでURLを取得して表示させてくれる方法です。
ベタでURLを貼るようなリンク集…などには使えると思います。

HTML


CSS



jsを仕込みそうなものですが、たったこれだけで完成です。
aタグの中のhrefがhttpで始まっている時、テキストが空だったらcontentでhrefの中を表示するという書き方ですね。
emptyってなかなか使う機会はなかったのですが結構便利です。


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


画像をcssのみで切り抜く

blogimg02
DEMO

CSSだけで画像を切り抜くことができます。とっても便利。
ただしIEは非対応なので気を付けてください…。

HTML


CSS



imgタグに対してobject-fit: coverプロパティを使用するととても簡単に切り抜きができます。
位置も調整することができます。


object-position: 左右の位置 上下の位置 で指定します。
今回の場合は右下端で写真が切り抜かれます。

IEが大丈夫だったらどんどん使っていきたいプロパティですね…。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ