ワンポイントCSS

2020年5月25日TECH BLOGWordPress

CSSを使ってしまったら記録するページ（随時更新）

基本はWordPressのブロックエディター類でなんとかするんだけど、不本意ながらどーしてもHTMLとCSSを直接記述したときはここにメモするようにします。

背景を平行四辺形で囲む

ページの中にアクセントをつけたいときなど。skewxで10度斜体をかけた長方形内に、逆方向に10度斜体をかけたテキストを入れ正体とする。

<div style="transform: skewX(10deg); text-align: center;font-size: 1em;color:#fff">ご案内</div>

transform:skewX(-10deg)
box-shadow: 0 0 10px gray
width:60%
max-width:400px
margin: auto

文章中に長方形バックの白抜き文字

本文中の文字列にデザイン処理が必要なときなど。フォームレイアウトの必須項目デザイン処理で使うことが多い。divぢゃなくspanでインライン要素化する。

<span class="shironuki">ご案内</span>

.shironuki{
 	font-size: 1em;
 	padding:5px;
 	background:#44617b;
 	color:#fff;
 	border-radius:2px;
 	margin-right:5px;
 	position:relative;
 	bottom:1px;
}

ホバーエフェクト

マウスオーバー時のホバーエフェクト。filter: drop-shadowを使ってるので画像のアルファチャンネルに対応する。ブラウザによって意図しない処理になるかも。

.ef {
	transition-duration: 0.5s;
}
.ef img{
	width: 100%;
	cursor: pointer;
}
.ef:hover{
	filter: drop-shadow(10px 10px 10px grey);
	transform: translateY(-10px);
	transition-duration: 0.5s;
}

分離したテーブル

価格表など。

ライトプラン	ボトルプラン	飲放題プラン
1,000円	2,000円	3,000円

.table-1 table{
  border-collapse:separate;
  border-spacing: 10px;
}

横スクロールのテーブル

スマホの可読性を考えた場合の処理の一例。macOSでの挙動とかで好き嫌いが分かれる表現？::-webkit-scrollbarでカスタマイズした方が良いかも。

<div style="width: 100%; overflow-x: auto; white-space: nowrap;">
<table style="margin-bottom: 0px;">
  <tr>
    <th>DTPのプロはWEBのプロになれるか。という永遠？のテーマ</th><th>値段</th><th>エイチティーエムエルとかの呪文暗号を覚えないといけないんでしょ？</th>
  </tr>
  <tr>
    <td>レモン</td><td rowspan="2">600円</td><td>ブラジル産</td>
  </tr>
  <tr>
    <td>パイナップル</td><!--tdは消す--><td>沖縄産</td>
  </tr>
  <tr>
    <td>バナナ</td><td>100円</td><td>フィリピン産</td>
  </tr>
</table>
</div>

リストデザイン

シンプルに上下の線で囲んだリスト。

1. Photoshop
2. Illustrator
3. WordPress
4. HTML
5. CSS

.list {
  color: #333;
  border-top: solid #333 1px;
  border-bottom: solid #333 1px;
  padding: 0.5em 0 0.5em 1.5em;
  line-height: 1.5;
  padding: 0.5em 0;
}