新型コロナウィルス対策として当面の間、完全予約制で1日1組限定での営業を実施しております。ご理解ご協力のほどよろしくお願いいたします。

ワンポイントCSS

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でカスタマイズした方が良いかも。

DTPのプロはWEBのプロになれるか。という永遠?のテーマ値段エイチティーエムエルとかの呪文暗号を覚えないといけないんでしょ?
レモン600円ブラジル産
パイナップル沖縄産
バナナ100円フィリピン産
<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;
}