ホームページ制作に少し便利なCSSテクニック
投稿日：2020.03.03.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
ホームページ制作に役立つ少し便利な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;
}
