知っておくと便利な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サービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

工藤

執筆者: 工藤

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