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

  • はてブ

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

バックナンバー



テキストが空の場合、要素を表示させない

img01
テキストがないときにpaddingだけが残って中途半端に表示されてしまう、なんてことがあったりします。
こういう時はCMSで生成されたりしていることが多いので、phpで処理するのが1番よいかとは思いますがそれが難しいときはcssでも対応できます。

DEMO

HTML


CSS


このように:emptyに対してdisplay: none;を指定することで、テキストがないときにはclass=”tag”の要素を表示させない、ということができます。


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



親要素の幅や高さが可変な時に上下中央に要素を置きたい

img02
要素の幅や高さが可変な時に、上下中央揃えて表示させる方法をご紹介します。
メインビジュアルのテキスト配置などに便利です。

DEMO

HTML


CSS



とりあえず親要素にposition: relative;をしてい、上下中央に配置したいしたい子要素にposition: absolute;を指定します。

そのあとは子要素に対しての指定です。まずはtop: 50%; left: 50%;を指定します。
その次はX軸、Y軸の基準で指定できるtransformを使用します。いずれも50%;の値を指定します。

これで子要素を上下中央に揃えることができます。


工藤

執筆者: 工藤

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

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

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

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

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

お問い合わせ