ホームページ制作に少し便利なCSSテクニック

ホームページ制作に役立つ少し便利なCSS3プロパティを使った実装テクニックを紹介します。

高さが無くても要素を中央に配置する方法

親要素に高さがなく、子要素を中央に配置したい時に便利な方法です。
少しのCSS記述で実装できるため、非常に使いやすい方法です。

.con-box{
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

ドラッグ操作を無効化するする方法

テキストや画像をコピーされたくない場合に使える方法ですが、完璧なコピー防止にはなりません。気休め程度になります。

/* テキストのドラッグ防止 */
p {
    user-select: none;
}
/*  画像のドラッグ操作無効 (Webkit系統のみになります) */
img {
    -webkit-user-drag: none;
}

内容が空の場合に要素を表示させない

CMSを利用していると入力項目が空の場合に、中身が空の要素が生成されることがあります。そんな時につかえる方法です。

.con-box {
  /* 通常時のスタイル */
}
 
.con-box:empty {
  display: none;
}